Jquery ajax

Более сложный пример ajax-запроса через jQuery

Пример выполнения запроса функцией ajax с передачей данных post методом и обработкой событий. Ниже опишу дополнительные параметры, которые чаще всего применяются.

$.ajax({
  url: '<url-адрес>',
  type: 'post',
  data: '<отправляемые_данные>', // можно строкой, а можно, например, так: $('input, input:checked, input:checked, select, textarea')
  dataType: 'json',
  beforeSend: function() {
    $('#sendajax').button('loading');
  },
  complete: function() {
    $('#sendajax').button('reset');
  },
  success: function(json) {
    // какие-то действия с полученными данными
  },
  error: function(xhr, ajaxOptions, thrownError) {
    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
  }
});

Кнопка отправки данных:

<button class="btn btn-primary" data-loading-text="Отправка..." id="sendajax" type="button">Отправить</button>

В приведенном примере при нажатии на кнопку button, сначала меняется состояние кнопки (текст на ней меняется на «Отправка…» и она становится не активной), что делается при помощи параметра beforeSend. Затем происходит отправка запроса с передачей нужных данных. После того, как получен ответ от сервера состояние кнопки возвращается в прежнее (текст меняется на «Отправить», становится активной). Ответ получается в виде json-данных.

Коротко опишу параметры отправки ajax-запроса, которые чаще всего могут пригодиться:

url	Адрес отправки ajax-запроса
type	Способ отправки запроса GET или POST
data	Отправляемые серверу данные. Может быть строка с параметрами и их значениями в формате par1=val1&par2=val2&…, объект jQuery, например, $(‘input’) или другие данные.
dataType	Тип получаемых от сервера данных. Может быть html, json, text, script и xml.
cache	Кэширование браузером запроса (false — не кэшировать).
async	Асинхронное выполнение запроса, т.е. программа продолжает выполняться не дожидаясь ответа сервера. Если указать false, то запрос будет выполнен синхронно, при этом страница не будет ни на что реагировать, пока не будет получен ответ от сервера.
processData	Преобразование отправляемых данных в url-формат. Если нужно чтобы данные не преобразовывались, установить в false. Например, при отправке изображения на сервер или xml-данных.
contentType	Тип передаваемых данных, по умолчанию «application/x-www-form-urlencoded; charset=utf-8». Если указать false, то в заголовке не будет передаваться тип, что может быть необходимо, например, при отправке изображения на сервер.
beforeSend	Функция, выполняемая перед отправкой ajax-запроса.
complete	Функция, выполняемая после получения ответа от сервера (любого, успешного или нет).
success	Функция, выполняемая при удачном выполнении запроса.
error	Функция, выполняемая в случае ошибки.

Ниже приведу еще несколько примеров использования ajax-запросов.

Как прочитать данные в формате JSON с помощью jQuery

4.1 Показать товары на странице при загрузке

В папке products откройте файл read-products.js

Следующий код вызовет метод showProducts() при первой загрузке веб-страницы.

Функция showProducts() покажет список продуктов в виде HTML-таблицы. Поместите следующий код в файл read-products.js.

4.2 Показать товары при клике на кнопку

Следующий код вызовет метод showProducts() при нажатии кнопки с классом кнопки read-products-button.

Кнопку можно найти в HTML-шаблонах «Создать товар и «Обновить товар. Мы увидим это в следующих разделах.

Поместите следующий код под showProducts(); предыдущего раздела.

4.3 Создание функции showProducts()

Теперь мы создадим метод showProducts(). Замените комментарий // здесь будет метод showProducts() в файле read-products.js следующим кодом.

4.4 Получение списка товаров

Следующий код свяжется с нашим API, чтобы получить список продуктов в формате JSON. Поместите следующий код после открывающей фигурной скобки предыдущего раздела.

4.5 Создание кнопки «Добавить товар»

Мы должны добавить кнопку «Создать продукт» в списке товаров. Мы заставим эту кнопку работать позже в этом руководстве.

Поместите следующий код после открывающей фигурной скобки предыдущего раздела.

4.6 Создание HTML-таблицы

Мы должны начать строить HTML-таблицу, в которой появится список продуктов.

Следующий код создаст HTML-таблицу с ее заголовком. Разместите его после кода предыдущего раздела.

4.7 Построение строки таблицы для каждой записи

Мы пройдемся по каждой записи, возвращаемой API. Для каждой записи мы создадим строку таблицы.

Помимо данных о товаре, строка таблицы также будет иметь кнопки «Действие». К ним относятся кнопки «Просмотр», «Редактировать» и «Удалить».

Замените комментарий // здесь будут строки следующим кодом.

4.8 Вставка контента на страницу

Мы должны сделать так, чтобы HTML-таблица появилась на нашей веб-странице. Мы сделаем это, выводя таблицу в div page-content.

Поместите следующий код после закрывающего тега table

4.9 Изменение заголовка страницы

Следующий код изменит «заголовок» на веб-странице и «заголовок» на вкладке браузера.

Поместите следующий код после кода предыдущего раздела.

1 Introduction

You load a website and you see something. You click on a button — maybe «next page» to change the result set — and it loads new data, but the page didn’t refresh. This happened thanks to AJAX.

Let’s look at a real-life example. Go to google.com and search for «dogs» — see how the search results appear instantly, and they even change when you alter the search? That data got pulled in «on-demand,» and that’s what AJAX is. AJAX relies on both JavaScript and HTTP, and it’s good to understand both in order to completely grasp AJAX.

1.1 What is HTTP?

What you see when you browse a page is not just one big object. It’s actually made up of multiple pieces that are pulled together behind the scenes, in several different HTTP requests. This video gives a good overview of HTTP.

HTTP is like an annoying kid that always has something to say back to you. We make requests like «I want the search results for the ‘dog’ keyword.» Every request has a response; if everything went OK, we would get back an HTTP Status code of 200, or . If something went wrong, it usually returns one of several errors in the 400s and 500s, depending on the problem. Every request includes the data that we send along with additional information, contained in header fields, describing what we want and how we want it. The same goes for the response.

HTTP uses verbs to describe actions like getting, creating, updating, and deleting. The verb is usually used to create resources, and that’s the one we’ll use in our example.

1.2 How do I see my requests?

There are several tools that will allow you to see all of the individual requests, and most can be added to your web browser or already come built right in.

Firefox includes the built-in Firefox Inspector, which you can access with the shortcut or . HTTP requests appear under the Network tab. There’s also Firebug for Firefox — which you can download here — and open using the or shortcut; HTTP requests can be found in the Net tab.

Safari, Chrome, and Internet Explorer also have built-in developer toolbars. Both Chrome and IE have a Network tab, while requests are shown under Safari’s Timelines tab. We’ll be using the Firefox Inspector, which by default shows every request including JavaScript, CSS, Images, and XHR. The inspector only shows requests made while it’s open, so you’ll need to refresh the page to capture them the first time.

1.3 XHR, is that a virus or something?

No. You won’t be suffering from a venereal disease, I promise. Browsers use a special JavaScript object called the to make HTTP requests in the background. You can think of it as your personal assistant that gets things for you and puts them where they’re supposed to be once you give them instructions. With jQuery you don’t have to worry about learning how to use this object, because the framework has taken care of all of the nitty-gritty details for you.

1.4 Why should I care?

If you know how to put together the pieces, you’ll be able to handle any AJAX situation. You could hop into another framework like Dojo, or even understand the AJAX parts of AngularJS.

Just as the HTML page from our mental model above was a single GET request, we could do the same with other types of requests. We could modify data on our server using POST, PUT, PATCH or DELETE, for example.

Расширенный подход

Начиная с jQuery-1.5 появились три новых направления, позволяющие использовать $.ajax() еще более глубоко. Первый из них (Prefilters) позволяет провести дополнительные манипуляции, непосредственно перед отправкой запроса. С помощью второго подхода (Converters) можно указать jQuery, как следует конвертировать полученные от сервера данные, если они не соответствуют ожидаемому формату. Третий подход (Transports) является наиболее низкоуровневым, он позволяет самостоятельно организовать запрос к серверу.

Prefilters

Этот подход состоит в установке обработчика, вызываемого перед выполнением каждого ajax-запроса. Этот обработчик предшествует выполнению любых других обработчиков ajax. Устанавливается он с помощью функции $.ajaxPrefilter():

$.ajaxPrefilter(function(options, originalOptions, jqXHR){
  // Изменяем настройки (options), проверяем базовые настройки (originalOptions) и объект jqXHR
});

Гдеoptions — настройки текущего запроса,originalOptions — настройки по умолчанию,jqXHR — jqXHR-объект данного запроса.

В Prefilters удобно обрабатывать пользовательские настройки (т.е. новые, неизвестные библиотеке настройки, указанные в запросе). Например, можно ввести собственную настройку abortOnRetry, при включении которой незавершенные запросы будут сбрасываться, в случае, если на этот-же url поступает следующий запрос:

var currentRequests = {};
 
$.ajaxPrefilter(function(options, originalOptions, jqXHR){
  if(options.abortOnRetry){
    if(currentRequestsoptions.url){
      currentRequestsoptions.url.abort();
    }
    currentRequestsoptions.url = jqXHR;
  }
});

В ajaxPrefilter удобно обрабатывать и существующие настройки. Например так можно изменить кросс-доменный запрос на перенаправленный через сервер своего домена:

$.ajaxPrefilter(function(options){
  if(options.crossDomain){
    options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url );
    options.crossDomain = false;
  }
});

Кроме этого, можно указывать значения dataType на которых сработает prefilter. Так, к примеру, можно указать типы json и script:

$.ajaxPrefilter( "json script", function(options, originalOptions, jqXHR){
  // Изменяем настройки (options), проверяем базовые настройки (originalOptions) и объект jqXHR
});

И наконец, можно изменить значение dataType, вернув необходимое значение:

$.ajaxPrefilter(function(options){
  // изменим dataType на script, если url соответствует определенным условиям
  if (isActuallyScript(options.url)){
    return "script";
  }
});

Такой подход гарантирует не только то, что запрос изменит свой тип на script, но и то, что остальные prefilter-обработчики с указанием этого типа в первом параметре, будут также выполнены.

Converters

Этот принцип заключается в установке обработчика, который сработает, если указанный в настройках dataType не совпадет с типом данных, присланных сервером.

Converters является настройкой ajax, поэтому может быть задан глобально:

// так можно задать обработчик, который сработает, если вместо
// указанного вами в dataType типа mydatatype придут данные типа text
$.ajaxSetup({
  converters{
    "text mydatatype"function( textValue ){
      if(valid( textValue )){
        // обработка переданного текста
        return mydatatypeValue;
      } else {
        // если присланные сервером данные совсем не соответствуют ожидаемым,
        // можно вызвать исключение.
        throw exceptionObject;
      }
    }
  }
});

Converters поможет при введении собственного (пользовательского) dataType

Важно отметить, что в названии такого dataType должны использоваться только строчные буквы! Запрос данных, упомянутого выше типа «mydatatype», мог бы выглядеть следующим образом:

$.ajax( url,{
  dataType"mydatatype"
});

Converters может быть задан и не глобально (т.е. для конкретного запроса). В следующем примере, будет продемонстрирован запрос к серверу, ответ от которого должен будет прийти в xml, после чего конвертирован в обычный текст (способ конвертации будет задан нами в параметре converters и будет действовать только для этого запроса), а из текста в «mydatatype» (используя заданный глобально converters):

$.ajax( url, {
  dataType "xml text mydatatype",
  converters {
    "xml text" function( xmlValue ) {
      // здесь будут вытащены нужные текстовые данные из предоставленного xml
      return textValue;
    }
  }
});

Объект jqXHR

Метод ajax() возвращает объект jqXHR, который можно использовать для получения подробной информации о запросе и с которым можно взаимодействовать. Объект jqXHR представляет собой оболочку объекта XMLHttpRequest, составляющую фундамент браузерной поддержки Ajax.

