Введение в ajax для фронтенд-разработчиков

Объект 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 (как правило, для получения дополнительной информации об ответе сервера), то обычно делаю это через параметры обработчика событий, о которых мы поговорим далее. Они предоставляют мне информацию о состоянии запроса, что избавляет от необходимости выяснять его.

Как работает AJAX

Чтобы получить представление о том, как работает AJAX, взгляните на следующую визуализацию:

Эта визуализация описывает типичный сценарий, управляемый AJAX:

Пользователь хочет увидеть больше статей, поэтому он или она нажимает на кнопку назначения. Это событие делает вызов AJAX.
Запрос отправляется на сервер. Наряду с запросом могут быть переданы разные данные. Запрос может указывать на статический файл (например, ) который находится на сервере. В качестве альтернативы, можно выполнить динамический скрипт (например, ) после чего сценарий обращается к базе данных (или другой системе) для извлечения данных.
База данных отправляет запрошенные статьи на сервер. Затем сервер отправляет их браузеру.
JavaScript анализирует ответ и обновляет определенные части DOM (структуру страницы). Здесь, например, обновляется только боковая панель. Остальные части страницы не меняются.

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

PHP файл

Страница на сервере, вызываемая JavaScript выше, является PHP файлом с именем «getcd.php».

PHP скрипт загружает XML документ, «cd_catalog.xml»,
выполняет запрос к XML файлу и возвращает результат в формате HTML:

<?php
$q=$_GET;
$xmlDoc = new DOMDocument();
$xmlDoc->load(«cd_catalog.xml»);
$x=$xmlDoc->getElementsByTagName(‘ARTIST’);
for ($i=0; $i<=$x->length-1; $i++)
{

//Обрабатывать только узлы элементов

if ($x->item($i)->nodeType==1) {

  if ($x->item($i)->childNodes->item(0)->nodeValue == $q) {

    $y=($x->item($i)->parentNode);
    }
  }
}
$cd=($y->childNodes);
for ($i=0;$i<$cd->length;$i++)
{

//Обрабатывать только узлы элементов

if ($cd->item($i)->nodeType==1) {

echo(«<b>» . $cd->item($i)->nodeName . «:</b> «);
    echo($cd->item($i)->childNodes->item(0)->nodeValue);

  echo(«<br>»);
  }
}
?>

Когда запрос CD отправляется из JavaScript на страницу PHP, происходит следующее:

PHP создает объект XML DOM
Найти все элементы , соответствующие имени, отправленному из JavaScript
Вывод информации об альбоме (отправить в заполнитель )

Использование вспомогательных методов для работы с конкретными типами данных

Библиотека jQuery предоставляет три вспомогательных метода, которые делают работу с некоторыми типами данных более удобной. Некоторые из них мы рассмотрим далее.

Получение HTML-фрагментов

Метод load() предназначен для получения только HTML-данных, что позволяет совместить запрос HTML-фрагмента, обработку ответа от сервера для создания набора элементов и вставку этих элементов в документ в одном действии. Пример использования метода load() представлен ниже:

В этом сценарии мы вызываем метод load() для элемента, в который хотим вставить новые элементы, и передаем ему URL-адрес в качестве аргумента. Если запрос завершается успешно, а полученный от сервера ответ содержит действительный HTML-фрагмент, элементы вставляются в указанное место в документе, как показано на рисунке:

Вы видите, что все элементы из файла flowers.html добавлены в документ, как мы и хотели, но поскольку у них отсутствует атрибут class, то они не укладываются в табличную компоновку страницы, используемую в основном документе. Поэтому метод load() наиболее полезен в тех случаях, когда все элементы могут быть вставлены в одно место в документе без какой-либо дополнительной обработки.

Получение и выполнение сценариев

Метод getScript() загружает файл JavaScript, а затем выполняет содержащиеся в нем инструкции. Чтобы продемонстрировать работу этого метода, я создал файл myscript.js и сохранил его вместе с файлом test.html на своем веб-сервере. Содержимое этого файла представлено в примере ниже:

