Jquery ajax параметры. Как я могу получить jQuery для выполнения синхронного, а не асинхронного запроса Ajax? Смысл AJAX - в интеграции технологий

Урок, в котором на простых примерах разберем, как работать с технологией AJAX, а именно познакомимся с тем как с помощью объекта XMLHttpRequest (сокращённо XHR) создавать синхронные HTTP-запросы к серверу и получать от него ответы.

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

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

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

Получение некоторой информации (данных) со страницы или формы (при необходимости)

Отправление запрос на веб-сервер

Получение ответа с веб-сервера

Отображение результатов на странице, если ответ был успешен.

Основы создания синхронных AJAX запросов Пример 1. Выполнение синхронного AJAX запроса

Рассмотрим пример выполнения синхронного AJAX запроса к серверу с помощью метода XMLHttpRequest. В данном примере запросим данные, находящиеся в файле data.txt на сервере и отобразим их на странице в элементе span .

Пример будет состоять из файлов index.html , script.js и data.txt , которые для простоты можно расположить на сервере в одном каталоге.

Начнём разработку с создания HTML-страницы, к которой подключим файл script.js . Этот файл, а точнее его содержимое будет выполнять всю основную работу. Но перед тем как перейти к его разработке, создадим на станице элементы div и span . Элемент div будет играть роль кнопки, при нажатии на которую будет выполняться AJAX запрос. А элемент span будет играть роль контейнера, который будет содержать ответ, пришедший с сервера.

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

JavaScript AJAX #myDiv { height: 30px; width: 100px; background-color: lightgreen; }

Ответ (AJAX):

После этого откроем файл data.txt и введём в него текст "Привет, мир!". Сохраним и закроем файл.

И наконец, перейдём к созданию файла script.js . Содержимое этого файла будет выполнять все основные действия, т.е. отправлять ajax запрос на сервер, принимать от сервера ответ и обновлять содержимое страницы (помещать ответ в элемент span).

Рассмотрим создание данного файла поэтапно:

JavaScript AJAX

Нажмите на светло-зелёный блок и получите ответ с сервера "Пример, мир!".

Ответ (AJAX):

// получить элемент, имеющий id="myDiv" var myDiv = document.getElementById("myDiv"); // подпишемся на событие click этого элемента myDiv.addEventListener("click", function() { // создадим объект XMLHttpRequest var request = new XMLHttpRequest(); //настраиваем запрос: GET - метод, data.txt - URL-адрес по которому будет посылаться запрос, false - синхронный запрос request.open("GET","data.txt",false); // отправляем данные на сервер с помощью метода send request.send(); // если статус ответа 200 (OK) то if (request.status==200) { // выведем в элемент, имеющий id="answer", ответ сервера document.getElementById("answer").innerHTML = request.responseText; } })

Привет, мир!

Пример 2. Обработка синхронного AJAX запроса на сервере с помощью PHP

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

В данном примере страница будет состоять из 3 кнопок. Первая кнопка будет иметь текст 1, вторая кнопка текст 2 и третья кнопка текст 3. При нажатии на любую из кнопок будет выполняться синхронный запрос на сервер. В качестве метода передачи запроса будем использовать GET. А адрес, по которому будем посылать запрос и параметры ajax.php . Получать данные отправленные клиентом на сервере будем с помощью GET-переменной HTTP ($_GET). После этого полученные данные будем обрабатывать на сервере, и возвращать клиенту ответ (строку).

JavaScript AJAX span { font-weight: bold; color: red; }

Нажмите на одну из кнопок и получите ответ с сервера посредством технологии AJAX.

1 2 3

Ответ (AJAX):

// получить все элементы button на странице var buttons = document.getElementsByTagName("button"); // подпишемся на событие click все элементов button for (var i=0; i

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

Для реализации технологии используется метод $.ajax или jQuery.ajax :

$.ajax(свойства) или $.ajax(url [, свойства])

Второй параметр был добавлен в версии 1.5 jQuery.

url - адрес запрашиваемой страницы;

properties - свойства запроса.

Полный список параметров приведен в документации jQuery.

В уроке мы используем несколько наиболее часто используемых параметров.

success (функция) - данная функция вызывается после успешного завершения запроса. Функция получает от 1 до 3 параметров (в зависимости от используемой версии библиотеки). Но первый параметр всегда содержит возвращаемые с сервера данные.

data (объект/строка) - пользовательские данные, которые передаются на запрашиваемую страницу.

dataType (строка) - возможные значения: xml, json, script или html. Описание типа данных, которые ожидаются в ответе сервера.

type (строка) - тип запроса. Возможные значения: GET или POST. По умолчанию: GET.

url (строка) - адрес URL для запроса.

Пример 1

Простая передача текста.

$.ajax({ url: "response.php?action=sample1", success: function(data) { $(".results").html(data); } });

Для ответа имеется элемент div .result .

Ждем ответа

Сервер просто возвращает строку:

Echo "Пример 1 - передача завершилась успешно";

Пример 2

Передаем пользовательские данные PHP скрипту.

$.ajax({ type: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", success: function(data){ $(".results").html(data); } });

Сервер возвращает строку со вставленными в нее переданными данными:

Echo "Пример 2 - передача завершилась успешно. Параметры: name = " . $_POST["name"] . ", nickname= " . $_POST["nickname"];

Пример 3

Передача и выполнение кода JavaScript

$.ajax({ dataType: "script", url: "response.php?action=sample3", })

Сервер выполняет код:

Echo "$(".results").html("Пример 3 - Выполнение JavaScript");";

Пример 4

Используем XML. Пример можно использовать для работы с внешними XML, например, RSS фидом.

$.ajax({ dataType: "xml", url: "response.php?action=sample4", success: function(xmldata){ $(".results").html(""); $(xmldata).find("item").each(function(){ $(" ").html($(this).text()).appendTo(".results"); }); } });

Сервер должен возвращать XML код:

Header ("Content-Type: application/xml; charset=UTF-8"); echo