To improve performance, it's important to optimize these AJAX responses. The most important way to improve the performance of AJAX is to make the responses cacheable. Usually we use AJAX to send data asynchronously to the server and display the result that we get from the server without making the users wait (or less time to wait in practical) for data. We can make it faster if we know that the user is going to ask for the same thing again, then we can make AJAX cacheable. It is almost same as HTTP caching that we have seen in the Setting up browser caching (Simple) recipe.
We can make AJAX cacheable by adding the Expires header to the file, which would be called by AJAX as mentioned in the Adding an Expires or Cache-Control header (Simple) recipe. We can optimize the AJAX response even by minifying the script, which uses the AJAX calls as discussed in the Minifying JavaScript and CSS files (Simple) recipe, and even compress those files that is, GZIP or deflate, as shown in the Enabling compression (Simple) recipe.
When you set the ETag value and set Apache to avoid redirects, it also applies on all such scripts and AJAX calls, which are going to use those web pages, so it is optimized anyways by following those methods. The following response headers are used to make your AJAX cacheable:
Expires: This header should be set to an appropriate time in the future depending on how often the content changes. The Expires header allows the browser to re-use the cached content for a period of time and avoid any unnecessary round-trips to the server.
Last-Modified: By using the Last-Modified value, the browser can use to check its locally cached content used in the GET method. The server would respond with a 304 status code if the data has not changed.
Cache-Control: One should set the Cache-Control value to
Public, to store and share the content with other users. It also enables the caching of HTTPS requests in the Firefox browser.
If the AJAX response data is user specific, it should not have Cache-Control as
Public. This should be done carefully.You can add these three entities to any files, which are going to be requested under the GET method using Apache settings or using any one of your favorite web programming languages, such as Perl, Python, or PHP. It is being discussed in detail in the Setting up browser caching (Simple) recipe.
Once the AJAX request is called, you will see
x-requested-with: XMLHttpRequestunder the headers sent section and you will also see the three entities mentioned previously under the headers received, as shown in the following screenshot:
AJAX caching would not work if you use the POST method in your AJAX requests, because POST requests are never cached. But, you should always use the POST method if your AJAX request has side effects, for example, moving money between bank accounts.
One of the classic examples of AJAX is the autocompletion feature, which you might have experienced while filling any AJAX-enabled online form or might have tried to type e-mail in compose mail and it would display all the user names that match your keystrokes.
Let's take an example of Yahoo! Mail. A user opens the web mail and tries to search for a contact from the address book. Now the browser would look if the address book has been modified since the user's last visit or not; if it has been modified, the browser requests for a new address book before searching for it, else returns the same address book without even requesting the Yahoo! Mail server.
How does it happen? It's simple, browsers need to send the previously accessed address book's timestamp; if this matches, it means the address book has not been modified since that time, so no need to send a request to the server.
One more thing worth mentioning in this section is trying to send the GET method instead of POST when sending the AJAX request, which would send the header and the content data together. Be sure to use lesser size; IE doesn't support more than 2 KB of request. If you have to send more than 2 KB data, which is hardly going to happen unless and until you are trying to do some unethical work, use the POST method.