Эти инструкции генерируют три ряда элементов, описывающих цветы. Мы обошлись здесь без определения шаблонов и использовали циклы для генерации элементов (хотя, вообще говоря, следовало бы воспользоваться шаблонами данных).

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

Здесь мы вызываем метод getScript() для основной функции $() и передаем ему в качестве аргумента URL-адрес файла, который хотим использовать. Если сервер способен предоставить указанный файл и этот файл содержит действительный JavaScript-код, то последний будет выполнен.

Метод getScript() можно использовать для загрузки любых сценариев, но особенно полезно использовать его для загрузки и выполнения таких сценариев, как сценарии для отслеживания статистики посещения сайтов или определения географического местоположения клиента, которые не связаны с поддержкой основной функциональности веб-приложения. Пользователя не особенно заботит, в состоянии ли мы точно определять его местоположение для ведения статистики, тогда как длительное ожидание загрузки и выполнения сценария будет действовать ему на нервы.

Используя метод getScript(), можно быстро получать запрашиваемую информацию, не доставляя пользователям неудобств, вызванных необходимостью ожидания ответа. Уточню свою мысль. Я вовсе не предлагаю вам использовать этот метод для выполнения каких-либо действий скрытно от пользователя и говорю лишь о том, что следует отодвигать на второй план загрузку и выполнение вполне законной функциональности, если она представляет для пользователей меньшую ценность, чем затрачиваемое на ее ожидание время.

В данном примере после запуска Ajax-запроса с помощью метода getScript() из документа удаляется элемент row2, для чего используется метод remove(). Данный элемент используется в файле myscript.js для вставки новых элементов. Эти элементы отбрасываются незаметным для пользователя образом, поскольку в документе селектору #row2 ничто не соответствует. Итоговый результат представлен на рисунке:

Отнеситесь к этому примеру как к одному из образцов надежного дизайна для ситуаций, в которых документ подвергается изменениям. Во всяком случае запомните, что при написании внешних сценариев JavaScript не стоит делать слишком много допущений о состоянии документа.

Получение данных в формате JSON

Для загрузки данных JSON с сервера предназначен метод getJSON(). Возможно, это наименее полезный из всех трех вспомогательных методов, поскольку он не делает с данными ничего сверх того, что делает базовый метод get().

Получаем данные с сервера

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

AJAX запрос — асинхронный, что означет его выполнение в фоновом режиме, когда остальной код JavaScript продолжает действовать. Как же в таком случае получать ответ от сервера, когда завершится запрос?

Вам нужно написать возвратную функцию, которая будет автоматически выполняться по завершению запроса AJAX и отправке ответа сервером. Как минимум, ваша функция должна принимать данные, возвращаемые сервером, как свой первый аргумент:

function myCallback( returnedData ) {
  // Делаем обработку данных returnedData
}

Как только возвратная функция создана, вы можете передать ее в качестве третьего аргумента в метод :

var data = { city: "rome", date: "20120318" };
$.get( "http://example.com/getForecast.php", data, myCallback );

Что такое AJAX?

AJAX означает «Асинхронный Javascript и XML». Это не одна, и не новая технология. Фактически, это группа существующих технологий (HTML, CSS, Javascript, XML и т. д.), Которые собираются вместе для создания современных веб-приложений.

С AJAX клиент (то есть браузер) общается с веб-сервером и запрашивает данные. Затем он обрабатывает ответ сервера и вносит изменения в страницу без полной его перезагрузки.

Давайте разберем акроним AJAX:

