Метод ajax()

Следующий метод, с которым я вас познакомлю будет $.ajax() – собственно, он тут главный, и все остальные AJAX-методы являются лишь обёрткой (и load() в том же числе). Метод $.ajax() принимает в качестве параметра пачку настроек и URL.

Приведу пример, аналогичный вызову load():

$.ajax({
    url: "/get-my-page.html", // указываем URL
    method: "GET",            // HTTP метод, по умолчанию GET
    data: { "id": 42 },       // данные, которые отправляем на сервер
    dataType: "html",         // тип данных загружаемых с сервера
    success: function (data) {
        // вешаем свой обработчик события success
        $("#content").html(data);
    }
});

Тут мы обрабатывали HTML-ответ от сервера – это хорошо когда нам полстраницы обновить надо, но данные лучше передавать в «правильном» формате. XML – это понятно, структурировано, но избыточно и как-то не совсем JavaScript-way, и поэтому наш выбор – это JSON:

{
  "note": {
    "time": "2012.09.21 13:11:15",
    "text": "Рассказать про JSONP"
  }
}

Фактически, это и есть JavaScript-код как есть (JavaScript Object Notation, если быть придирчиво точным). При этом формат уже распространён настолько, что работа с данными в другом формате уже не приветствуется.

Жизнь не стоит на месте, есть и более удобные форматы, но не в JavaScript :) Мы же довольствуемся малым — текст, HTML, JSON или XML.

Для загрузки JSON существует быстрая функция-синоним — $.getJSON() — в качестве обязательного параметра лишь ссылка, куда стучимся, опционально можно указать данные для передачи на сервер и функцию обратного вызова.

Нельзя просто так взять и описать все возможные параметры для вызова $.ajax(), таки стоит держать под рукой официальный мануал https://api.jquery.com/jQuery.ajax/.

Ещё есть пара-тройка методов, которые стоит упомянуть:

Все они, как я уже говорил ранее, лишь обёртки над вызовом $.ajax(), в чём несложно убедиться, заглянув в исходный код библиотеки. И там вы найдёте реализацию методов $.get() и $.post() :)

jQuery.each( [ "get", "post" ], function( i, method ) {
    jQuery[ method ] = function( url, data, callback, type ) {

        // Shift arguments if data argument was omitted
        if ( isFunction( data ) ) {
            type = type || callback;
            callback = data;
            data = undefined;
        }

        // The url can be an options object (which then must have .url)
        return jQuery.ajax( jQuery.extend( {
            url: url,
            type: method,
            dataType: type,
            data: data,
            success: callback
        }, jQuery.isPlainObject( url ) && url ) );
    };
} );

Метод getScript() в свою очередь это лишь обёртка над $.get():

PreviousМетод load()NextОбработчики событий

Last updated 7 months ago

$.ajax({ url: "/get-my-page.html", // указываем URL method: "GET", // HTTP метод, по умолчанию GET data: { "id": 42 }, // данные, которые отправляем на сервер dataType: "html", // тип данных загружаемых с сервера success: function (data) { // вешаем свой обработчик события success $("#content").html(data); } });

jQuery.each( [ "get", "post" ], function( i, method ) { jQuery[ method ] = function( url, data, callback, type ) { // Shift arguments if data argument was omitted if ( isFunction( data ) ) { type = type || callback; callback = data; data = undefined; } // The url can be an options object (which then must have .url) return jQuery.ajax( jQuery.extend( { url: url, type: method, dataType: type, data: data, success: callback }, jQuery.isPlainObject( url ) && url ) ); }; } );