Key Concepts

Contact Us or call 1-877-932-8228
Key Concepts

Key Concepts

Proper use of Ajax-related jQuery methods requires understanding some key concepts first.


The two most common "methods" for sending a request to a server are GET and POST. It's important to understand the proper application of each.

The GET method should be used for non-destructive operations, that is, operations where you are only "getting" data from the server, not changing data on the server. For example, a query to a search service might be a GET request. GET requests may be cached by the browser, which can lead to unpredictable behavior if you are not expecting it. GET requests send their data in a query string appended to the URL.

The POST method should be used for destructive operations, that is, operations where you are changing data on the server. For example, a user saving a blog post should use a POST request. POST requests are generally not cached by the browser; the query string is usually sent as the body of the request, after the header block. POST data will be encrypted under HTTPS/SSL.

The Same Origin Policy

The XMLHttpRequest object used for Ajax is subject to the Same Origin Policy, which prevents a request from being made to a server other than the one the page came from.

Data Types

jQuery generally requires some instruction as to the type of data you expect to get back from an Ajax request; in some cases the data type is specified by the method name, and in other cases it is provided as part of a configuration object. There are several options:

  • text - For transporting simple strings, usually to be placed directly into the page
  • html - For transporting blocks of HTML, usually to be placed directly into the page
  • xml - For transporting blocks of XML, which can be parsed to provide data
  • script - For adding a new script to the page -- this type of request uses a concept called dynamic script tagging instead of XMLHttpRequest, and is therefore not limited by the same origin policy
  • json - For transporting JSON-formatted data, which can include JavaScript strings, arrays, and objects
  • jsonp - A variant of JSON, which can be used to retrieve content from other servers -- this type of request also uses dynamic script tagging

Note: As of jQuery 1.4, if the JSON data sent by your server isn't properly formatted, the request may fail silently. See for details on properly formatting JSON, but as a general rule, use built-in language methods for generating JSON on the server to avoid syntax issues.

It is recommended to use the JSON format in most cases, as it provides the most flexibility. It is especially useful when your server environment is PHP, since JSON is also native to that language.

JSON and XML - what do they look like?


person = {"age" : 33, "name" : "Joshua"}



A is for Asynchronous

The asynchronicity of Ajax catches many new jQuery users off guard. Because Ajax calls are asynchronous by default, the response is not immediately available. Responses can only be handled using a callback. So, for example, the following code will not work:

var response;
$.get('foo.php', function(r) { response = r; });
console.log(response); // undefined!

Instead, we need to pass a callback function to our request; this callback will run when the request succeeds, at which point we can access the data that it returned, if any.

$.get('foo.php', function(response) { console.log(response); });

Same-Origin Policy and JSONP

In general, Ajax requests are limited to the same protocol (http or https), the same port, and the same domain as the page making the request. This limitation does not apply to scripts that are loaded via jQuery's Ajax methods.

The other exception is requests targeted at a JSONP service on another domain. In the case of JSONP, the provider of the service has agreed to respond to your request with a script that can be loaded into the page using a <script> tag, thus avoiding the same-origin limitation; that script will include the data you requested, wrapped in a callback function you provide.

Ajax and Firebug

Firebug (or the Webkit Inspector in Chrome or Safari, or IE's Developer Tools) is an invaluable tool for working with Ajax requests. You can see Ajax requests as they happen in the Console or Net tabs of Firebug (and in the Resources > XHR panel of Webkit Inspector), and you can click on a request to expand it and see details such as the request headers, response headers, response content, and more. If something isn't going as expected with an Ajax request, this is the first place to look to track down what's wrong.