At first, I should define, what is AJAX? The term refers to the use of different technologies like XML, XHTML, and JavaScript to update a part of a web page without reloading the whole page. This feature is becoming an essential part of modern web development.

In this regard, modern browsers provide XMLHttpRequest API interface for sending requests directly to a web server and load the server response data back into the JavaScript. Working with this API is not convenient for most web developers. Hence, libraries like JQuery try to wrap this API and allow one to easily add Ajax to his or her application. And in this tutorial I am trying to show how one can use it in JQuery.

The main function for using Ajax in JQuery is jQuery.ajax(). There are other methods like post(), and get(), to name but two, to send Ajax requests, but at their cores they use ajax() function. Therefore, in this tutorial, we only discuss about ajax() function.

In the simplest form one can call it just by specifying url setting:

$.ajax({

  url: "./test.php"

});

this fuction call results in sending a HTTP GET to the requested url which is ./test.php. However most of the time on use it like the following:

    $.ajax({
        type: "POST",
        cache: false,
        contentType: "application/json; charset=utf-8",
        url: './test.php',
        data: JSON.stringify(pdata),
        dataType: "json",
        async: true,
        success: function (data, textStatus, jqXHR) {
            if (textStatus == "success") {
                func(data);
            }

        },
        error: function (jqXHR, textStatus, errorThrown) {
            handleError(jqXHR);
        }
    });

These are the most useful settings that one can use. By setting type you can specify by which HTTP command you want to send your HTTP request. You can set either POST or GET. I think the POST value is the most used one. However, the default value for the type setting is GET. The next useful setting is cache, which by using it you can force requested pages not to be cached by the browser. Set it to false when the content of the page you are calling is not static and will change in each call. The default value for this setting is true. If the page is dynamic make sure that it is false.

if one set the type to POST, he or she can send data back to the server in the HTTP body. To do so, one can use the following settings: contentType, data, dataType. I will talk more about them in the next tutorial.

Another setting that one can set is async. When it is set to false, the execution will be blocked until the response arrives. If it is set to true, which is the default value, the request is asynchronous and the execution will continue.

The success function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR object.

The error function to be called if the request fails. The function receives three arguments: The jqXHR object, a string describing the type of error that occurred and an optional exception object, if one occurred.

If one wants to change the default values can call ajaxSetup function with those settings that wants to override before calling ajax function. For example like this:

$.ajaxSetup({
    cache: false
});

I think it suffice for today. In the next tutorial I will try to show you a real example by sending and receiving data  from a WCF web service.