«Асинхронный» означает, что когда клиент запрашивает данные с веб-сервера, он не останавливается до тех пор, пока сервер не ответит. Наоборот, пользователь может перемещаться по страницам. Как только сервер возвращает ответ, соответствующая функция манипулирует возвращаемыми данными за кулисами.
«Javascript» — это язык, который создает экземпляр запроса AJAX, анализирует соответствующий ответ AJAX и, наконец, обновляет DOM.
Клиент использует XMLHttpRequest или XHR API для отправки запроса на сервер. Подумайте об API (Application Programming Interface) как о наборе методов, которые определяют правила коммуникации между двумя заинтересованными сторонами. Однако учтите, что входящие данные из запроса AJAX могут быть в любом формате, а не только в формате .

Ограничения запросов AJAX

Прежде чем мы начнем использовать AJAX, важно понять его ограничения. В частности, мы упомянем две общие проблемы

Во-первых, рассмотрим следующую ошибку, которая появляется в консоли Chrome:

Эта ошибка возникает, когда наш запрос указывает на локальный файл. Здесь мы попытались получить доступ к данным, хранящимся в локальном файле (то есть ), а не на сервере. Чтобы преодолеть эту проблему, мы можем установить локальный сервер (например, настроить XAMPP в качестве локальной среды разработки) и сохранить в нем целевой файл.

Во-вторых, посмотрите следующее сообщение об ошибке:

Это происходит, когда мы запрашиваем данные, расположенные в другом домене относительно нашей страницы (называемые ограничениями политики для тех же источников). Здесь, например, данные хранятся на локальном сервере, а страница хранится на сервере Codepen. К счастью, есть решения этого ограничения.

Одним из решений является использование механизма CORS (Cross-Origin Resource Sharing), предложенного W3C

Обратите внимание, что этот механизм требует внесения некоторых изменений в конфигурационные файлы нашего сервера. Например, на этой странице описывается, как мы можем настроить веб-сервер Apache

Другой вариант — использовать технику JSONP (JSON with Padding).

Некоторые дополнительные особенности

Использование технологии AJAX подразумевает некоторые дополнительные особенности, которые нужно учитывать при разработке нового сайта и при обновлении архитектуры уже существующего. К ним можно отнести следующие:

1. ЧПУ-адреса страниц. В стандартном виде, как было описано в примере выше, адреса страниц все равно получаются не очень красивыми, хоть Googleи называет их prettyURL. То есть, в них все равно будут присутствовать символы #!. Однако эту проблему можно обойти, присвоив стандартные статические ЧПУ (человекопонятные URL-адреса) страницам, использующим AJAX. Единственное, что нужно учесть: при этом способ имплементации «html-слепка» будет отличаться.

Для страницы вида:

http://www.example.com/stranica

«html-слепок» должен находиться по адресу:

http://www.example.comstranica?_escaped_fragment_=

Т.е. значение параметра будет пустым, но в код самой страницы (в теге <head>) необходимо добавить строку:

В «html-слепке» данного тега быть недолжно, иначе он не проиндексируется.

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

2. Формирование файла Sitemap.xml. Поисковая система Yandex в своем руководстве «Помощь Вебмастеру» говорит следующее: «Ссылки, содержащие #!, также можно использовать в карте сайта», подразумевая, что можно использовать и ссылки на «html-слепки», т.е., содержащие ?_escaped_fragment_=. В то же время Google в явном виде говорит о том, что нужно использовать ссылки только с дополнением #!:

«Подводные камни» при использовании AJAX

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

К ним можно отнести следующие:

Непрогнозируемые последствия для ранжирования. Если нужно, например, для тысячи однотипных товаров поменять URL-адреса, организовав их вывод посредством AJAX, то даже при настройке постраничных 301 редиректов, ресурс может сильно «качнуть» в поисковой выдаче. Вероятность таких последствий непрогнозируемая, так как планируемые изменения не идут в разрез с требованиями поисковых систем. Но на примере ряда сайтов, можно утверждать, что проблемы вполне вероятны. В данном случае можно рекомендовать только постепенное внедрение, разбитое на несколько итераций.
Неясный механизм расчета скорости загрузки страницы. Данный параметр является косвенным фактором ранжирования сайта поисковыми системами, однако его влияние достаточно велико. В случае с AJAX-страницами не ясно, на основании загрузки какой из версий производится расчет скорости загрузки – версии для пользователей или html-версии для поискового робота, а значит, на данный параметр сложнее повлиять. Единственной рекомендацией тут может быть следующая: делать максимально быстрыми обе версии.

Как устроен AJAX

Основа AJAX — объект XMLHttpRequest, который и отвечает за все запросы. Раньше его поддерживали не все браузеры, поэтому нужно было подключить отдельно библиотеку jQuery, в которой этот объект есть. Сейчас почти все браузеры научились поддерживать этот объект напрямую.

Вся магия асинхронных запросов AJAX основана на работе с DOM-объектами страницы в браузере:

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

Простые Ajax-запросы

Создавать запросы с помощью низкоуровневого API не намного сложнее, чем с помощью прямых или вспомогательных методов. Разница состоит в том, что такой подход позволяет контролировать многие другие аспекты запроса и получать о выполняющемся запросе гораздо больше информации. Центральное место в низкоуровневом API занимает метод ajax(), простой пример использования которого приведен ниже (здесь используется исходный файл и файл mydata.json, описанные в предыдущей статье):

Аргументами метода ajax() являются запрашиваемый URL и объект отображения данных, свойства которого определяют набор пар «ключ-значение», каждая из которых определяет некий параметр запроса. Здесь передаваемый методу ajax() объект содержит только один параметр, success, задающий функцию, которая будет вызываться в случае успешного выполнения запроса.

В данном примере мы запрашиваем у сервера файл mydata.json и используем его вместе с шаблоном данных для создания элементов и вставки их в документ, как это делалось в предыдущей статье с помощью прямых методов. По умолчанию метод ajax() создает HTTP-запрос GET, т.е. данный пример эквивалентен использованию методов get() и getJSON().

GET и POST-запросы. Кодировка.

Во время обычного submit’а формы браузер сам кодирует значения полей и составляет тело GET/POST-запроса для посылки на сервер. При работе через XmlHttpRequest, это нужно делать самим, в javascript-коде. Большинство проблем и вопросов здесь связано с непониманием, где и какое кодирование нужно осуществлять.

Вначале рассмотрим общее кодирование запросов, ниже – правильную работу с русским языком для windows-1251.

Существуют два вида кодирования HTTP-запроса. Основной – urlencoded, он же – стандартное кодирование URL. Пробел представляется как %20, русские буквы и большинство спецсимволов кодируются, английские буквы и дефис оставляются как есть.

Способ, которым следует кодировать данные формы при submit’е, задается в ее HTML-таге:

<form method="get"> // метод GET с кодировкой по умолчанию
<form method="post" enctype="application/x-www-form-urlencoded"> // enctype явно задает кодировку
<form method="post"> // метод POST с кодировкой по умолчанию (urlencoded, как и предыдущая форма)

Если форма submit’ится обычным образом, то браузер сам кодирует (urlencode) название и значение каждого поля данных ( и т.п.) и отсылает форму на сервер в закодированном виде.

Формируя XmlHttpRequest, мы должны формировать запрос «руками», кодируя поля функцией .

Конечно, пропускать через encodeURIComponent стоит только те переменные, в которых могут быть спецсимволы или не английские буквы, т.е которые и будут как раз закодированы.

Например, для посылки GET-запроса с произвольными параметрами name и surname, их необходимо закодировать вот так:

// Пример с GET
...
var params = 'name=' + encodeURIComponent(name) + '&surname=' + encodeURIComponent(surname)
xmlhttp.open("GET", '/script.html?'+params, true)
...
xmlhttp.send(null)

В методе POST параметры передаются не в URL, а в теле, посылаемом через . Поэтому нужно указывать не в адресе, а при вызове

