jQuery / Ajax

В этом посте я хочу немного поговорить об Ajax, а именно: что это? зачем это нужно? как им пользоваться?

Начнем сначала, что такое Ajax? Начинающие думают, что это какой-то язык программирования на уровне с JavaScript. На самом деле все проще, это всего навсего подход к построению интерактивных веб-приложений (сайтов). Смысл подхода заключается в фоновом обмене данными между клиентом и сервером. Например вы просматриваете ленту новостей, ознакомившись с первой страницей кликаете по ссылке ведущей на вторую страницу и место полного обновления страницы обновляется только список новостей — на место новостей первой страницы подгружаются новости со второй страницы. Такой подход предоставляет следующие плюсы:

  • экономия трафика за счет получения только нужной информации;
  • меньше нагрузка на сервер т.к. ему не нужно генерировать полностью всю страницу, а только часть;
  • пользователь получит запрошенную информацию быстрее.

Согласитесь, каждый из этих пунктов очень важен в жизни любого проекта, по-этому Ajax настолько популярен. Я думаю с первыми двумя вопросами разобрались, теперь приступим к третьему.

Рассмотрим основной метод $.ajax

Он принимает всего один параметр — объект. Посмотрим на этот параметр подробнее.

  • async – асинхронность запроса, по умолчанию true;
  • cache – вкл/выкл кэширование данных браузером, по умолчанию true (false если параметр dataType равен ‘script’ или ‘jsonp’);
  • contentType – по умолчанию “application/x-www-form-urlencoded”;
  • data – передаваемые данные – строка (параметры должны быть разделены символом &) или объект;
  • dataFilter – фильтр для входных данных;
  • dataType – тип данных возвращаемых в callback функцию (xml, html, script, json, jsonp, text);
  • global – тригер – отвечает за использование глобальных AJAX Event’ов, по умолчанию true;
  • ifModified – тригер – проверяет были ли изменения в ответе сервера, дабы не слать еще запрос, по умолчанию false;
  • jsonp – переустановить имя callback функции для работы с JSONP (по умолчанию генерируется на лету);
  • processData – по умолчанию отправляемые данный заворачиваются в объект, и отправляются как “application/x-www-form-urlencoded”, если надо иначе – отключаем;
  • scriptCharset – кодировка – актуально для JSONP и подгрузки JavaScript’ов;
  • timeout – время таймаута в миллисекундах;
  • type – тип запроса GET либо POST;
  • url – url запрашиваемого скрипта.

Ознакомится с полным списком параметров можно на официальном сайте jQuery.

Локальные Ajax event’ы:

  • beforeSend – срабатывает перед отправкой запроса;
  • error – срабатывает если произошла ошибка;
  • success – если ошибок не возникло;
  • complete – срабатывает по окончанию запроса.

Пример Ajax запроса:

1
2
3
4
5
6
7
8
9
$.ajax({
    url: 'http://test/example.html',       // указываем URL для запроса
    dataType : "json",                     // тип данных, возвращаемых сервером
    success: function (data, textStatus) { // вешаем обработчик на функцию success
        $.each(data, function(i, val) {    // тут обрабатываем ответ сервера
            /* ... */
        });
    }
});

Кросс-доменный запрос

Если в процессе разработки в консоли браузера вы увидели нечто похожее,

XMLHttpRequest cannot load http://test/. Origin null is not allowed by Access-Control-Allow-Origin.

значит вы пытаетесь произвести запрос с домена А на домен Б (обращение на поддомен тоже считается кросс-доменным, как и наоборот). Для отправки внешних запросов нужно использовать технику JSONP (JSON Padding или «JSON с подкладкой» является расширением JSON, когда имя функции обратного вызова указывается в качестве входного аргумента). Метод $.ajax с лёгкостью и вполне легально позволяет отправлять кросс-доменные запросы. Для этого нужно создать запрос с учетом двух моментов, а именно добавить к url «?callback=?» и указать свойство dataType равным «jsonp»:

1
2
3
4
5
6
$.ajax({
    url: 'http://test?callback=?',
    dataType: 'json',
        data: {param1: 'hello', param2: 'world'},
        jsonpCallback: 'my_callback_func',
});

На место знака вопроса в параметре callback jQuery подставит имя функции, которая должна вызваться когда сервер ответит на запрос. В вышеприведенном примере, на сервер, будет отправлен следующий GET запрос http://test/?callback=my_callback_func&param1=hello&param2=world. Сервер должен корректно обрабатывать данные запросы и ответ должен быть следующим: my_callback_func([json-ответ]). Если явно не указать имя callback-функции, то jQuery сгенерирует его на лету и оно будет выглядеть примерно так jQuery17201707799246069044_1341130396858 и ответ сервера должен быть таким jQuery17201707799246069044_1341130396858([json-ответ]). Таким образом мы получаем следующую последовательно действий:

1. Происходит некоторое событие;

2. С помощью Ajax формируется и отправляется кросс-доменный запрос с использованием JSONP;

3. Сервер получает запрос, обрабатывает его и посылает ответ;

4. Браузер получает ответ;

5. Если при формировании запроса был указан параметр jsonpCallback, то отработает соответствующая функция, а после метод указанный в event`esuccess. Но это все в случае удачи, иначе в event`e error можно обработать ошибку.

Можно отправить кросс-браузерный запрос всего одной строкой использую методы $.getJSON и $.get:

1
$ . getJSON('ajax/test.json?callback=?');

Source

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: