Post запрос возвращает страницу обработчика. JavaScript - Асинхронные AJAX запросы на примерах

Осуществляет запрос к серверу методом POST, без перезагрузки страницы. Функция имеет несколько необязательных параметров.

url — url-адрес, по которому будет отправлен запрос.
data — данные, которые будут отправлены на сервер. Они должны быть представлены в форме объекта, в формате: {fName1:value1, fName2:value2, ...} .
callback(data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.

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

Простейший ajax-запрос: отправим пустой запрос к серверу и не будем обрабатывать ответ. Это может быть использовано, например для подсчета количества наведений курсора на баннер (при каждом наведении серверу будет отправляться сигнал).

$.post ("/plusOne.php" ) ;

Рассмотрим более сложное взаимодействие с сервером. Отправим данные на сервер и обработаем их. Javascript будет выглядеть следующим образом:

// На сервер будет отправлен запрос страницы http://hostname/ajaxtest.php и указаны два параметра. // После получения ответа от сервера будет вызвана функция onAjaxSuccess, которая выведет // на экран сообщение с данными, присланными сервером. $.post ( "/ajaxtest.php" , { param1: "param1" , param2: 2 } , onAjaxSuccess ) ; function onAjaxSuccess(data) { // Здесь мы получаем данные, отправленные сервером и выводим их на экран. alert (data) ; }

На сервере, обработка Ajax запроса ничем не отличается от обработки обычного запроса:

В результате этого запроса, на странице появится табличка с текстом "I get param1 = param1 and param2 = 2"

Продвинутое использование

$.post() является сокращенным вариантом функции $.ajax() , вызванной со следующими параметрами:

$.ajax ({ url: url, type: "POST" , data: data, success: success, dataType: dataType } ) ;

Подробности использования параметра dataType можно найти в описании $.ajax() .

Замечание: большинство браузеров не позволяют проводить ajax-запросы на ресурсы с доменами, поддоменами и протоколами, отличными от текущего. Однако, это ограничение не распространяется на запросы типа jsonp и script .

Обработка выполнения запроса

Стандартным средством обработки успешного выполнения запроса, является указание собственной функции в параметре success. При вызове она получает данные переданные сервером, текстовый статус выполнения запроса, а так же Объект jqXHR .

Начиная с jQuery-1.5, метод $.post() возвращает объект jqXHR, который помимо прочего реализует интерфейс deferred , что позволяет задавать дополнительные обработчики выполнения. Помимо стандартных для объекта deferred методов .done(), .fail() и.then() , с помощью которых можно устанавливать обработчики, в jqXHR реализованы.success(), .error() и.complete() . Это сделано для соответствия привычным названиям методов, с помощью которых устанавливаются обработчики выполнения ajax-запросов. Однако начиная с jQuery-1.8 эти три метода станут нежелательными для использования .

// Запустим ajax-запрос, установим обработчики его выполнения и // сохраним объект jqxhr данного запроса для дальнейшего использования. var jqxhr = $.post ("example.php" ) .success (function () { alert ("Успешное выполнение" ) ; } ) .error (function () { alert ("Ошибка выполнения" ) ; } ) .complete (function () { alert ("Завершение выполнения" ) ; } ) ; // какой-либо код... // установим еще один обработчик удачного выполнения запроса jqxhr.complete (function () { alert ("Успешное выполнения 2" ) ; } ) ;

Урок, в котором на примерах рассмотрим создание простых асинхронных AJAX запросов к серверу. В качестве метода передачи запросов будем использовать как метод GET, так и метод POST. На сервере обработку запросов выполним с помощью скриптов PHP.

Что такое асинхронный запрос AJAX?

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

При отправке асинхронного запроса, браузер (страница) не "замораживается", т.е. с ней, как и прежде, можно работать. Но тогда как узнать, когда придёт ответ с сервера. Чтобы это определить, необходимо отслеживать свойство браузера readyState (состояние готовности). Данное свойство содержит число, по значению которого можно судить о том, в какой стадии находится запрос. В следующей таблице приведены основные значения свойства readyState и соответствующие им состояния.

Т.е. получается, что нам необходимо отследить, когда значение у свойства readyState будет равно 4. Это будет означать то, что на отправленный запрос, пришёл ответ с сервера. Остальные значения на практике используются довольно редко, и некоторые браузеры могут их не поддерживать.

Для того чтобы определить на какой стадии находится запрос, необходимо использовать событие объекта XMLHttpRequest onreadystatechange . Данное событие происходит каждый раз, когда изменяется значение свойства readyState . Следовательно, в обработчике этого события (неименованной или именованной функции) можно прописать действия, которые будут проверять равно ли данное свойство 4 и если равно, то например, вывести ответ сервера на страницу.

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

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

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

welcome.html – HTML-страница, которая будет отображаться пользователю. В этой же страницы поместим скрипт, который будет осуществлять все необходимые действия для работы AJAX на стороне клиента.

processing.php – PHP-файл, который будет обрабатывать запрос на стороне сервера, и формировать ответ. Начнём разработку с создания основной структуры файла welcome.html

Пример работы AJAX Пример работы AJAX // Здесь поместим код JavaScript, который будет отправлять запрос на сервер, получать его и обновлять содержимое страницы. Всё это будет работать без перезагрузки страницы

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

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

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

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

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

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

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

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

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

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

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

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

// 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();

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

Пример работы AJAX Пример работы AJAX 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(); });

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