Кроме того, при POST обязателен заголовок Content-Type, содержащий кодировку. Это указание для сервера – как обрабатывать (раскодировать) пришедший запрос.

// Пример с POST
...
var params = 'name=' + encodeURIComponent(name) + '&surname=' + encodeURIComponent(surname)
xmlhttp.open("POST", '/script.html', true)
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
...
xmlhttp.send(params)

Заголовки Content-Length, Connection в POST-запросах, хотя их и содержат некоторые «руководства», обычно не нужны. Используйте их, только если Вы действительно знаете, что делаете.

Запросы multipart/form-data

Второй способ кодирования – это отсутствие кодирования. Например, кодировать не нужно для пересылки файлов. Он указывается в форме (только для POST) так:

<form method="post" enctype="multipart/form-data">

В этом случае при отправке данных на сервер ничего не кодируется. А сервер, со своей стороны, посмотрев на Content-Type(=multipart/form-data), поймет, что пришло.

Возможности XmlHttpRequest позволяют создать запрос с любым телом. Например, можно вручную сделать POST-запрос, загружающий на сервер файл. Функционал создания
таких запросов есть, в частности, во фреймворке . Но можно реализовать его и самому, прочитав о нужном формате тела POST и заголовках.

Кодировка (языковая)

Если Вы используете только UTF-8 – пропустите эту секцию.

Все идущие на сервер параметры GET/POST, кроме случая multipart/form-data, кодируются в UTF-8. Не в кодировке страницы, а именно в UTF-8. Поэтому, например, в PHP их нужно при необходимости перекодировать функцией iconv.

<?php
// ajax.php
$name = iconv('UTF8','CP1251',$_GET);
?>

С другой стороны, ответ с сервера браузер воспринимает именно в той кодировке, которая указана в заголовке ответа Content-Type. Т.е, опять же, в PHP, чтобы браузер воспринял ответ в windows-1251 и нормально отобразил данные на странице в windows-1251,
нужно послать заголовок с кодировкой в php-коде, например так:

<?php
// ajax.php
header('Content-Type: text/plain; charset=utf-8');
?>

Или же, такой заголовок должен добавить сервер. Например, в apache автоматически добавляется кодировка опцией:

# в конфиге апача
AddDefaultCharset windows-1251

Объект XMLHttpRequest

Объект XMLHttpRequest (или, сокращенно, XHR) дает возможность браузеру делать HTTP-запросы к серверу без перезагрузки страницы.

Несмотря на слово XML в названии, XMLHttpRequest может работать с данными в любом текстовом формате, и даже c бинарными данными. Использовать его очень просто.

Кроссбраузерное создание объекта запроса

В зависимости от браузера, код для создания объекта может быть разный.
Кроссбраузерная функция создания XMLHttpRequest:

