AJAX - передача данных между клиентом и сервером без перезагрузки страницы.
• AJAX (Asynchronous Javascript And Xml) - Асинхронный JavaScript и XML, позволяет передавать и получать данные (текстовые, JSON, XML) в браузере по HTTP-протоколу без перезагрузки страницы. В аббревиатуре AJAX присутствует XML, его допускается не использовать, запросы серверу можно передавать асинхронно и синхронно.
АЯКС используют там, где необходимо динамически подгружать контент. Например: поисковая строка (реализовано во многих поисковых системах), информирование о новых сообщениях (реализовано в социальных сетях, почтовых системах), подгрузка новых комментариев (применяется на форумах) и т.п.
• Отправку и приём запросов без перезагрузки страницы обеспечивает объект XMLHTTP , в современных версиях браузеров XMLHttpRequest. Этот объект является транспортом между клиентом и сервером. Изначально объект XMLHTTP был добавлен в IE и уже потом в другие браузеры, но уже как XMLHttpRequest.
Объект XMLHttpRequest не во всех браузерах работает корректно, поэтому используется следующий подход: создаём новый объект применяя небольшой костыль (в примере используются исключения - try catch)
<head>
<title>
Обратите внимание, код находится между тегами head
</title>
<script type="text/javascript">
var xmlHttp = false;
var textUser;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (n) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (n2) {
xmlHttp = false;
}
}
if (!xmlHttp) {
xmlHttp = new XMLHttpRequest();
}
</script>
</head>
• Дальнейший код мы обернём в функцию - upMedved. С помощью метода .open инициализируем запрос
xmlHttp.open('GET', 'http://test.ru/ajax/index.php', false);○ Первым аргументом указываем метод передачи (например: POST, GET, HEAD)
○ Вторым аргументом напишите URL вашего сайта (из соображений безопасности запросы можно отправлять только на тот протокол, домен и порт, со страницы которой выполняется запрос к серверу, это ограничение можно обойти)
○ Третьим аргументом указывается, синхронно (false) или асинхронно (true) выполнить запрос, по умолчанию (без указания аргумента) запросы выполняются асинхронно.
• После того как запрос собран (инициализирован), его необходимо отправить на сервер с помощью метода .send
xmlHttp.send();
• По событию свойства onreadystatechange, которое происходит каждый раз, как изменяется readyState запускаем функцию - statusMedved
xmlHttp.onreadystatechange = statusMedved();
• Соберём воедино функцию - upMedved, здесь достаём данные из текстового поля, кодируем данные перед передачей в URI и отправляем запрос
function upMedved() {
textUser = document.getElementById('test').value;
xmlHttp.open('GET', 'http://test.ru/ajax/index.php?gen='+encodeURIComponent(textUser), true);
xmlHttp.send();
xmlHttp.onreadystatechange = statusMedved();
}
• Когда данные загружены (xmlHttp.readyState == 4) и получен код от сервера - 200 , можно внести изменения на странице пользователя
function statusMedved() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById('resTest').innerHTML = xmlHttp.responseText;
}
}
• Остаётся добавить в тело документа блочный элемент и текстовое поле, на которое повешаем событие, которое происходит когда отпускаешь нажатую клавишу
<input type="text" id="test" size="40" onkeyup="javascript:upMedved('')">
<div id="resTest"></div>
• Чтобы ограничить накопившуюся очередь в асинхронных запросах вызванных ошибкой, можно использовать
xmlHttp.timeout = 10000; // После 10 секунд с момента отправки запроса, он будет прерван
• Не забывайте, что IE кэширует всё.
Посмотреть готовый вариант:
Свернутый текст
HTML - /index.html
<html>
<head>
<script type="text/javascript">
var xmlHttp = false;
var textUser;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (n) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (n2) {
xmlHttp = false;
}
}
if (!xmlHttp) {
xmlHttp = new XMLHttpRequest();
}
function upMedved() {
textUser = document.getElementById('test').value;
xmlHttp.open('GET', 'http://test.ru/ajax/index.php?gen='+encodeURIComponent(textUser), true);
xmlHttp.send();
xmlHttp.onreadystatechange = statusMedved();
}
function statusMedved() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById('resTest').innerHTML = xmlHttp.responseText;
}
}
</script>
</head>
<body>
<input type="text" id="test" size="40" onkeyup="javascript:upMedved('')">
<div id="resTest"></div>
</body>
</html>
PHP - /ajax/index.php
<?php
header('Content-Type: text/html; charset=utf-8');
error_reporting(0);
$result = htmlspecialchars($_GET['gen']);
echo $result;
?>
_____________
Принимаю заказы, писать в ЛС