JavaScript. Введение в AJAX. XMLHttpRequest
В этом уроке мы начинаем полноценно изучать технологию ajax — asynchronous Javascript and XML. Данная технология дает возможность обмениваться данными без перезагрузки страницы («в фоновом режиме»). AJAX мы рассмотрим как в контексте обычного javascript, так и в контексте jquery
В javascript имеется встроенный объект XMLHttpRequest, который и реализует ajax. Не обращайте внимание на присутствие XML в имени объекта. XMLHttpRequest прекрасно работает с json.
Для отправки запроса на сервер необходимо сначала сконфигурировать запрос.
Для отправки запроса на сервер необходимо сначала сконфигурировать запрос.
XMLHttpRequest - подготовка и отправка запроса
// создание объекта
var xhr = new XMLHttpRequest();
// конфигурация запроса
xhr.open("GET", 'players.json', true);
// Отправка запроса на сервер
xhr.send();
Из видеоуроков по введению в php вы знаете, что данные можно передавать двумя основными методами — GET и POST. В методе GET нет тела запроса — данные присутствуют в url.
Также важно понимать, что браузер отправляет/получает не только данные, но и заголовки. Заголовки — это дополнительная информация для работы браузера с результатами запроса. Например, в заголовках присутствует тип данных Content-Type: или код ответа сервера (например 200 — Ok или 404 — Not Found).
Также важно понимать, что браузер отправляет/получает не только данные, но и заголовки. Заголовки — это дополнительная информация для работы браузера с результатами запроса. Например, в заголовках присутствует тип данных Content-Type: или код ответа сервера (например 200 — Ok или 404 — Not Found).
При получении ответа важно понимать, что сервер может быть не готов принимать наш запрос (состояние готовности сервера), а также может вернуть не тот ответ, которые мы ожидали (код ответа сервера).
В примере это, соответственно событие onreadystatrchange и свойство readyState и свойство кода ответа status (и текст статуса statusText).
Код урока (HTML)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--<script src="xhr.js"></script>-->
<script>
// XMLHttpRequest - встроенный объект, реализует ajax
// создание объекта
var xhr = new XMLHttpRequest();
// конфигурация запроса
xhr.open("GET", 'players.php?action=getPlayers', true);
// Отправка запроса на сервер
xhr.send();
// событие состояния и состояние (код ответа) сервера
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status != 200) {
console.log(xhr.status + ': ' + xhr.statusText); // пример вывода: 404: Not Found
} else {
// alert( xhr.responseText ); // responseText -- текст ответа.
var res = JSON.parse(xhr.responseText);
console.log(res);
}
}
</script>
</body>
</html>
Код урока (xhr.js)
// XMLHttpRequest - встроенный объект, реализует ajax
// создание объекта
var xhr = new XMLHttpRequest();
// конфигурация запроса
xhr.open("GET", 'players.json', true);
// Отправка запроса на сервер
xhr.send();
// событие состояния и состояние (код ответа) сервера
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status != 200) {
console.log(xhr.status + ': ' + xhr.statusText); // пример вывода: 404: Not Found
} else {
alert( xhr.responseText ); // responseText -- текст ответа.
// var res = JSON.parse(xhr.responseText);
// console.log(res);
console.log(1);
}
}
Код урока (players.php)
<?php
//header("Content-Type: application/json");
$action = $_GET['action'];
if($action == 'getPlayers') {
echo getPlayers();
}
function getPlayers() {
$arrayName = array('1' => "Roger Federer", "2" => "Rafael Nadal", "3" => "Pit Sampras");
return json_encode($arrayName);
}
?>
В примере выше стоит отметить, что php великолепно работает с json. Для этого в php есть дву функции — json_encode() и json_decode().
Ниже мы реализовали простой пример отправки данных с формы авторизации с помощью XMLHttpRequest с последующим получение ответа от php скрипта (обработчика).
Код урока (form.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="loginForm" method="post">
<div>
<label for="login">Логин</label>
<input type="text" name="login" id="login">
</div>
<div>
<label for="password">Пароль</label>
<input type="password" name="password" id="password">
</div>
<button type="submit">Вход</button>
</form>
<script type="text/javascript">
var form = document.getElementById('loginForm');
form.onsubmit = function(event) {
event.preventDefault();
var login = document.getElementById('login').value;
var pass = document.getElementById('password').value;
var xhr = new XMLHttpRequest();
xhr.open("GET", 'login.php?login='+ login + '&pass=' + pass, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status != 200) {
console.log(xhr.status + ': ' + xhr.statusText); // пример вывода: 404: Not Found
} else {
alert(xhr.responseText ); // responseText -- текст ответа.
// var res = JSON.parse(xhr.responseText);
// console.log(res);
}
}
}
</script>
</body>
</html>
Код урока (login.php)
<?php
$login = trim($_GET['login']);
$pass = trim($_GET['pass']);
if($login == '' || $pass == '') {
echo "Ошибка. Заполните все поля";
return;
}
// тут внутренняя логика (SQL и пр)
if($login !='login' || $pass != '123') {
echo "Такой пользователь не найден";
return;
} else {
echo "Добро пожаловать на сайт";
}
Спасибо за внятное разъяснение !
Здравствуйте, Петр. Спасибо вам тоже!
Привет всем! На днях узнал о сервисе BAILRY. Сервис BAILRY — это бесплатная регулярная (периодическая) проверка доступности сайта. Возможно, кому-нибудь он пригодится! Есть там и платная услуга — для постоянного контроля доступности сайта. Удачи всем!
Здравствуйте, Dima. Спасибо
very cool? cute, and clever