function getXmlHttp(){
  var xmlhttp;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

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

Технологии

Стандартная модель веб-приложения по сравнению с приложением, использующим Ajax

Термин Ajax стал обозначать широкую группу веб-технологий, которые можно использовать для реализации веб-приложения, которое взаимодействует с сервером в фоновом режиме, не влияя на текущее состояние страницы. В статье, в которой был введен термин Ajax, Джесси Джеймс Гарретт объяснил, что в него включены следующие технологии:

HTML (или XHTML ) и CSS для презентации
Объектная модель документа (DOM) для динамического отображения и взаимодействия с данными
JSON или XML для обмена данными и XSLT для обработки XML
Объект XMLHttpRequest для асинхронной связи
JavaScript для объединения этих технологий

Однако с тех пор произошел ряд изменений в технологиях, используемых в приложении Ajax, и в определении самого термина Ajax. XML больше не требуется для обмена данными и, следовательно, XSLT больше не требуется для манипулирования данными. Нотация объектов JavaScript (JSON) часто используется в качестве альтернативного формата для обмена данными, хотя также могут использоваться другие форматы, такие как предварительно отформатированный HTML или простой текст. Множество популярных библиотек JavaScript, включая JQuery, включают абстракции, помогающие выполнять запросы Ajax.

Делаем запрос GET с помощью $.get()

Метод jQuery предоставляет легкий и удобный способ сделать простой запрос AJAX. Он выполняет запрос с помощью метода HTTP GET (используется для получения URL, например страниц и изображений), вместо метода POST (который традиционно используется для отправки данных формы).

В простейшей форме можно вызвать метод так:

$.get( url );

…где является адресом URL ресурса, от которого ожидается ответ. Обычно это скрипт на стороне сервера, который выполняет какие-нибудь действия и может возвращать некие данные:

$.get( "http://example.com/getForecast.php" );

…хотя можно также запросить статический документ:

$.get( "http://example.com/mypage.html" );

При запросе URL, вы можете отправить данные с запросом. Вы можете передать данные в строке запроса, так же как и при обычном запросе GET:

$.get( "http://example.com/getForecast.php?city=rome&date=20120318" );

Корректно будет сделать то же самое передав объект данных в качестве второго параметра методу . Объект данных должен содержать информацию в виде пар имя свойства/значение свойства. Например:

var data = { city: "rome", date: "20120318" };
$.get( "http://example.com/getForecast.php", data );

В качестве альтернативы вы можете передать данные методу как строку:

var data = "city=rome&date=20120318";
$.get( "http://example.com/getForecast.php", data );

Объяснение примера — HTML страницы

Когда пользователь выбирает компакт диск в раскрывающемся списке, выполняется функция .
То функция вызывается в событие :

<html>
<head>
<script>
function showCD(str)
{

if (str==»») {

document.getElementById(«txtHint»).innerHTML=»»;
    return;
}

if (window.XMLHttpRequest) {    // код для IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();
}
else { // код для IE6, IE5

xmlhttp=new ActiveXObject(«Microsoft.XMLHTTP»);
}

xmlhttp.onreadystatechange=function() {

if (this.readyState==4 && this.status==200) {

    document.getElementById(«txtHint»).innerHTML=this.responseText;
    }
}

xmlhttp.open(«GET»,»getcd.php?q=»+str,true);

xmlhttp.send();
}
</script>
</head>
<body>
<form>
Выберите CD:
<select name=»cds» onchange=»showCD(this.value)»>
<option value=»»>Выберите CD:</option>
<option value=»Bob Dylan»>Bob Dylan</option>
<option value=»Bee Gees»>Bee Gees</option>
<option value=»Cat Stevens»>Cat Stevens</option>
</select>
</form><div id=»txtHint»><b>Информация о CD будет указана здесь…</b></div>
</body>
</html>

Функция выполняет следующие действия:

Проверка выбора компакт диска
Создание объекта XMLHttpRequest
Создайте функцию, которая будет выполняться, когда ответ сервера будет готов
Отправить запрос в файл на сервере
Обратите внимание, что параметр (q) добавляется в URL (с содержимым раскрывающегося списка)

Вывод

Сегодня использование AJAX уже не является табу для поисковой оптимизации. Более того, при правильном подходе вы можете использовать данную технологию так же эффективно, как и простой html, но при этом получить ряд дополнительных преимуществ, которые дает AJAX.Основной плюс – это возможность строить более быстрые и удобные пользовательские интерфейсы.

Однако стоит помнить, что SEOшники не зря настороженно относятся к данной технологии. При некорректном использовании, без соблюдения требований поисковых систем, AJAX может привести к плачевным последствиям в виде серьезных потерь органического трафика и в ранжировании. Прежде чем «выкатывать» какую-либо из AJAX-разработок на основной домен, стоит удостовериться в том, сделана ли она в соответствии с одним из двух рассмотренных в статье способов. А также проверить, как поисковые боты «видят» данное изменение, например, при помощи инструмента «Посмотреть как Googlebot».