Ajax – технология,
позволяющая общаться с сервером без
перезагрузки страницы.
Достоинства
Ajax:
уменьшает
нагрузку на сервер,
ускоряет работу
сайта,
динамически
подгружает новый контент
Задача.
Создадим input.
При потери фокуса проверим, является
ли вводимый логин занятым или свободным
через alert.
Нам понадобится
сервер.
s_3_2.php
<?php
if($_POST["login"] == "admin") echo "error";
?>
index.html
<!DOCTYPE
HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// Данная функция позволяет получить объект xmlhttp кроссбраузерным.
function getXmlHttp() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxm12.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
if(!xmlhttp && typeof XMLHttpRequest != "undefined")
xmlhttp = new XMLHttpRequest();
return xmlhttp;
}
}
// Функция проверки логина.
function checkLogin(login) {
var xmlhttp = getXmlHttp(); // Создаем объект XMLHTTP
xmlhttp.open("POST", "s_3_2.php", true); // открываем соединение: true - тип соединения (асинхронное)
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // настроим заголовки, отправляем кодировку
xmlhttp.send("login=" + encodeURIComponent(login)); // Отправляем логин на проверку POST-запросом.
// События возникают при изменении статуса объекта. Ждем ответа от сервера.
xmlhttp.onreadystatechange = function() {
// Ответ от сервера пришел.
if(xmlhttp.readyState == 4) {
// Проверяем код ответа. 200 - все хорошо.
if(xmlhttp.status == 200) {
if(xmlhttp.responseText == "error") alert("Логин занят");
else alert("Логин свободен");
}
}
}
}
</script>
<input type="text" name="login" onblur="checkLogin(this.value)"/>
</body>
</html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// Данная функция позволяет получить объект xmlhttp кроссбраузерным.
function getXmlHttp() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxm12.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
if(!xmlhttp && typeof XMLHttpRequest != "undefined")
xmlhttp = new XMLHttpRequest();
return xmlhttp;
}
}
// Функция проверки логина.
function checkLogin(login) {
var xmlhttp = getXmlHttp(); // Создаем объект XMLHTTP
xmlhttp.open("POST", "s_3_2.php", true); // открываем соединение: true - тип соединения (асинхронное)
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // настроим заголовки, отправляем кодировку
xmlhttp.send("login=" + encodeURIComponent(login)); // Отправляем логин на проверку POST-запросом.
// События возникают при изменении статуса объекта. Ждем ответа от сервера.
xmlhttp.onreadystatechange = function() {
// Ответ от сервера пришел.
if(xmlhttp.readyState == 4) {
// Проверяем код ответа. 200 - все хорошо.
if(xmlhttp.status == 200) {
if(xmlhttp.responseText == "error") alert("Логин занят");
else alert("Логин свободен");
}
}
}
}
</script>
<input type="text" name="login" onblur="checkLogin(this.value)"/>
</body>
</html>
Комментариев нет:
Отправить комментарий