Получим данные. Если данные посланы через метод GET , то из глобального массива $_GET["имя"] . А если данные переданы с помощью метода POST , то из глобального массива $_POST["имя"] .

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

В приведенном выше коде мы получаем адрес студента с помощью порядкового номера и его имени.

Для данного примера вам понадобится создать базу данных school и таблицу students . Таблица student содержит поля с именами, порядковым номером и адресом.

Надеюсь, эта статья будет вам полезна.

Метод post() , как правило, предназначен для отправки данных на сервер (например из формы).

К контексте метода post стоит упомянуть о json - текстовый формат, основанный на javascript. Может использоваться практически любым языком программирования.

jQuery, Ajax запрос методом POST jQuery.post(url,,,)

• Первый аргумент(url) – это url-адрес документа, куда отправляется запрос;
• Второй аргумент(data) – это данные, отсылаемые на сервер, как правило, представленные в виде объекта js;
• Третий аргумент(callback(data, textStatus, jqXHR)) – это ф-я, вызываемая после ответа сервера. В качестве аргументов данная функция принимает данные отправленные сервером в ответ на запрос и статус того, как был выполнен запрос.

json_decode() и json_encode()

В языке PHP (от 5.2), поддержка JSON включена в ядро в виде функций json_decode() (декодирует JSON строку) и json_encode() , которые сами преобразуют типы данных JSON в соответствующие типы PHP и наоборот.

Результат {"a":1,"b":2,"c":3,"d":4,"e":5} PHP пример работы функции json_decode $json = "{"a":1,"b":2}"; var_dump(json_decode($json, true)); $arr = json_decode($json, true); echo "
".$arr["a"]. "
".$arr["b"]. "
"; Результат array(5) { ["a"] => int(1) ["b"] => int(2) } 1 2 Пример работы Ajax запроса методом POST

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

