Основи AJAX для початківців

Що таке AJAX?

AJAX (Asynchronous JavaScript and XML) – асинхронний JavaScript і XML, це механізм взаємодії з сервером, посредствам якого відбувається обмін даними з цим сервером без перезавантаження всю сторінку цілком. Запит на AJAX може бути не тільки асинхронний, а й просто синхронним, але такі запити використовуються рідко. Так як при таких запитах браузер зависає, до того моменту поки не буде отримана відповідь з сервера, на відміну від асинхронного запиту, при якому надсилається запит і користувач може робити на сторінці все що завгодно, а коли буде отримано відповідь від сервера, спрацює обробник і з’являться зміни на сторінці. Як посилати синхронні і асинхронні запити навчимося нижче в прикладах.

Для чого потрібен AJAX?

І перше що приходить на розум це, звичайно ж, швидкий і зручний інтерфейс для користувача. Іншими словами, користувач любить, коли у нього швидко все працює і не потрібно робити зайвих рухів тіла, до того ж, щоб це все красиво виглядало, JavaScript і AJAX з цим відмінно справляються.

Друге, що хотілося б відзначити, це зменшення навантаження на сервер. Так як при перезавантаженні сторінки або при відкритті нової сторінки, навантаження на сервер набагато більше на відміну від запиту і отримання конкретних даних. По-іншому можна пояснити ще й так, при відкритті сторінки відпрацьовують всі серверні скрипти, які потрібні для відображення цієї сторінки, а при запиті через ajax відпрацьовує тільки один скрипт, потрібний для обробки конкретного запиту, а висновок на екран відбувається вже за допомогою JavaScript, який є клієнтської технологією.

По-третє, це, звичайно ж, зменшення трафіку, так як вага всієї сторінки набагато більше невеликого шматка даних, які Ви будете отримувати через запит на ajax.

недоліки AJAX

Не можу не відзначити і невеликі недоліки даного механізму. По-перше, JavaScript і AJAX працює на стороні клієнта, тому для того щоб все працювало, потрібно включити JavaScript у браузері, просто вона, в цілях безпеки може бути виключена і Ваше творіння просто на все може не працювати.

По-друге, можна відзначити те, що при використанні ajax отримані дані не індексуються пошуковими системами і, звичайно ж, не можна поставити закладки в браузері.

Приклад використання AJAX

Досить теорії, перейдемо до практики. Відразу скажу, що ajax – це не складно, і якщо Ви розібралися з JavaScript, то розібратися з ajax буде дуже просто, навіть легше ніж з JavaScript!

І почну я з того, що весь ajax будується на об’єкті XMLHttpRequest, у якого є кілька властивостей і кілька методів, які легко освоїти і запам’ятати. Об’єкт XMLHttpRequest – це свого роду міні-браузер, від імені якого і буде надсилатися запит до серверного скрипту.

Весь механізм починається зі створення цього об’єкта, і створити його можна по-різному, в старих браузерах це робиться одним способом, а у всіх нових іншим способом. Якщо раптом Ви не плануєте використовувати ajax на старих браузерах, наприклад, Ви створюєте ajax-додаток для корпоративної мережі, в якій встановлені сучасні браузери, Ви можете сміливо створити цей об’єкт одним рядком:

var request = new XMLHttpRequest ();

де, в змінної request і буде зберігатися наш об’єкт.

Але якщо ваша заявка можуть використовувати і в старих браузерах, то краще використовувати універсальний спосіб створення даного об’єкта, мені, наприклад, подобається ось такий спосіб:

function getXmlHttpRequest ()
{
if (window.XMLHttpRequest)
{
try
{
return new XMLHttpRequest ();
}
catch (e) {}
}
else if (window.ActiveXObject)
{
try
{
return new ActiveXObject ( ‘Msxml2.XMLHTTP’);
} Catch (e) {}
try
{
return new ActiveXObject ( ‘Microsoft.XMLHTTP’);
}
catch (e) {}
}
return null;
}

Для створення об’єкта XMLHttpRequest ми просто викличемо функцію getXmlHttpRequest, яка поверне нам потрібний об’єкт.

Об’єкт створений, тепер можна писати код на JavaScript, який буде формувати запит на сервер, і обробляти дані, отримані з сервера.

Для того щоб наш урок пройшов повноцінно, нам буде потрібно невеликий серверний скрипт, я буду використовувати серверний мова програмування PHP, і наш скрипт буде просто повертати поточні час на сервері. Назвемо його mytime.php, його код:

Код mytime.php:

<? php
// серверний скрипт (обробник запиту)
// посилаємо заголовок для правильного кодування
header ( “Content-Type:”. “text / html; charset = utf8”);
// Читання параметра в запиті
if (isset ($ _ GET [ “MyTime”])) {
echo date ( “H: i: s”); // Поточний час
}
?>