При выполнении большинства операций Ajax объект jqXHR можно просто игнорировать, что я и рекомендую делать. Этот объект используется в тех случаях, когда необходимо получить более полную информацию об ответе сервера, чем та, которую удается получить иными способами. Кроме того, его можно использовать для настройки параметров Ajax-запроса, но это проще сделать, используя настройки, доступные для метода ajax(). Свойства и методы объекта jqXHR описаны в таблице ниже:

Свойства и методы объекта jqXHR

Свойство/метод	Описание
readyState	Возвращает индикатор хода выполнения запроса на протяжении всего его жизненного цикла, принимающий значения от 0 (запрос не отправлен) до 4 (запрос завершен)
status	Возвращает код состояния HTTP, отправленный сервером
statusText	Возвращает текстовое описание кода состояния
responseXML	Возвращает ответ в виде XML (если он является XML-документом)
responseText	Возвращает ответ в виде строки
setRequest(имя, значение)	Возвращает заголовок запроса (это можно сделать проще с помощью параметра headers)
getAllResponseHeaders()	Возвращает в виде строки все заголовки, содержащиеся в ответе
getResponseHeaders(имя)	Возвращает значение указанного заголовка ответа
abort()	Прерывает запрос

Объект jqXHR встречается в нескольких местах кода. Сначала он используется для сохранения результата, возвращаемого методом ajax(), как показано в примере ниже:

В этом примере мы сохраняем результат, возвращаемый методом ajax(), а затем используем метод setInterval() для вывода информации о запросе каждые 100 мс

Использование результата, возвращаемого методом ajax(), не изменяет того факта, что запрос выполняется асинхронно, поэтому при работе с объектом jqXHR необходимо соблюдать меры предосторожности. Для проверки состояния запроса мы используем свойство readyState (завершению запроса соответствует значение 4) и выводим ответ сервера на консоль

Для данного сценария консольный вывод выглядит так (в вашем браузере он может выглядеть несколько иначе):

Я использую объект jqXHR лишь в редких случаях и не делаю этого вообще, если он представляет собой результат, возвращаемый методом ajax(). Библиотека jQuery автоматически запускает Ajax-запрос при вызове метода ajax(), и поэтому я не считаю возможность настройки параметров запроса сколько-нибудь полезной. Если я хочу работать с объектом jqXHR (как правило, для получения дополнительной информации об ответе сервера), то обычно делаю это через параметры обработчика событий, о которых мы поговорим далее. Они предоставляют мне информацию о состоянии запроса, что избавляет от необходимости выяснять его.

4 Nothing is working!!

When everything looks fine and your form still doesn’t work, trying to solve the problem can get very aggravating, very quickly. Here are some common issues along with their fixes.

4.1 Getting HTTP 400 or 500 errors

Your JavaScript is fine, but there’s a problem with the server handling your AJAX request. Check the specific request in the Network tab of your developer toolbar to see what’s going on. Pay close attention to your request Content-Type and the data you sent. For Firebug, it’s labeled «Source» under the Post tab for the request. Also pay attention to the HTTP status code and any error messages; some developer toolbars will color requests with HTTP status codes of 400 or 500 in red to denote that something went wrong on the server side.

4.2 JavaScript errors

Sometimes nothing is working because you have a JavaScript error. These are easy to figure out — just look at your Console tab. The error will be there along with the filename and line number.

4.3 Everything looks fine and it still doesn’t work!

This could be one of several issues, but the most common problems are logic errors and typos. Check to make sure that you’ve used the right selectors in your jQuery, that your HTML is valid, and that you haven’t mistakenly introduced a typo in your HTML or JavaScript. If you’re loading JavaScript from an external file, make sure it’s getting loaded into the browser. Double check the URL path.

4.4 Feeling rejected? Your AJAX request probably is.

