Руководство по Ajax в JavaScript

Ajax расшифровывается как Asynchronous Javascript And Xml. Ajax — это просто средство загрузки данных с сервера и выборочного обновления частей веб-страницы без перезагрузки всей страницы.

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

Ajax стал настолько популярным, что вы вряд ли найдете приложение, которое в некоторой степени не использует Ajax. Примером некоторых крупномасштабных онлайн-приложений на основе Ajax являются: Gmail, Google Maps, Google Docs, YouTube, Facebook, Flickr и многие другие.

Ajax — это не новая технология, на самом деле Ajax вообще не является технологией. Ajax — это просто термин, обозначающий процесс асинхронного обмена данными с веб-сервера через JavaScript без обновления страницы.

Не смущайтесь букве X (то есть XML) в термине AJAX. Он сохранился в аббревиатуре по историческим причинам. Другой формат обмена данными, такой как JSON, HTML или простой текст, может использоваться вместо XML.

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

Для осуществления Ajax-связи JavaScript использует специальный объект, встроенный в браузер — объект XMLHttpRequest (XHR) — для отправки HTTP-запросов на сервер и получения данных в ответ.

Все современные браузеры (Chrome, Firefox, IE7 +, Safari, Opera) поддерживают объект XMLHttpRequest.

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

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

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

Отправка запроса и получение ответа

Прежде чем выполнить Ajax-связь между клиентом и сервером, первое, что вы должны сделать, — создать экземпляр объекта XMLHttpRequest, как показано ниже:

var request = new XMLHttpRequest();

Теперь следующим шагом при отправке запроса на сервер является создание экземпляра вновь созданного объекта запроса с помощью метода open() объекта XMLHttpRequest.

Метод open() обычно принимает два параметра — метод HTTP-запроса для использования, такой как «GET», «POST» и т. д., и URL-адрес для отправки запроса, например:

request.open("GET", "info.txt"); -Or- request.open("POST", "add-user.php");

Файл может быть любого типа, например .txt или .xml, или файлы скриптов на стороне сервера, например .php или .asp, которые могут выполнять некоторые действия на сервере (например, вставка или чтение данных из базы) перед отправкой ответа.

Чтобы отправитт запрос на сервер используйте метод send() объекта XMLHttpRequest.

request.send(); -Or- request.send(body);

Метод send() принимает необязательный параметр body, который позволяет нам указать тело запроса. В основном это используется для запросов HTTP POST, так как запрос HTTP GET не имеет тела запроса, а только заголовки.

Метод GET обычно используется для отправки небольшого объема данных на сервер, в то время как метод POST используется для отправки большого объема данных, таких как данные формы.

В методе GET данные отправляются как параметры URL. Но в методе POST данные отправляются на сервер как часть тела HTTP-запроса. Данные, отправленные методом POST, не будут видны в URL.

См. Руководство по GET и POST запросам в PHP для подробного сравнения этих двух методов.

В следующем разделе мы подробнее рассмотрим, как работают Ajax-запросы.

Выполнение AJAX GET-запроса

GET-запрос обычно используется для получения или извлечения некоторой информации с сервера, которая не требует каких-либо манипуляций или изменений в базе данных, например, выборка результатов поиска на основе термина, выборка пользовательских данных на основе их идентификатора или имени, и так далее.

В следующем примере показано, как сделать AJAX GET-запрос в JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Ajax GET Demo</title>
<script>
function displayFullName() {
    // Создаем объект XMLHttpRequest
    var request = new XMLHttpRequest();

    // Создаем объект запроса
    request.open("GET", "greet.php?fname=John&lname=Clark");

    // Определяем прослушивателя событий для события readystatechange
    request.onreadystatechange = function() {
        // Проверяем, был ли запрос успешным
        if(this.readyState === 4 && this.status === 200) {
            // Вставляем ответ от сервера в HTML-элемент
            document.getElementById("result").innerHTML = this.responseText;
        }
    };

    // Отправляем запрос на сервер
    request.send();
}
</script>
</head>
<body>
    <div id="result">
        <p>Содержимое поля DIV результата будет заменено ответом сервера</p>
    </div>
    <button type="button" onclick="displayFullName()">Display Full Name</button>
</body>
</html>

Когда запрос асинхронный, метод send() возвращается сразу после отправки запроса. Поэтому перед обработкой необходимо проверить, где находится ответ в его жизненном цикле, используя свойство readyState объекта XMLHttpRequest.

readyState — это целое число, которое указывает состояние HTTP-запроса. Кроме того, функция, назначенная обработчику события onreadystatechange, вызывается каждый раз, когда изменяется свойство readyState. Возможные значения свойства readyState приведены ниже.

