Приветствую всех читателей roothelp.ru! Прочитав этот урок, вы научитесь при помощи JQuery отправлять AJAX-запросы на сервер, обрабатывать их и возвращать ответ. При написании урока я использовал локальный компьютер с операционной системой Windows 7, Denwer с версией PHP 5.3.13, библиотеку JQuery версии 2.1.4, текстовый редактор Notepad++ и браузер Chrome версии 43.0.2357.132. Приступим.
Для начала я создаю папку ajax, в которой буду размещать все файлы проекта. Внутри нее еще две папки: js и php. В папку js сразу помещаю jquery-2.1.4.min.js, взятый с официального сайта библиотеки. Затем открываю Notepad++, создаю четыре новых файла (при этом сразу выбираю в меню «Кодировки» пункт «Кодировать в UTF-8 (без BOM)» для избежания проблем с кириллицей) и затем сохраняю их с помощью «Файл → Сохранить как». Файлы .htaccess и index.php сохраняю в папку ajax (корень проекта), файл request.js в папку js, а answer.php в папку php. Базовая структура готова.
В файл .htaccess помещаю всего одну настройку
AddDefaultCharset utf-8
Для поддержки кириллицы.
Файл index.php так же максимально прост: в нем будет одно поле ввода, кнопка отправки и блок, в который будет выводиться полученный от сервера ответ.
<!DOCTYPE html>
<html>
<head>
<title>JQuery AJAX</title>
<script type='text/javascript' src='js/jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='js/request.js'></script>
</head>
<body>
<input type = "text" id = "message" value = "Привет, сервер!">
<button onclick = "sendMessage();">Отправить</button>
<div id = "fieldForAnswer">После отправки запроса и получения ответа этот текст изменится</div>
</body>
</html>
В разделе <head> подключаю библиотеку JQuery и файл request.js, в котором буду писать свой js-код. Элементам в разделе <body> задаю id, чтобы было легко получить к ним доступ стандартными средствами js.
Кнопке задаю событие onclick = "sendMessage();", чтобы при щелчке на нее вызывалась функция sendMessage, в которой я впоследствии напишу код отправки сообщения, заданного в поле ввода.
Настало время взяться за javascript. В файл request.js помещаю следующий код:
//функция отправки асинхронного запроса на сервер
function sendMessage()
{
var userMessage = document.getElementById("message").value;
var objMessage = {
msg : userMessage,
len : userMessage.length
}
var jsonMessage = JSON.stringify(objMessage);
$.ajax({
url : 'php/answer.php',
type: 'POST',
data: 'message=' + jsonMessage,
success: showAnswer
});
}
Здесь я описываю функцию sendMessage(), которая будет заниматься отправкой сообщения, введенного в поле ввода, на сервер. В четвертой строчке я создаю переменную userMessage и помещаю в нее текст из поля ввода.
Сейчас необходимо рассказать немного теории. Асинхронные запросы передаются от клиента к серверу и обратно в формате JSON. Если вкратце, то это обычная текстовая строка, имеющая вид {“ключ1”:”значение1”,”ключ2”:”значение2”}, причем «значением» тоже могут быть строки такого же вида.
В пятой строчке я создаю объект — этот тип данных отлично подходит для последующего преобразования в формат JSON. В объекте два свойства: msg (содержит сообщение из поля ввода) и len (содержит длину этого сообщения в символах). Здесь я специально задал свойства в двух вариантах: для msg указал значение через заранее созданную переменную userMessage, а значение len вычислил на ходу. Оба способа допустимы, но второй лучше применять, когда код, вычисляющий значение, очень короткий, иначе будет выглядеть некрасиво и громоздко.
Затем я в 11 строчке средствами javascript преобразую этот объект в формат JSON. Теперь объект принял нужную форму, в которой его можно передать на сервер.
Для передачи сообщения на сервер я воспользовался функцией ajax из библиотеки JQuery. Здесь использован минимальный синтаксис, необходимый для отправки запроса и получения ответа. Расскажу подробнее об указанных параметрах.
url — адрес страницы, на которую будет отправлен запрос. Путь вычисляется относительно расположения файла, из которого вызывается функция. В моем случае она вызывается из файла index.php, лежащего в корне, поэтому путь php/answer.php.
type — тип запроса. POST, GET. С помощью POST можно передать больше данных и поэтому (хотя в данном примере данных мало) я использовал его.
data — имя, по которому переданные данные будут доступны на сервере в массиве $_POST (при условии использования type: 'POST') и сами данные, приклеиваемые к имени с помощью конкатенации (+). Здесь важно не ставить пробелов вокруг знака присваивания.
success — имя функции, которая будет обрабатывать ответ от сервера в случае успешного обмена. После имени ставить круглые скобки не нужно.
Перехожу к серверной части. Содержимое файла answer.php
<?php
$jsonRequest = $_POST['message'];
$objRequest = json_decode($jsonRequest);
$objRequest->len *= 2;
$objAnswer = array(
'text' => "Привет, клиент! Это ответ на твое сообщение: $objRequest->msg.
Я увеличил его длину до $objRequest->len символов)",
'ps' => 'Пиши еще!'
);
$jsonAnswer = json_encode($objAnswer);
echo $jsonAnswer;
Во-первых, сохраняю в переменную $jsonRequest полученные от клиента данные. Они находятся в массиве $_POST, потому что при передаче я использовал именно этот тип запроса (type: 'POST'). Получаю их по ключу message, поскольку я использовал его при формировании запроса (data: 'message=' + jsonMessage). Кстати говоря, ставить закрывающий тег ?> не нужно, если после php-кода не идет html. Это является одним из стандартов написания кода (гуглите про PSR).
Я дал переменной префикс json не просто так. Он напоминает мне, что полученные данные сейчас являются не более чем строкой, которую перед использованием надо расшифровать. Я делаю это с помощью встроенной в PHP функции json_decode, а результат сохраняю в переменную $objRequest. Теперь в ней находится переданное сообщение в виде объекта, и я могу получить доступ к его полям, используя конструкцию $objRequest->имяПоля. Имена полей такие же, как я задал их в js-коде. Напомню тот фрагмент:
var objMessage = {
msg : userMessage,
len : userMessage.length
}
Итак, сообщение получено, расшифровано, обработано (в 6 строке я умножил длину сообщения на 2) и пришло время отправить ответ клиенту. Отправлять его нужно тоже в формате JSON. В PHP для формирования JSON-строки удобнее всего использовать ассоциативный массив. Я создаю такой массив и называю его $objAnswer. Несмотря на то, что JSON использует кавычки, я вполне могу использовать апострофы при задании ключей и значений в ассоциативном массиве. Так я поступаю с ключом ps. Однако для формирования значения ключа text я использую кавычки для избежания нагромождения операций конкатенации. Благодаря кавычкам выражение $objRequest->msg воспринимается не как обычная строка, а именно как выражение, значение которого нужно вычислить (подробнее об отличиях между кавычками и апострофами читайте в других статьях).
Когда массив готов, я преобразую его в формат JSON с помощью встроенной функции json_encode и помещаю в переменную $jsonAnswer. Ставить префикс json не обязательно, но это помогает мне ориентироваться: видя переменную, я сразу понимаю, значение какого типа в ней должно находиться.
Последней моей операцией на сервере будет отправка сообщения командой echo. Вам может быть немного непривычно видеть эту команду в такой роли, поскольку раньше вы наверняка использовали ее только для вывода чего-либо на экран. Но просто представьте, что стоите в лесу и кричите. Лес вокруг не меняется (страница у клиента не перезагружается), а ответ из глубин на ваши крики (эхо) все время разный.
Все отлично. Проект почти завершен, осталось только принять ответ сервера и обработать. Для этого в файл с моим js-кодом я добавляю последнюю функцию.
//функция получения ответа от сервера
function showAnswer(response)
{
var objAnswer = JSON.parse(response);
var answer = objAnswer.text;
document.getElementById("fieldForAnswer").innerText = answer + objAnswer.ps;
alert(answer + objAnswer.ps);
}
Первый ее параметр содержит ответ сервера. Имя этому параметру можно дать любое. Ответ приходит уже в привычном формате JSON, который перед использованием нужно расшифровать. Для этого я использую функцию parse стандартного объекта javascript JSON.
Теперь, когда ответ из строки превратился в обычный объект, я могу с ним работать — присваивать его поля переменным, использовать их в выражениях и так далее. В данном случае я помещаю ответ в один из div страницы и показываю его во всплывающем сообщении.
Вот и все. Данный пример весьма полно и при этом в максимально краткой форме показывает работу с асинхронными запросами через JQuery. В нем я рассказал о некоторых тонких моментах, вроде важности отсутствия пробелов и круглых скобок при формировании запроса и так далее. Напоследок хотелось бы добавить, что при использовании браузера IE8 вторая версия библиотеки JQuery работать не будет и вместо нее нужно скачать последнюю редакцию первой версии. Проблем с кодировкой можно избежать, если при создании файла сразу указывать UTF-8 без BOM.
На этом все. Заходите на roothelp.ru, читайте уроки и набирайтесь знаний. До новых встреч!