If you’re trying to POST, looks fine, and you know the server-side code works, double check to see if is pointing to a domain that’s different from the domain that the JavaScript is loaded from. This also applies if you’re trying to make an AJAX POST from the, but your page is non-secure (http://) and you’re trying to load it from the secure site (https://) and vice-versa.

These limitations are in place for security reasons. They all fall under the «Same-Origin Policy», and unless cross-domain scripting is explicitly enabled in the browser or on the web server, you can only make AJAX calls from the same domain as the JavaScript. There are workarounds available, though.

Создание асинхронного AJAX запроса (метод GET)

Рассмотрим создание асинхронного AJAX запроса на примере, который будет после загрузки страницы приветствовать
пользователя и отображать его IP-адрес.

Для этого необходимо создать на сервере 2 файла в одном каталоге:

1. – HTML-страница, которая будет отображаться пользователю. В этой же страницы поместим
   скрипт, который будет осуществлять все необходимые действия для работы AJAX на стороне клиента.
2. – PHP-файл, который будет обрабатывать запрос на стороне сервера, и формировать ответ.
   Начнём разработку с создания основной структуры файла

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Пример работы AJAX</title>
</head>
<body>
  <h1>Пример работы AJAX</h1>
  <div id="welcome"></div>
  <script>
  // Здесь поместим код JavaScript, который будет отправлять запрос на сервер, получать его и обновлять содержимое страницы. Всё это будет работать без перезагрузки страницы

</script>
</body>
</html>  

Рассмотрим последовательность действий, которые необходимо выполнить на стороне клиента (в коде JavaScript):

1. Подготовим данные, необходимые для выполнения запроса на сервере. Если для выполнения запроса на сервере данные
   никакие не нужны, то данный этап можно пропустить.

2. Создадим переменную, которая будет содержать экземпляр объекта XHR (XMLHttpRequest).

3. Настроим запрос с помощью метода .

   Указываются следующие параметры:

   • Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
   • URL-адрес, который будет обрабатывать запрос на сервере.
   • Тип запроса: синхронный (false) или асинхронный (true).
   • Имя и пароль при необходимости.

4. Подпишемся на событие объекта XHR и укажем обработчик в виде анонимной или
   именованной функции. После этого создадим код внутри этой функции, который будет проверять состояние ответа, и
   выполнять определённые действия на странице. Ответ, который приходит с сервера, всегда находится в свойстве
   .

   Дополнительно с проверкой значения свойства числу 4, можно проверять и значение свойства
   . Данное свойство определяет статус запроса. Если оно равно 200, то всё . А
   иначе произошла ошибка (например, 404 – URL не найден).

5. Отправим запрос на сервер с помощью метода .

   Если используем для отправки запроса метод GET, то передавать данные в параметр данного метода не надо. Они
   передаются в составе URL.

   Если используем для отправки запроса метод POST, то данные необходимо передать в качестве параметра методу
   . Кроме этого, перед вызовом данного метода необходимо установить заголовок Content-Type, чтобы
   сервер знал в какой кодировке пришёл к нему запрос и смог его расшифровать.

Содержимое элемента :

// 2. Создание переменной request
var request = new XMLHttpRequest();
// 3. Настройка запроса
request.open('GET','processing.php',true);
// 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
request.addEventListener('readystatechange', function() {
  // если состояния запроса 4 и статус запроса 200 (OK)
  if ((request.readyState==4) && (request.status==200)) {
    // например, выведем объект XHR в консоль браузера
    console.log(request);
    // и ответ (текст), пришедший с сервера в окне alert
    console.log(request.responseText);
    // получить элемент c id = welcome
    var welcome = document.getElementById('welcome');
    // заменить содержимое элемента ответом, пришедшим с сервера
    welcome.innerHTML = request.responseText;
  }
}); 
// 5. Отправка запроса на сервер
request.send();

В итоге файл будет иметь следующий код:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Пример работы AJAX</title>
</head>
<body>
  <h1>Пример работы AJAX</h1>

  <div id="welcome"></div>

<script>
window.addEventListener("load",function() {
  var request = new XMLHttpRequest();
  request.open('GET','processing.php',true);
  request.addEventListener('readystatechange', function() {
    if ((request.readyState==4) && (request.status==200)) {
      var welcome = document.getElementById('welcome');
      welcome.innerHTML = request.responseText;
    }
  });
request.send();
});
</script>

</body>
</html>

На сервере (с помощью php):

1. Получим данные. Если данные посланы через метод , то из глобального массива
   . А если данные переданы с помощью метода , то из глобального
   массива .
2. Используя эти данные, выполним некоторые действия на сервере. В результате которых получим некоторый ответ.
   Выведем его с помощью .

<?php
$output = 'Здравствуйте, пользователь! ';
if ($_SERVER) {
  $output .= 'Ваш IP адрес: '. $_SERVER;
}
else {
 $output .= 'Ваш IP адрес неизвестен.';
}
echo $output;

Синхронный запрос

Чтобы выполнить синхронный запрос, измените третий параметр в методе на :

xhttp.open(«GET», «ajax_info.txt», false);

Иногда async = false используется для быстрого тестирования. Вы также найдете синхронные запросы в старом коде JavaScript.

Поскольку код будет ждать завершения работы сервера, в функции нет необходимости:

Пример

xhttp.open(«GET», «ajax_info.txt», false);
xhttp.send();
document.getElementById(«demo»).innerHTML = xhttp.responseText;

Синхронный XMLHttpRequest (async = false) не рекомендуется, потому что JavaScript перестанет выполняться, пока не будет готов ответ сервера. Если сервер занят или работает медленно, приложение зависнет или остановится.

Синхронный XMLHttpRequest находится в процессе удаления из веб стандарта, но этот процесс может занять много лет.

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

HTTP Request: GET vs. POST

Two commonly used methods for a request-response between a client and server
are: GET and
POST.

• GET — Requests data from a specified resource
• POST — Submits data to be processed to a specified resource

GET is basically used for just getting (retrieving) some data from the server.
Note: The GET method may return cached data.

POST can also be used to get some data from the server. However, the POST
method NEVER caches data, and is often used to send data along with the request.

To learn more about GET and POST, and the differences between the two
methods, please read our HTTP Methods GET vs
POST chapter.

Включаем кэширование для AJAX запросов

По умолчанию все AJAX запросы НЕ кэшируются браузером для этого PHP устанавливает специальные заголовки функцией nocache_headers().

Чаще всего AJAX запросы кэшировать и не надо, потому что они должны возвращать свежие данные, но бывают случаи когда такое кэширование может сэкономить ресурсы и увеличить скорость работы скрипта. Например, если у нас есть сложный фильтр товаров который юзеры используют постоянно. Тут было бы разумно кэшировать все результаты фильтра например на пару часов, все равно товары не добавляются с такой скоростью…

Как включить кэширование для указанных AJAX запросов смотрите во втором примере функции nocache_headers().

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования jQuery функции $.get()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "form" ).submit(function(){
	    event.preventDefault(); // отменяем действие события по умолчанию
	    var formData = $( this ).serialize(); // создаем переменную, которая содержит закодированный набор элементов формы в виде строки

	    $.get( "user2.php", formData, function( data ) { //  передаем и загружаем данные с сервера с помощью HTTP запроса методом GET
	      $( "div" ).html( data ); // вставляем в элемент <div> данные, полученные от сервера
	    })
	  });
	});
		</script>
	</head>
	<body>
		<form> <!-- метод GET по умолчанию -->
			<input type = "text" placeholder = "Имя" name = "firstName" required> <!-- поле обязательно к заполнению -->
			<input type = "text" placeholder = "Фамилия" name = "lastName" required> <!-- поле обязательно к заполнению -->
			<input type = "submit" value = "Добавить">
		</form>
		<div></div>
	</body>