Номер	Значение	Описание
`0`	`UNSENT`	Объект `XMLHttpRequest` создан, но метод `open()` еще не был вызван (т.е. запрос не инициализирован).
`1`	`OPENED`	Вызван метод `open()` (т.е. установлено соединение с сервером).
`2`	`HEADERS_RECEIVED`	Метод `send()` был вызван (то есть сервер получил запрос).
`3`	`LOADING`	Сервер обрабатывает запрос.
`4`	`DONE`	Запрос обработан и ответ готов.

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

Свойство status возвращает числовой код состояния HTTP ответа XMLHttpRequest. Некоторые из распространенных кодов состояния HTTP перечислены ниже:

200 — Сервер успешно обработал запрос.
404 — Сервер не может найти запрошенную страницу.
503 — Сервер временно недоступен.

Подробнее см. Список HTTP-кодов состояний о статусе запроса для получения полного списка кодов ответов.

Вот код из нашего файла greet.php, который просто создает полное имя человека, объединяя его имя и фамилию и выводя приветственное сообщение.

<?php
if(isset($_GET["fname"]) && isset($_GET["lname"])) {
    $fname = htmlspecialchars($_GET["fname"]);
    $lname = htmlspecialchars($_GET["lname"]);
    
    // Создание полного имени путем объединения имени и фамилии
    $fullname = $fname . " " . $lname;

    // Отображение приветственного сообщения
    echo "Hello, $fullname! Welcome to our website.";
} else {
    echo "Hi there! Welcome to our website.";
}
?>

Выполнение AJAX POST-запроса

Метод POST используется в основном для отправки данных форм на веб-сервер. В следующем примере показано, как отправить данные форм на сервер с помощью Ajax.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Ajax POST Demo</title>
<script>
function postComment() {
    // Создаем объект XMLHttpRequest
    var request = new XMLHttpRequest();
    
    // Создаем объект запроса
    request.open("POST", "confirmation.php");
    
    // Определяем прослушивателя событий для readystatechange
    request.onreadystatechange = function() {
        // Проверяем, был ли запрос успешным
        if(this.readyState === 4 && this.status === 200) {
            // Вставляем ответ от сервера в HTML-элемент
            document.getElementById("result").innerHTML = this.responseText;
        }
    };
    
    // Получяем данных формы
    var myForm = document.getElementById("myForm");
    var formData = new FormData(myForm);

    // Отправляем запрос на сервер
    request.send(formData);
}
</script>
</head>
<body>
    <form id="myForm">
        <label>Имя:</label>
        <div><input type="text" name="name"></div>
        <br>
        <label>Комментарий:</label>
        <div><textarea name="comment"></textarea></div>
        <p><button type="button" onclick="postComment()">Отправить комментарий</button></p>
    </form>    
    <div id="result">
        <p>Содержимое поля DIV результата будет заменено ответом сервера</p>
    </div>    
</body>
</html>

Если вы не используете объект FormData для отправки данных формы, например, если вы отправляете данные формы на сервер в формате строки запроса, то есть request.send(key1=value1&key2=value2), вам необходимо явно установить заголовок запроса с использованием метода setRequestHeader(), например:

request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

Метод setRequestHeader() должен вызываться после вызова open(), но перед вызовом send().

Некоторые общие заголовки запроса: application/x-www-form-urlencoded, multipart/form-data, application/json, application/xml, text/plain, text/html и т. д.

Объект FormData предоставляет простой способ создания набора пар ключ/значение (key/value), представляющих поля формы и их значения, которые можно отправлять с помощью метода XMLHttpRequest.send(). Переданные данные имеют тот же формат, который использовался бы для отправки данных методом submit() формы, если тип кодировки формы был установлен на multipart/form-data.

Вот код файла confirmation.php, который просто выводит значения, представленные пользователем.

<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = htmlspecialchars(trim($_POST["name"]));
    $comment = htmlspecialchars(trim($_POST["comment"]));
    
    // Проверяем, являются ли значения полей формы пустыми
    if(!empty($name) && !empty($comment)) {
        echo "<p>Привет, <b>$name</b>. Ваш комментарий был успешно получен.<p>";
        echo "<p>Вот комментарий, который вы ввели: <b>$comment</b></p>";
    } else {
        echo "<p>Пожалуйста, заполните все поля формы!</p>";
    }
} else {
    echo "<p>Что-то пошло не так. Пожалуйста, попробуйте еще раз.</p>";
}
?>

Из соображений безопасности браузеры не разрешают делать междоменные Ajax-запросы. Это означает, что вы можете отправлять запросы Ajax только на URL-адреса того же домена, что и исходная страница, например, если ваше приложение работает на домене mysite.com, вы не можете сделать Ajax-запрос на othersite.com или любой другой домен.

Однако вы можете загружать изображения, CSS-таблицы, JS-файлы и другие ресурсы из любого домена.

Ознакомьтесь с методами Ajax в jQuery для быстрой и беспроблемной реализации Ajax. Инфраструктура jQuery предоставляет очень удобные методы для реализации функциональности Ajax.