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.

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.