</html>

В этом примере мы привязываем JavaScript обработчик событий «submit» (обработчик отправки формы), который срабатывает в момент отправки (в нашем случае заполненной) формы при нажатии на элемент <input> с типом submit (кнопка для отправки формы).
При отправке формы мы вызываем JavaScript метод event.preventDefault(), который позволяет нам отменить действие события по умолчанию и избежать перезагрузки страницы и передачи собранной информации как часть URL (url?firstName=значение&lastName=значение).

Кроме того, мы создаем переменную, которая содержит закодированный набор элементов формы в виде строки — результат выполнения метода .serialize().
После этого с использованием jQuery функции $.get() выполняем асинхронный AJAX запрос со следующими параметрами:

url — файл, к которому мы обращаемся («user2.php»), он содержит следующий PHP код:

<?php $firstName = $_GET; // создаем переменную firstName, которая содержит переданные скрипту через HTTP метод GET данные (с ключом firstName)
$lastName = $_GET; // создаем переменную lastName, которая содержит переданные скрипту через HTTP метод GET данные (с ключом lastName)
echo «Пользователь «.$firstName.» «.$lastName.» добавлен»; // выводим текстовое содержимое (значение выше созданных переменных)
?>

data — данные, которые будут отправлены на сервер (значение переменной formData).

success — функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно

Обратите внимание, что один из параметров функции (data) содержит данные возвращенные с сервера, которые мы и вставляем в элемент с помощью метода .html().

Результат нашего примера:

Пример использования jQuery функции $.get()

В следующем примере мы рассмотрим как с помощью jQuery функции $.get() загрузить JSON файл и выведем из него некоторую информацию:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования функции $.get (загрузка JSON файла)</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	    $.get( "test.json", function( data ) { //  загружаем данные с сервера с помощью HTTP запроса методом GET
	      $( "div" ).html( data.firstName + " " + data.age ); // вставляем в элемент <div> данные, полученные от сервера
	    })
	  });
	});
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

В этом примере при загрузке документа мы с использованием jQuery функции $.get() выполняем асинхронный AJAX запрос со следующими параметрами:

url — файл, к которому мы обращаемся («test.json»), он имеет следующее содержимое:

{
«firstName»: «Борис»,
«lastName»: «Бритва»,
«age»: 25,
«phone»: 88005553535
}

success — функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно

Обратите внимание, что один из параметров функции (data) содержит данные возвращенные с сервера (JSON файл), которые мы частично вставляем в элемент с помощью метода .html().

Результат нашего примера:

Пример использования функции $.get (загрузка JSON файла)jQuery AJAX

IE8,9: XDomainRequest

В IE8 и IE9 поддержка XMLHttpRequest ограничена:

• Не поддерживаются события, кроме onreadystatechange .
• Некорректно поддерживается состояние readyState = 3 : браузер может сгенерировать его только один раз во время запроса, а не при каждом пакете данных. Кроме того, он не даёт доступ к ответу responseText до того, как он будет до конца получен.

Дело в том, что, когда создавались эти браузеры, спецификации были не до конца проработаны. Поэтому разработчики браузера решили добавить свой объект XDomainRequest , который реализовывал часть возможностей современного стандарта.

А обычный XMLHttpRequest решили не трогать, чтобы ненароком не сломать существующий код.

Мы подробнее поговорим про XDomainRequest в главе XMLHttpRequest: кросс-доменные запросы. Пока лишь заметим, что для того, чтобы получить некоторые из современных возможностей в IE8,9 – вместо new XMLHttpRequest() нужно использовать new XDomainRequest .

Теперь в IE8,9 поддерживаются события onload , onerror и onprogress . Это именно для IE8,9. Для IE10 обычный XMLHttpRequest уже является полноценным.

IE9- и кеширование

Обычно ответы на запросы XMLHttpRequest кешируются, как и обычные страницы.

Но IE9- по умолчанию кеширует все ответы, не снабжённые антикеш-заголовком. Другие браузеры этого не делают. Чтобы этого избежать, сервер должен добавить в ответ соответствующие антикеш-заголовки, например Cache-Control: no-cache .

Впрочем, использовать заголовки типа Expires , Last-Modified и Cache-Control рекомендуется в любом случае, чтобы дать понять браузеру (не обязательно IE), что ему следует делать.

Альтернативный вариант – добавить в URL запроса случайный параметр, предотвращающий кеширование.

Например, вместо xhr.open(‘GET’, ‘service’, false) написать:

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