Пример вызова:

$.ajax({
    type: "POST",
    data: 'id=1&pid=0',
    url: '/path/to/script',
    success: function(data) {
        //Код при успехе
    }
});

Перейти к более подробным примерам

Основные настройки которые чаще всего используются: url, data, type, async, error, success


Настройки:

Название Тип По умолчанию Описание
type string GET

HTTP-метод передачи данных при выполнении запроса. Обычно используются GET или POST. Также можно использовать методы PUT и DELETE, но это не рекомендуется, ввиду того, что они поддерживаются не всеми браузерами.

Пример:

$.ajax({
    //...
    type: "POST",
    //...
});
url string текущая страница

Строка, содержащая URL-адрес, по которому посылается запрос.

Пример:

$.ajax({
    //...
    url: "/path/to/script",
    //...
});
data string | object

Данные, отправляемые c запросом на сервер. Они преобразовываются в строку запроса и по умолчанию обязательно кодируются в URL-подобный вид (За автоматическое кодирование в формат URL отвечает параметр processData).

Строка присоединяется к строке запроса URL, если запрос выполняется методом GET. Если же запрос выполняется методом POST, то данные передаются в теле запроса.

Пример:

$.ajax({
    //...
    data: 'value1=1&value2=2&value3=3',
    //...
});

Если данный параметр является объектом в виде набора пар имя_свойства/значение, а значение является массивом, то jQuery сериализует объект в последовательность нескольких значений с одним и тем же ключом.

Пример:

{Foo: [ "bar1", "bar2"]}

Станет

&Foo=bar1&Foo=bar2
async boolean true

Флаг выполнения асинхронных запросов.

Пример:

$.ajax({
    //...
    async: false,
    //...
});
dataType string Строка, определяющая название типа данных, ожидаемых в ответе сервера. Если тип данных не задан, jQuery сама пытается его определить, ориентируясь на MIME-тип ответа сервера. Допустимые значения:xml, html, script, json, jsonp, text. (Это необходимо для того, чтобы определить метод обработки данных, полученных в ответе на запрос, функцией dataFilter перед тем, как они будут переданы функции обратного вызова success.)
cache boolean true

Флаг кэширования ответа.

По умолчанию имеет значение true для типов данных text, xml, html, json. Для типов данных script и jsonp имеет значение по умолчанию false.

contentType string application/x-www-form-urlencoded Тип содержимого в запросе (при передаче данных на сервер).
context object Данный объект станет контекстом (this) для всех функций обратного вызова, связанных с данным ajax-запросом (например, для функций success или error)
$.ajax({ 
    url: "test.html", 
    context: document.body, 
    success: function(){
        $(this).addClass("done");
    }
});
global boolean true Вызов глобальных обработчиков событий на различных этапах ajax-запроса, например, функций ajaxStart или ajaxStop
ifModified boolean false

Если установлено значение true, то запрос считается успешным только в том случае, если данные в ответе изменились с момента последнего запроса (jQuery определяет, совпадает ли компонент в кэше браузера с тем, что находится на сервере, путем проверки заголовка Last-Modified с датой последней модификации содержимого, а в jQuery 1.4 также проверяется заголовок Etag – строка с версией компонента). По умолчанию имеет значение false, т.е. успешность запроса не зависит от заголовков и от изменений в ответе.

username string

Имя пользователя, которое будет использоваться для HTTP авторизации на сервере.

password string Пароль, который будет использоваться в ответ на требование HTTP авторизации на сервере.
processData boolean true

Данные, передаваемые на сервер в параметре data, преобразовываются в строку запроса с типом содержимого Application / X-WWW-форм-urlencoded и кодируются. Если такая обработка нежелательна (когда необходимо отправить на сервер другие данные, например DOMDocument или объект xml), то ее можно обойти, установив для данного параметра значение false.

scriptCharset string

При выполнении запросов методом GET и запросов, ориентированных на получение данных типа jsonp или script, указывает кодировку символов запроса (например UTF-8 или CP1251 ). Полезно при различиях между кодировками на стороне клиента и на серверной стороне.