Тут я думаю все зрозуміло, ми перевіряємо параметр, який прийшов до нас методом GET, тобто MyTime, і якщо параметр дійсно до нас прийшов, то повертаємо поточні час на сервері. Раджу при розробці ajax додатки на серверному скрипті робити більше перевірок, так як ajax запит можна підробити. Можна робити ось такі перевірки, наприклад:

  • можна додатково посилати заголовок  X-REQUESTED-WITH, а на серверному обробнику перевіряти його;
  • також додати перевірку реферера, тобто звідки прийшов запит;
  • ще можна здійснювати перевірку за допомогою сесій.

Далі йде сам код (я оформив його також в php, файл index.php), В самому коді я все докладно коментую, тому питань виникнути не повинно.

Код index.php:

<? php
header ( “Content-Type:”. “text / html; charset = utf8”);
?>
<script type = “text / javascript” charset = “UTF-8”>
// функція створення об’єкта XMLHttpRequest
function getXmlHttpRequest () {
if (window.XMLHttpRequest)
{
try
{
return new XMLHttpRequest ();
}
catch (e) {}
}
else if (window.ActiveXObject)
{
try
{
return new ActiveXObject ( ‘Msxml2.XMLHTTP’);
} Catch (e) {}
try
{
return new ActiveXObject ( ‘Microsoft.XMLHTTP’);
}
catch (e) {}
}
return null;
}
function serverTime () {
// Об’єкт XMLHttpRequest
var request = getXmlHttpRequest ();
/ * Властивість onreadystatechange це обробник події, яке реагує
на будь-який зміни даного об’єкта * /
request.onreadystatechange = function () {
/ * Властивість readyState – стан об’єкта
0 – не инициализирован
1 – відкритий,
2 – відправка даних,
3 – отримання даних,
4 – дані завантажені
рекомендую використовувати тільки 4 * /
if (request.readyState == 4) {
/ * Властивість status це HTTP-статус відповіді: 200-OK, 404-Not Found * /
if (request.status == 200) {
var result = document.getElementById ( “MyId”); // Читання відповіді
result.firstChild.nodeValue = request.responseText; // Висновок на екран
} Else document.write ( “Сталася помилка. Обнови сторінку”);
}
}
// Адреса серверного скрипта
var url = “mytime.php? MyTime”;
/ * Запит на сервер, true означає що це асинхронний запит
якщо було б false, то це синхронний запит * /
request.open ( “GET”, url, true);
request.setRequestHeader ( “Content-type”, “charset = utf8”);
request.send (null); // посил даних
}
</ script>
<? php
echo ‘<h1 id = “MyId”>Поле для часу</ h1>’;
echo ‘<p><button onclick = “serverTime ()”>дізнатися час</ button></ p>’;
?>

Ось два файли (mytime.php і index.php), За допомогою яких Ви легко можете перевірити роботу ajax, код цих файлів представлений вище.

До речі, в вищевказаному прикладі ми використовували передачу даних методом GET, є багато способів передачі даних і всі основні дані передаються за допомогою методу POST. Давайте переробимо нашу функцію serverTime, щоб вона передавала дані методом post, це зробити дуже легко, так як поміняти потрібно всього кілька рядків.

Код функції serverTime з передачею параметрів методом post:

function serverTime () {
var request = getXmlHttpRequest ();
request.onreadystatechange = function () {
if (request.readyState == 4) {
if (request.status == 200) {
var result = document.getElementById ( “MyId”);
result.firstChild.nodeValue = request.responseText;
} Else document.write ( “Сталася помилка. Обнови сторінку”);
}
}
var url = “mytime2.php”; // змінимо адресу серверного обробника
var data = “MyTime = 1”; // задаємо параметри
request.open ( “POST”, url, true); // вказуємо метод post
// посилаємо два заголовка: тип даних і розмір даних
request.setRequestHeader ( “Content-Type”, “application / x-www-form-urlencoded”);
request.setRequestHeader ( “Content-Length”, data.length);
request.send (data); // посил даних, замість null вставляємо змінну з параметрами
}

Не забудьте змінити серверний обробник, щоб він перевіряв дані прийшли методом post. змініть рядок isset ($ _ GET [ “MyTime”] на isset ($ _ POST [ “MyTime”] і все буде працювати точно так само, як і за допомогою GET.

Як Ви помітили, ajax зовсім не складна штучка, хоча це тільки основи, але все одно якщо Ви розібралися, наприклад, з JavaScript, то освоїти ajax буде не проблема.

Ссылка на основную публикацию