Колись давно, коли я тільки починав займатсь веб-програмуванням, мене дивувавло, чому, для того, щоб отримати якісь нові дані з серверу, веб-сторінка повинна обовязково перезавантажитись.
І тепер, через кілька років перерви (інших видів діяльності), я знову вирішивши спробувати цей вид творчості, веб-програмування, відразу ж натикаюсь на вже дуже поширену технологію AJAX. Це технологія, яка являє собою сценарії на мові javascript, які в фоновому режимі виконують запити до серверу, отримує від нього дані (результати) та оновляє окремі частини сторінок.
І саме цікаве, це те, що В ajax немає жодного особливо нового компоненту, відсутність якого заважала б мені скоритстатись цією технологією колись давно. Всі компоненти AJAX існують як мінімум з 1998 року. Хоча сама назва “родилась” в 2005 році в статті Джессі Джеймса Гаррета (Jesse James Garret, http://www.adaptivepath.com/ideas/essays/archives/000385.php) і стала популярною після тго, як AJAX став використовуватись компанією Google.
То ж опишу приклад створення простого обміну інформацією між клієнтом та сервером на основі AJAX. Початківцям, він буде користим, та легким для зрозуміння.
Задача-приклад.
Створимо просту веб-програму, яка буде передавати серверу введені нами дані, та в залежності від них, виводити отриману на сервері відповідь.
Ми вводимо наше імя в поле і по мірі введення сервер має повернути відповідь трьох типів:
1) якщо імя відоме нашому серверу (знаходиться в відповідному масиві з іменами), то він відповість “Привіт і тобі, імя, давно не бачились!”;
2) якщо імя не відоме, то він відповість “Привіт, імя, радий знайомству!”;
3) якщо ж нічого не буде введено, то він відповість “Пусто та сумно..”.
А тут знаходиться приклад вже готової реалізації цієї задачі.
Ну що ж, вперед, писати код 🙂
Код знаходитимиться в трьох файлах:
1. Створимо файл index.html, в якому буде знаходитись html-код зовнішнього інтерфейсу програми.
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Вітання.</title>
<script type=”text/javascript” src=”./hello.js”>
</script>
</head>
<body onLoad=”process();”>
Привіт, сервер, мене звуть
<input type=”text” id=”myName” />.
<div id=”divMessage”>
</div>
</body>
</html>
2. Файл hello.js. В ньому знаходить java-script, який забезпечує передачу інформації серверу, прийому інформації від сервера, та відображення її на нашій сторінці.
var xmlHttp=createXmlHttpRequestObject();
function createXmlHttpRequestObject()
{
var xmlHttp;
//Якщо сценарій запущений під IE
if(window.ActiveXObject)
{
try
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch(e)
{
xmlHttp=false;
}
}
//Якщо сценарій запущений під Mozilla та іншим.
else
{
try
{
xmlHttp=new XMLHttpRequest();
}
catch(e)
{
xmlHttp=false;
}
}
//вернути створений обєкт або вивести повідомлення про помилку.
if(!xmlHttp)
alert(“Помилка створення обєкту XMLHttpRequest.”);
else
return xmlHttp;
}
//Виконати асинхронний запит HTTP з допомогою обєкту XMLHttpRequest
function process()
{
//робота можлива тільки якщо обєкт xmlHttp не зайнятий. Перевіримо це:
if(xmlHttp.readyState==4 || xmlHttp.readyState==0)
{
//отримати імя, введене користувачем в форму
name=encodeURIComponent(document.getElementById(“myName”).value);
//звернутись до сценарію hello.php на сервері (true – асинхронний запит, false – синхронний)
xmlHttp.open(“GET”, “hello.php?name=”+name, true);
//визначити метод (функцію), який буде обробляти відповіді сервера
xmlHttp.onreadystatechange=handleServerResponse;
//відправити асинхронний запит серверу
xmlHttp.send(null);
}
else
//якщо зєднання зайнято, повторити спробу через одну секунду
setTimeout(‘process()’, 1000);
}
//Викликається автоматично по поверненні відповіді від сервера
function handleServerResponse()
{
//продовжувати можна тільки якщо транзакція з сервером завершена.
if(xmlHttp.readyState==4)
{
//значення 200 говорить про те, що транзакція пройшла успішно
if(xmlHttp.status==200)
{
//добути xml, отриманий від сервера
xmlResponse=xmlHttp.responseText;
//обновити текст повідомлення на екрані
document.getElementById(“divMessage”).innerHTML=”<i>”+xmlResponse+”</i>”;
//повторити послідовність дій
setTimeout(“process()”, 1000);
}
//Код статуса HTTP, відмінний від 200, говорить про наявність помилки
else
{
alert(“При зверненні до серверу виникли проблеми: “+xmlHttp.statusText);
}
}
}
3. Файл hello.php. Тут знаходитиметься код, який оброблятиметься на стороні сервера, та формуватиме відповідь, залежно від отриманих даних.
<?php
//Отримати імя користувача
$name=$_GET[‘name’];
//згенерувати текст повідомлення в залежності від імені користувача прийнятого від клієнта
$userNames=array(‘Roy Buchanan’, ‘Jimi Hendrix’, ‘Carlos Santana’, ‘Paco De Lucia’);
if (in_array($name, $userNames))
echo “Привіт і тобі, “.htmlentities($name).”, давно не бачились!”;
else if (trim($name)==”)
echo “Пусто та сумно..”;
else
echo “Привіт, “.htmlentities($name).”, радий знайомству!”;
?>
А тепер пояснення до коду.
Так як ви читаєте цю статтю та розбираєте код, я вважатиму, що основи html, php та javascript вам відомі.
Файл index.html підвантажує скрипт hello.js та створює простенький веб-інтерфейс для клієнта.
Після завантаження сторінки, через тег body, запускається функція process(). Ця функція заповнює блок <div id=”divMessage”> повідомленням, отриманим від сервера.
Файл hello.php, отримує імя, передане методом GET, та відповідно до імені, формує відповідь. В цьому файлф все просто, думаю, не потрібно особливих пояснень.
Відповідь, яку сформував сервер (скриптом hello.php), клієнт отримує з допомогою функції handleServerResponse(), що знаходиться в файлі hello.js. Команда
xmlResponse=xmlHttp.responseText;
дістає відповідь з обєкту xmlHttp (який я опишу нижче). Після чого, ця відповідь відображається на сторінці в блоці <div id=”divMessage”>, завдяки команді
document.getElementById(“divMessage”).innerHTML=”<i>”+xmlResponse+”</i>”;
Решта коду javascript займається виконанням запиту до сервера, щоб отримати повідомлення-відповідь.
Функція createXmlHttpRequestObject() створює та повертає екземплят обєкта XMLHttpREquest, необхідний для реалізації принципу AJAX.
Браузери Mozilla, Opera та інші, крім Internet Explorer, дозволяють створювати цей обєкт за допомогою функції XMLHttpRequest():
xmlHttp=new XMLHttpRequest();
В IE ж потрібно використовувати команду
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
Також в цій функції обробляється виключення, на випадок, якщо буде використовуватись несумісний з вищезгадами командами, браузер.
Екземпляр обєкту XMLHttpRequest, посилання на який знаходиться в змінній xmlHttp, використовується функцією process() для передачі серверу асинхронних запитів.
//Виконати асинхронний запит HTTP з допомогою обєкту XMLHttpRequest
function process()
{
//робота можлива тільки якщо обєкт xmlHttp не зайнятий. Перевіримо це:
if(xmlHttp.readyState==4 || xmlHttp.readyState==0)
{
//отримати імя, введене користувачем в форму
name=encodeURIComponent(document.getElementById(“myName”).value);
//звернутись до сценарію hello.php на сервері (true – асинхронний запит, false – синхронний)
xmlHttp.open(“GET”, “hello.php?name=”+name, true);
//визначити метод (функцію), який буде обробляти відповіді сервера
xmlHttp.onreadystatechange=handleServerResponse;
//відправити асинхронний запит серверу
xmlHttp.send(null);
}
else
//якщо зєднання зайнято, повторити спробу через одну секунду
setTimeout(‘process()’, 1000);
}
Вищенаписаний код відправляє асинхронний запит серверу.
Асинхронний запит відрізняється від синхронного тим, що не зупиняє роботу сценарію на період, поки відбувається обмін. При використанні такого запиту, нам не приходиться зупинятись при роботі зі сторінкою, очікуючи відповіді, при кожному зверненні до сервера.
Функція process() з допомогою обєкту XMLHttpReques ініціалізує новий зпит. Це можливо тільки в тому випадку, якщо обєкт XMLHttpReques не зайнятий обробкою попереднього запиту. В нашому випадку це можливо, якщо сервер оброблятиме попередній запит більше однієї секунди. Тому в першу чергу ми перевіряємо, чи можемо ініціалізувати новий запит:
if(xmlHttp.readyState==4 || xmlHttp.readyState==0)
і якщо не можемо, то відкладаємо спробу ще на секунду:
else
//якщо зєднання зайнято, повторити спробу через одну секунду
setTimeout(‘process()’, 1000);
Якщо ж обєкт XMLHttpReques вільний, то ми можемо відправити новий запит.
Підготуємо сам запит, поки що не відправляючи його:
xmlHttp.open(“GET”, “hello.php?name=”+name, true);
Перший параметр визначає метод передачі (GET або POST). Другий – імя сторінки (сценарію на сервері), до якого ми хочемо звернутись. Третій метод має бути true при асинхронному запиті, або ж false при синхронному. При асинхронному методі, ми не чекаємо на відповідь від серверу, а просто вказуємо, функцію, яка виконається автоматично при зміні стану запиту:
xmlHttp.onreadystatechange=handleServerResponse;
І накінець, ми відправляємо запит з допомогою метода send обєкта XMLHttpRequest:
xmlHttp.send(null);
Запит відіслано.
Тепер розглянемо функцію handleServerResponse(), яка буде виконуватись при кожній зміні стану запиту.
function handleServerResponse()
{
//продовжувати можна тільки якщо транзакція з сервером завершена.
if(xmlHttp.readyState==4)
{
//значення 200 говорить про те, що транзакція пройшла успішно
if(xmlHttp.status==200)
{
Справа в тому, що станів запиту є кілька. Вони знаходяться в властивості readyState обєкту XMLHttpRequest. І тільки стан номер 4 означає, що сценарій був виконаний і ми можемо прочитати отриману відповідь.
Також перевіримо код транзакції HTTP (властивість status обєкту XMLHttpRequest), який в успішному випадку буде рівним 200.
Якщо ж все пройшло успішно, то (повторюсь) дійстаємо нашу відповідь:
xmlResponse=xmlHttp.responseText;
добавляємо її на сторінку:
document.getElementById(“divMessage”).innerHTML=”<i>”+xmlResponse+”</i>”;
та повторюємо запит, для перевірки нових даних:
setTimeout(“process()”, 1000);
Звісно ж, для реалізації AJAX, не обовязково ось так циклічно повторювати запит. Можна виконати його один або декілька раз. Просто для нашої задачі так зручніше.
Взяв даний код, в мене не працює ((
Пробував в трьох браузерах: IE, Opera, Firefox
В мене все працює…