Детальное описание AJAX запроса на чистом Javascript.
Это начальная статья о технологии AJAX, в которой на конкретном примере подробно описано, как без сторонних модулей сформировать AJAX запрос и обработать полученные данные на Javascript.
Преимущества технологии AJAX
Маленькое вступление для тех, кто не в теме. AJAX — это аббревиатура от английского Asynchronous Javascript and XML, что переводится как «асинхронный JavaScript и XML» и обозначает технологию взаимодействия пользователя с источником информации. Чем же хороша эта технология? AJAX запросы позволяют клиенту полноценно обмениваться информацией с сервером и делать это без перезагрузки и зависаний web страницы, т.е. без раздражающего ожидания, пока будет выполнен запрос. AJAX запросы существенно приблизили взаимодействие пользователей с web сервером к уровню технологии клиент-сервер. Пока думаю достаточно, тем более вы сюда пришли не за этими азами.
Кого-то может испугать количество js кода, приведенного в статье, но уверяю Вас, ничего сложного в них нет, стоит только понять логику работы набора простых скриптов. В итоге, вы освоите взаимодействие с сервером по AJAX технологии и сможете владеть ею без костылей в виде внешних библиотек.
Отправляем данные
Ниже приведена строка ввода, которая принимает введенные пользователем данные и отправляет их на сервер с помощью AJAX. Полученные ответные данные, выводятся ниже на странице. Желающие могут попробовать, потом будет «разбор полетов».
Введите данные для отправки на сервер по технологии Ajax
| Данные для отправки: | |
Отладка
Ответ сервера:
По кнопке «Отправить» вызывается функция sendData(), которая управляет процессом отправки данных на сервер и приемом ответа.
function sendData()
{
var str = document.getElementById('number').value;
if (!str) {
alert('Не введены данные для отправки');
return;
}
var request = new XMLHttpRequest();
if (request) {
url = "http://webdesignstudio1.net//путь_к_обработчику_AJAXзапроса/getNumb.php?value1=" + escape(str);
try{
request.open("GET", url, true);
// указываем в заголовке, что приходящий контент не должен кодироваться.
request.setRequestHeader('Content-Type', 'application/x-www-form-url');
// устанавливаем обработку события изменения состояния запроса
request.addEventListener("readystatechange", () => {
getDebug(request);
}
});
request.send();
} catch(e){
alert("Невозможно соединиться с сервером:\n"+e.toString()+ "\n"+e.description);
}
} else {
alert('Ошибка при создании запроса');
}
};
Описание функции sendData()
В первой строке функции переменной str передаем введенные пользователем данные. После проверки ввода на пустоту создаем объект request, в котором и реализована вся функциональность AJAX запроса. Адрес серверного скрипта обработки AJAX запроса присваивается переменной url. Далее методом request.open(«GET», url, true) производится инициализация запроса, где первый параметр, указывает на метод отправки данных, второй параметр — это адрес обработчика запроса на сервере, и третий указывает, что запрос асинхронный, т.е., ждать ответа(все остановив) браузер не будет, если этому параметру присвоить значение «false», то браузер будет ожидать ответа на свой запрос, что мало отличается от тривиальной перерисовки страницы при обычном запросе. Чтобы принять ответ на свой запрос, тем более, что он асинхронный, т.е. данные могут прийти в любой момент времени, браузер должен отслеживать состояние объекта request. Для этого на событие изменения состояния запроса устанавливается обработчик getData(request).
На этом подготовка запроса завершена — созданный объект request готов к обмену, метод request.send() и осуществляет наш AJAX запрос.
Подведем итоги. В функции sendData() мы создали объект, который умеет производить асинхронные запросы, произвели его настройку и отправили запрос на сервер. Осталось дождаться данных и обработать их.
Описание функции getData()
Теперь описание собственно функции. Она умеет не только принимать и отображать отклик сервера, но и отслеживать состояние передачи, если в примере обмена отмечен чекбокс «Отладка». Но об этом чуть позже, а пока вам достаточно знать, что в режиме без отладки вызывается функция showData(request, console), которой передаются объект запроса и элемент страницы, куда надо вывести принятые данные.
function getData(request)
{
var debug = document.getElementById('debug').checked;
var console = document.getElementById('response');
if (!debug) {
showData(request, console);
} else {
showStatus(request, console);
}
}
function showData(request, console)
{
if (request.readyState === 4 && request.status === 200){
console.innerHTML+=request.responseText;
}
}
В режиме отладки наш пример выводит на страницу любое изменение состояния запроса, производится это с помощью функции showStatus(request, console). Вот ее код.
function showStatus(request, console)
{
let str1 = 'Состояние запроса: ' + request.readyState + ' ';
let str2 = 'cтатус: ' + request.statusText + '<br>';
switch (request.readyState) {
case 1 :
console.innerHTML+= str1 + '(подготовка к отправке), ';
console.innerHTML+= str2;
break;
case 2 :
console.innerHTML+= str1 + '(отправлен), ';
console.innerHTML+= str2;
break;
case 3 :
console.innerHTML+= str1 + '(идет обмен), ';
console.innerHTML+= str2;
break;
case 4 :
console.innerHTML+= str1 + '(обмен завершен), ';
console.innerHTML+= str2;
if(request.status === 200) {
console.innerHTML+="Сервер передал: " + request.responseText;
} else if (request.status === 404) {
alert("Request URL does not exist");
} else {
alert("Error: status code is " + request.status);
}
break;
}
}