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
Now Available as a Print Book:
You can buy it from:
The Core UI
- Understanding jQuery (Book Only)
- The DOM And Selectors
- CSS Selectors
- The jQuery Object (Book Only)
- Advanced Filters - Traversing The DOM
- Modifying DOM Objects
- Creating And Modifying The DOM
- jQuery Data
- Function Queues
- jQuery UI
- jQuery UI Custom Control - Widget Factory
- jQuery - Easy Plugins
- Getting Started With QUnit Testing
Now Available as a Print Book:
You can buy it from:
Events, Async & AJAX
- Events, Async & Ajax (Book Only)
- Reinventing Events
- Working With Events
- Asynchronous Code
- Consuming Promises
- Using Promises
- Ajax the Basics - get
- Ajax the Basics - post
- Ajax - Advanced Ajax To The Server
- Ajax - Advanced Ajax To The Client
- Ajax - Advanced Ajax Transports And JSONP
- Ajax - Advanced Ajax The jsXHR Object
- Ajax - Advanced Ajax Character Coding And Encoding
Raw ajax method
The raw or low level ajax method is very easy to specify. You can call it either using:
or just as
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:
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.
sets the url of the request. For example:
- 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:
- 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.
timeoutSets 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 requests - of course Post never uses cached data.
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 behaviour.
So to make sure you get the latest version of the data and only fetch the data if it has been updated since the last fetch you would use:
If the file hasn't been updated since the last request then the then 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:
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 then 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 chapter, in trying to avoid resources being reloaded unnecessarily for example an Ajax request will generally be remade after a page load even if the resource is still in the cache.
- Next >>