Уроки AJAX на JQuery
28 июля 2015
2086
ajax, jquery

AJAX на JQuery

Сложность Рубрика Ajax Браузеры
Демонстрация » Скачать »

Приветствую всех читателей 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, читайте уроки и набирайтесь знаний. До новых встреч!





Евгений Лубнин