timeout integer

Устанавливает максимальное время ожидания ответа сервера в милисекундах. Имеет приоритет над глобальной установкой предельного времени ожидания через $.AjaxSetup. Если лимит времени ожидания превышен, то выполнение запроса прерывается и вызывается функция обработки ошибок error (если она установлена).

Название Параметры Описание
error XHR, textStatus, errorThrown

Срабатывает при неудачном запросе. Функции передаются три аргумента:

XHR - экземпляр объекта XMLHttpRequest

textStatus - строка, описывающая тип ошибки, которая произошла (timeout, error, notmodified или parsererror)

errorThrown - необязательный параметр, объект-исключение, если таковой имеется (возвращается экземпляром объекта XHR)

Пример:

$.ajax({
    //...
    error: function() {
        alert('Ошибка!');
    },
    //...
});
success data, textStatus, XHR

Срабатывает при успешном запросе. Функции передаются три аргумента:

data - данные, возвращаемые сервером в ответе, предварительно обработанные функцией dataFilter в соответствии со значением параметра dataType

textStatus - строку с кодом статуса, сообщающем об успехе

XHR - экземпляр объекта XMLHttpRequest

Пример:

$.ajax({
    //...
    success: function() {
        alert('Успех!');
    },
    //...
});
beforeSend XHR

Срабатывает перед отправкой запроса. В качестве единственного аргумента ей передается экземпляр объекта XHR (XMLHttpRequest). Если функция возвращает false, то происходит отмена запроса.

Пример:

$.ajax({
    //...
    beforeSend: function() {
        alert('Сработал beforeSend!');
    },
    //...
});
complete XHR, textStatus

Срабатывает по окончанию запроса независимо от его успеха или неудачи (а также после функций success и error, если они заданы). Функция получает два аргумента: экземпляр объекта XHR (XMLHttpRequest) и строку, сообщающую о состоянии success или error (в соответствии с кодом статуса в ответе на запрос)


Подробный пример:

<!DOCTYPE html>
<html>
    <head>
        <!-- Обязательно подключите библиотеку jQuery -->    
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>        
        <script>
            function testAjax(id, pid) {
                $.ajax({
                    type: "POST",
                    data: 'id=' + id + '&pid=' + pid,
                    url: '/path/to/script/test.php',
                    success: function(data) {
                        var obj = $.parseJSON(data); //Преобразование json ответа сервера
                        if (obj.error == 0) {
                            alert('Запрос прошел успешно');
                        } else {
                            alert(obj.error);
                        }
                    }
                });
                return true;
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="testAjax(1, 0)">Успешный запрос</a><br />
        <a href="#" onclick="testAjax(0, 1)">Запрос с ошибкой</a>
    </body>
</html>

PHP скрипт (test.php):

<?php
    if ($_POST['id'] == 1 && $_POST['pid'] == 0) {
        echo json_encode(array('error' => 0));
    } else {
        echo json_encode(array('error' => 1, 'message' => 'Что то пошло не так!'));
    }
?>

Еще один пример, отличается выводом ответа:

<!DOCTYPE html>
<html>
    <head>
        <!-- Обязательно подключите библиотеку jQuery -->    
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>        
        <script>
            function testAjax(id, pid) {
                $.ajax({
                    type: "POST",
                    data: 'id=' + id + '&pid=' + pid,
                    url: '/path/to/script/test.php',
                    success: function(data) {
                        $('#content').html(data);
                    }
                });
                return true;
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="testAjax(1, 0)">Успешный запрос</a><br />
        <a href="#" onclick="testAjax(0, 1)">Запрос с ошибкой</a>
        <p>Ответ:</p>
        <div id="content"></div>
    </body>
</html>

PHP скрипт (test.php):

<?php
    if ($_POST['id'] == 1 && $_POST['pid'] == 0) {
        echo 'Все хорошо';
    } else {
        echo 'У нас тут ошибочка!';
    }
?>

Больше информации можно посмотреть по адресу: http://api.jquery.com/jquery.ajax/