jQuery $(document).ready(function(){ var working = false; /* Данный флаг предотвращает отправку нескольких комментариев: */ $("form").submit(function(e){ e.preventDefault(); if(working) return false; working = true; $("#submit").val("Подождите.."); $(".error").removeClass("error"); $.post("submit.php",$(this).serialize(),function(msg){ /* Отправляем значения формы в submit.php: */ working = false; $("#submit").val("Отправить"); if(msg.status) // Если данные корректны, добавляем сообщение { console.log(msg.status); $(msg.html).hide().insertBefore("form").slideDown(); } else { // Если есть ошибки, проходим циклом по объекту // msg.errors и выводим их на страницу $.each(msg.errors,function(k,v){ $("#"+k).addClass("error"); //alert(k); }); } },"json"); }); }); HTML Введите число Введите email PHP // принимаем данные пришедшие посредством ajax $arr = $_POST; $arr = $_POST; if(filter_var($arr, FILTER_VALIDATE_EMAIL) && filter_var($arr, FILTER_VALIDATE_INT)) { echo json_encode(array("status"=>1,"html"=>"Спасибо, ваши данные точны")); // информация возвращаемая сервером } else { if(filter_var($arr, FILTER_VALIDATE_EMAIL) == false) { $errors["email"] = "Пожалуйста, введите имя."; } if(filter_var($arr, FILTER_VALIDATE_INT) == false) { $errors["intt"] = "Пожалуйста, введите имя."; } $arr = $errors; /* Вывод сообщений об ошибке */ echo "{"status":0,"errors":".json_encode($arr)."}"; }

Когда я начинал использовать JavaScript и JQuery, то был разочарован отсутствием простых примеров использования Ajax в jQuery.

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

Пример запроса GET, отправленного с помощью jQuery и Ajax:

$.ajax({ type: "GET", url: "test.php", success: function(data){ alert(data); } });

В примере кода передаются три параметра:

• type : тип HTTP запроса. В этом примере я отправляю запрос GET. Если вы хотите отправить запрос POST, измените “GET” на “POST”.
• url : адрес,на который вы хотите отправить Ajax запрос. В нашем случае это страница “test.php”. Помните, что URL-адрес указывается относительно текущей страницы.
• success : функция, которая вызывается, если запрос был успешным. Она принимает параметр data, который будет содержать вывод страницы test.php. То есть, если test.php выводит строку “OK”, то параметр data будет содержать строку “OK”.

Поэкспериментируйте с приведённым выше кодом. Например, замените“GET” на “POST” и измените URL-адрес. Можно использовать инструменты разработчика, встроенные в Firefox / Chrome для отладки Ajax- запросов. Они доступны на вкладке «Сеть». Инструменты разработчика позволяют визуализировать запрос.

Что если мы захотим добавить параметры запроса GET к Ajax-запросу?

$.ajax({ type: "GET", url: "test.php", data: {name:"Wayne"}, success: function(data){ alert(data); } });

Я добавил новый параметр data. Это объект JavaScript, содержащий данные, которые передаем в запросе. Поскольку мы отправляем запрос GET, эти параметры будут автоматически добавлены к строке запроса: test.php?name=Wayne

Пример добавления нескольких параметров GET:

$.ajax({ type: "GET", url: "test.php", data: {name: "Wayne", age: 27, country: "Ireland"}, success: function(data){ alert(data); } });

Приведенный выше код отправит запрос GET к test.php?name=Wayne&age=27&country=Ireland

Поэкспериментируйте с кодом, чтобы разобраться в нём. Попробуйте добавлять и удалять параметры, чтобы понять, как отправлять данные с помощью jQuery и Ajax.

А если мы хотим отправить запрос POST к файлу submission.php ?

$.ajax({ type: "POST", url: "submission.php", data: {name:"Wayne", age: 27}, success: function(data){ alert(data); } });

Я изменил тип метода (с GET на POST) и URL-адрес (на submission.php). В этом примере параметры name и age будут отправлены как переменные POST. Это означает, что на странице submission.php их можно получить с помощью следующего кода:

$name = $_POST["name"]; $age = $_POST["age"];

Если использовать запрос GET, то переменные будут отправлены через строку запроса. Обратиться к ним можно следующим образом:

$name = $_GET["name"]; $age = $_GET["age"];

Последней частью паззла является функция success() . Она вызывается, если Ajax-запрос завершается успешно. В примере, приведенном выше, я вывожу результат в сообщении. Но в большинстве случаев вы будете использовать эту функцию для отображения уведомлений на странице. Например, если пользователь отправляет форму с помощью Ajax, тогда эта функция применяется для проверки ответа. А также для вывода сообщения о том, что данные формы успешно отправлены на сервер.

Надеюсь, эта статья помогла вам разобраться с основами Ajax-запросов!

Данная публикация представляет собой перевод статьи «Simple Ajax request example with JQuery and PHP » , подготовленной дружной командой проекта

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