Getting Started With jQuery - Advanced Ajax
Getting Started With jQuery - Advanced Ajax
Written by Ian Elliot   
Monday, 28 September 2015
Article Index
Getting Started With jQuery - Advanced Ajax
Sending data to the Server
Sending XML/JSON

So far in our exploration of jQuery we have used the "shorthand" Ajax methods. These are all implemented as calls the to the full jQuery ajax method and if you want to do anything slightly out of the ordinary then you need to make use of it directly. In this installment we look at controlling the request and sending data to the server 

  

jquerycover

Chapter List 

  1. The DOM
  2. CSS Selectors
  3. Filters
  4. Advanced Filters
  5. Manipulating The DOM
  6. Promises & Deferred
  7. Promises, Deferred & WebWorkers
  8. Ajax the Basics - get
  9. Ajax the Basic -  post
  10. Ajax - Advanced Ajax To The Server 
  11. Ajax - Advanced Ajax To The Client
  12. Ajax - Advanced Ajax Transports And JSONP
  13. Ajax - Advanced Ajax The jsXHR Object
  14. Ajax - Advanced Ajax Character Coding And Encoding
  15. jQuery - Easy Plugins
  16. jQuery UI
  17. jQuery UI Custom Control - Widget Factory
  18. Getting Started With QUnit Testing
 

Raw ajax method

The raw or low level ajax method is very easy to specify. You can call it either using:

$.ajax(url,options);

or just as

$.ajax(options);

with the url specified as part of the options object.

All of the complexities of using it are hidden in the options object. This is a set of key value pairs that you use to specify how the Ajax request should be performed. 

Notice that the only difference between the two forms of using the ajax method is that if you don't specify the url as the first parameter it has to be specified in the option object. 

The simplest post request using the ajax method is something like:

var options={};
options.url="process.php";
options.method="post";
options.data={first:"ian",last:"elliot",id:27};

$.ajax(options).done(
 function(data){
 alert(data);
});

That is the url property sets the request url, the method sets the method to post in this case and the data property is the data sent to the server. 

This is all there is the the ajax method and all that remains to do is investigate the various options you can set.

Instead of dealing with the option in alphabetical order, which is what the documentation does, it is more useful to look at them in groups according to what they are concerned with.

Controlling the request

There are a set of options that modify the very basic nature of the Ajax request. Instead of just presenting them as an alphabetic list it is worth dealing with the in logical groups.

You need to read the first section on controlling the basic HTTP call. 

Basic HTTP call

There are a set of options that control the basic nature of the HTTP request being made and how it is handled. 

It is important that you read the section on ifModified and cache.

  • url
    sets the url of the request. For example:
    options.url="process.php";

  • method or type
    method sets the type of request, and you can use type as a alias for method. You can set it to GET, POST. PUT or HEAD. Its default is GET. For example:
    options.method="post";

  • async
    you can force a request to be handled in a synchronous way. If you do this then your JavaScript will wait for the request to complete and the UI will freeze. The default setting is true and this is how you generally should leave it. There are very few, if any, uses of synchronous Ajax requests.

  • ifModified and cache
    Setting ifModified to true will cause the Ajax request to fail if the browser detects that the resource hasn't changed since it was last requested. Setting cache to false forces Get and Put to retrieve the resource even if it is available in the cache. 
    ifModified and cache control whether a resource is retrieved over the network or not and this is a topic which deserves separate treatment.
  • timeout 

    Sets the timeout for the request in milliseconds. The timing starts from the attempt to make the request so it can include time spent queuing for the client to deal with it. What this means is that you might have to factor in additional time over and above the response time of the server. 

Only getting new data

Sooner or later you will fall foul of cached results.

The standard waste of time is that you send some data to the server using Post and retrieve it using Get. The first time you do this it seems to work but later on any changes you make to the data aren't reflected in the data you get back from Get. 

The reason for this is that by default Post doesn't cache data but Get does.

Put simply if you request the same URL more than once using Get then the browser will cache the first request and use this for the data for all subsequent requests. 

One possible solution is to use a different URL for all Get operations by adding something unique to the end of the query string but it is simpler to set cache to false and get jQuery to do the job for you. If cache is set to false then jQuery will add a query string "_=timestamp" to Get and Put request - of course Post never uses cached data. For example:

options.cache=false;

Related to caching is ifModified. If this is set to true then the Ajax call only works if the response has changed since the last request. It basically checks the time in the Last-Modified header to the time of the last request. Notice that this first retrieves just the headers of the HTTP request needed for the resource and so this can save downloading something that hasn't changed. However making this work consistently is a matter of dealing with different browser and server behavour. 

So to make sure you get the lastest version of the data and only fetch the data if it has been updated since the last fetch you would use:

var options={};
options.url="process.php";
options.method="get";
options.cache=false;
options.ifModified=true;

$.ajax(options).done(
 function(data){
 alert(data);
});

If the file hasn't been updated since the last request then the done method will be called but data will be undefined. 

Only use ifModified if the resource requested is big because trying to save downloads usually causes trouble for some browsers and it also depends on the headers that the server includes. 

For example if you try:

var options={};
options.url="mydata.txt";
options.method="get";
options.cache=false;
options.ifModified=true;
$.ajax(options).done(
 function(data){
  console.log(data);
});

window.setTimeout(
 function(){
  $.ajax(options).done(
    function(data){
      console.log(data);
    })
  },5000);

then what you will see depends mostly on the server. Most servers will send a Last-Modified header and the second Ajax request for the static file will fail because it hasn't been modified in the 5 second interval. In this case done will still be called but you will see undefined displayed i.e. the data isn't retrieved.  However if you try it with say the built in PHP server you will find that you get the static file twice because it doesn't  send the header and so each Ajax request transfers the file. 

Notice that setting cache=true doesn't change the result the request still usually fails if the Last-Modified header indicates that there has been no change to the file. The problem is that some older browsers load the data from the cache even if the data hasn't changed.

There are many other problems, far too many to deal with in this chatper, in trying to avoid resources being reloaded unnecessrily for example an Ajax request will generally be remade after a page load even if the resource is still in the cache.  



Last Updated ( Monday, 28 September 2015 )
 
 

   
Banner
Copyright © 2017 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.