Ajax скрипти | Ajax приклади на JavaScript

ЗАГОЛОВОК

1Технологію AJAX
1.1 Особливості технології AJAX
1.2 Використання об'єкта XMLHttpRequest
1.2.1 Створення об'єкта xmlHttp
1.2.2 Формування запиту до сервера
1.2.3 Отримання даних з сервера
Приклад 2
Приклад 3

1Технология AJAX

1.1 Особливості технології AJAX

AJAX (Asynchronous JavaScript And XML - асинхронний JavaScript і XML) ппредставляет собою технологію, що дозволяє при необхідності у фоновому режимі (не перериваючи роботи користувача і непомітно для нього) виконувати запити до псерверу і отримувати додаткові дані для відновлення окремих частин Web-сторінки, тим самим виключаючи необхідність повторної завантаження сторінки. пНапример, виконувати на стороні сервера перевірку правильності заповнення даних ппользоваетелем по мірі їх введення.
Без використання технології AJAX для вирішення цієї пзадачи є такі можливості:

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

Для застосування AJAX необхідні наступні компоненти:

JavaScript (основний компонент);
об'єкт XMLHttpRequest;
серверні технології (наприклад, PHP).

Спочатку технологію AJAX розробила фірма Microsoft як об'єкт керування ActiveX пдля браузера Internet Explorer. Потім фірма Mozilla створила об'єкт XMLHttpRequest з (майже) ідентичними API, який в даний час пподдерживается всіма сучасними браузерами.
Рекомендації організації W3C аналогічної пфункциональности поки не застосовані в жодному браузері.

Заголовок

1.2 Використання об'єкта XMLHttpRequest

Об'єкт XMLHttpRequest дає можливість відправляти пасинхронные HTTP-запити з коду JavaScript сервера, приймати від нього відповіді та побновлять окремі частини Web-сторінки, не перериваючи роботу користувача. Має пследующие методи і властивості:

abort() - зупиняє виконання поточного запиту;
getAllResponseHeaders() - повертає всі HTTP заголовки відповіді у вигляді пстроки;
getResponseHeader header () - возвращает зазначений HTTP-заголовок відповіді пвиде рядка;
open(method, [URL, async_flag, [userName [. password ]]]) - пинициализирует параметри запиту, де:
- method - один з методів обміну даними з сервером: найбільш часто писпользуются GET та POST, але дозволені також методи HEAD, PUT або DELETE;
- URL - абсолютний або відносний URL-адреса сервера
- async_flag (необязательнлый параметр) - значення true означає асинхронний режим роботи з сервером: пскрипт, пославши запит серверу, продовжує свою роботу (значення за замовчуванням), пзначение false означає синхронний режим роботи з сервером: скрипт, пославши пзапрос сервера, припиняє свою роботу, чекаючи відповіді від сервера.
- userName (необязательнлый параметр) - ім'я користувача для аутентифікації, пякщо параметр дорівнює або Null "" і сайт вимагає автентифікації, то з'являється птекст login;
- password (необязательнлый параметр) - пароль користувача паутентификации, якщо дорівнює або Null "", то ігнорується;
send(data) - виконує запит, дані вказуються тільки для методів POST пили PUT;
setRequestHeader(level, value) - вказує ім'я і значення HTTP-заголовка пзапросе;
onreadystatechange - використовується для установки функції зворотного виклику, пкоторая буде обслуговувати зміни стану запиту;
readyState - возвращает стан запиту:
- 0 - не ініціалізований;
- 1 - виконується підготовка запиту;
- 2 - відправлений запит;
- 3 - виконується обмін;
- 4 - обмін завершено.
responseText - возвращает відповідь сервера у вигляді рядка;
responseXML - возвращает відповідь сервера у форматі XML;
responseStream - возвращает відповідь сервера у вигляді двійкових даних;
status - возвращает HTTP-код стану запиту;
statusText - возвращает повідомлення про стан запиту.

Використання методів і властивостей об'єкта svojXMLHttpRequest пприведено у прикладі № 2, в якому пвыполняется отримання текстових даних з локального сервера, і в прикладі № 3, в якому виконується пполучение випадкових чисел з віддаленого сервера. У цих прикладах здійснюється:

створення об'єкта xmlHttp;
формування запиту до сервера;
отримання даних з сервера.

Заголовок

1.2.1 Створення об'єкта xmlHttp

Створення об'єкта xmlHttp здійснюється за допомогою пфункции createxmlHttp(). пПоскольку об'єкт xmlHttp створюється в обох прикладах (№ 1 № 2), оператор присвоєння, пвызывающий функцію createxmlHttp() і сама функція пописаны у зовнішньому файлі ajax.js:

xmlHttp=createxmlHttp();
function createxmlHttp()
{
try
{
var xmlHttp=new XMLHttpRequest(); //var робить змінну локальльной
}
catch(e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHttp");
}
if(!xmlHttp) alert("Об'єкт xmlHttp не створено");
else return xmlHttp;
}

Функція createxmlHttp() містить конструкцію try/catch, яка використовується для перевірки того, пвыполняется чи деякий код JavaScpipt без помилок:

try
{
// Перевіряється код
}
catch(e)
{
// Обробка помилки
}

Перевіряється код поміщається в блок try{}. Якщо при пвыполнении коду помилка (виникла виключна ситуація), пуправление передається блоку catch(e){}, який пперехватывает виникло виняток і обробляє помилку. При цьому виключення пне доходить до інтерпретатора JavaScpipt і тому не повідомляється користувачеві. пякщо в блоці try{} код виконується без помилок, пблок catch(e){} управління не отримує зовсім.
зазначалося вище, сучасні браузери пподдерживают роботу з XMLHttpRequest. Однак це не потносится до браузерів IE версії 6 і нижче. Тому функція createxnlHttp() спочатку намагається створити об'єкт xmlHttp за допомогою класу XMLHttpRequest (блок try{}). пякщо при цьому виникає исключительлная ситуація, керування передається в блок catch(e){}, де робиться спроба створити об'єкт xmlHttp вже з допомогою об'єкта ActiveXObject.
об'єкт і при цьому не вдається створити, пвыводится повідомлення про те, що об'єкт xmlHttp псоздан.

Заголовок

1.2.2 Формування запиту до сервера

Після створення об'єкта xmlHttp можна використати pego методи і властивості для організації запиту до сервера. Це робиться за допомогою пфункции process(), яка як і функція createxnlHttp() використовується в прикладах № 2 № 3 і зберігається у файлі ajax.js:

Функція process() спочатку перевіряє, створений чи побъект xmlHttp. Якщо створений, то виконуються наступні пдействия:

ЗА допомогою методу open() задаються значення ппараметров з'єднання з сервером:
- метод - GET;
- адресу сервера і передаються параметри зазначаються з допомогою змінних serverAddr і serverPar;
- режим обміну - асинхронний.
ЗА допомогою властивості onreadystatechange вказується обробник змін стану запиту - функція handleStateChange;
ЗА допомогою методу send() надсилається запит на сервер;
ЗА допомогою конструкції try{}/catch(e){} перевіряється, чи не виникла помилка пякщо виконанні вищеописаних дій зі створення та відправлення запиту на псервер.

При виникненні надзвичайної ситуації на екран виводиться повідомлення щодо неможливості з'єднання з сервером, до якого додається перехоплене пповідомлення e, перетворене в рядок.
дві можливості перетворення e:

за допомогою методу toString();
за допомогою властивості description.

Функція process() використовує обидві ці можливості. пякщо цьому у випадку, наприклад, неправильного завдання URL адреси сервера на екрані з'являються пследующие повідомлення:

Неможливо з'єднається з сервером
[object Error]
пОтказано в доступі

Заголовок

1.2.3 Отримання даних з сервера

Ajaxскрипты получение даних з сервера виконується по різному у прикладі №2 і у прикладі №3, тому буде розглянуто потдельно.

Приклад 2

<HTML>
<HEAD>
<TITLE>Читання тексту з сервера за допомогою AJAX</TITLE>
<SCRIPT src="/ajax.js"></SCRIPT>
<SCRIPT>
serverAddr="http://zykov/data.txt";
serverPar="";
function handleStateChange()
{
myDiv=document.getElementById("div");
if(xmlHttp.readyState==1)
{
myDiv.innerHTML+="Стан запиту:1 (підготовка до відправлення)";
try { myDiv.innerHTML+="статус: "+xmlHttp.statusText+"<BR/>"; }
catch(e) { myDiv.innerHTML+="<BR/>"; }
}
else
{
if(xmlHttp.readyState==2)
<{BR> myDiv.innerHTML+="Стан запиту:2 (відправлений)";
try { myDiv.innerHTML+="статус: "+xmlHttp.statusText+"<BR/>"; }
catch(e) { myDiv.innerHTML+="<BR/>"; }
}
else
{
if(xmlHttp.readyState==3)
{
myDiv.innerHTML+="Стан запиту:3 (йде обмін)";
try { myDiv.innerHTML+="статус: "+xmlHttp.statusText+"<BR/>"; }
catch(e) { myDiv.innerHTML+="<BR/>"; }
}
else
{
if(xmlHttp.readyState==4)
{
myDiv.innerHTML+="Стан запиту:4 (обмін завершено)";
try { myDiv.innerHTML+="статус: "+xmlHttp.statusText+"<BR/>"; }
catch(e) { myDiv.innerHTML+="<BR/>"; }
if(xmlHttp.status==200)
{
try
{
resp=xmlHttp.responseText;
myDiv.innerHTML+="<P>Сервер передав:"+resp;
}
catch(e) { alert("Помилка при читанні відповіді: "+e.description); }
}
else { alert("Помилка отримання даних\n статус: "+xmlHttp.statusText);}
}
}
}
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="process()">
<DIV ID="div" />
</BODY>
</HTML>

Заголовок

технологія AJAX вимагає використання Web-сервера, він повинен бути запущений до виконання прикладу.

також відзначити, що текстові дані, якщо поні є кирилицею, повинні бути збережені на сервері в кодуванні UTF-8.
Фукция handleStateChange() за допомогою властивості readyState перевіряє птекущее стан запиту і при його зміну виводить на екран в тег <DIV> пс допомогою властивості innerHTML такі дані: номер псостояния, його текстове значення і статус. Текстове значення статусу попределяется з допомогою властивості statusText об'єкта xmlHttp. Оскільки не для всіх станів запиту воно пдоступно, застосовується конструкція try/catch(e).
Вивід всіх станів запиту зроблений з навчальної пцелью. Для отримання даних достатньо проаналізувати стан 4 ("обемен даними завершено"), що й було зроблено в Ajax прикладі № 2.

Далі у стані 4 з допомогою властивості status визначається, чи нормально закінчився обмін даними з сервером. Якщо статус дорівнює 200 (текстове значення "OK"), що позначает, що операції з сервером закінчилися успішно, робиться спроба читання пданных, повернутих сервером. Якщо помилки немає - дані виводяться на екран, пвиде властивості innerText тега <DIV>.

разі виникнення помилки на екран виводиться пповідомлення "Помилка читання відповіді" з вказівкою додаткових даних за допомогою псвойства e.description.
сервер передає інше значення статусу, що позначает, що обмін стався з помилками, на екран виводиться відповідне пповідомлення із зазначенням статусу помилки в текстовому вигляді.

виконання всіх операцій у прикладі без пошибок на екран буде виведено наступні дані:

стан запиту:1 (підготовка до відправлення)
пСостояние запиту:2 (відправлений), статус: OK
пСостояние запиту:3 (йде обмін), статус: OK
пСостояние запиту:4 (обмін завершено), статус: OK

Сервер передав: Привіт, клієнт!

Якщо необхідно здійснити читання даних, що знаходяться на сервері пформате XML, наприклад, з файлу data.xml що містить такі дані:

<?xml version="1.0"> <name>Robert Sheckly</name>,

необхідно, крім вказівки нової адреси файлу - serverAddr="http://zykov/data.xmlзамінити в пфункции

handleStateChange()

рядок

resp=xmlHttp.responseText;

рядком

resp=xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;

Тоді замість повідомлення

Сервер передав: Привіт, клієнт!

з'явиться повідомлення

Сервер передав: Robert Sheckly

Заголовок

Приклад 3 имеет ajaxформу на javascriptчтения случайного числа из удаленного сервера. В коде происходит Ajaxзапрос на получение случайного числа.

<HTML>
<HEAD>
<TITLE>Читання випадкових чисел з віддаленого сервера з допомогою AJAX/TITLE>
<SCRIPT>
serverAddr="http://www.random.org/integers/";
serverPar="?num=1&min=1&max=25&col=1&base=10&format=plain";
function handleStateChange()
{
myDiv=document.getElementById("div");
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
try { myDiv.innerHTML+=xmlHttp.responseText; }
catch(e) { alert("Помилка при читанні відповіді: "+e.toStrintg()); }
}
else { alert("Помилка отримання даних\n статус: "+xmlHttp.statusText);}
}
}
</SCRIPT>
<SCRIPT src="/ajax.js"></SCRIPT>
</HEAD>
<BODY onLoad="process()">
<DIV ID="div" />
</BODY>
</HTML>

У прикладі 3 здійснюється одержання випадкових чисел з віддаленого сервера з допомогою технології AJAX: в змінну serverAddr заноситься URL-адреса віддаленого сервера ("http://www.random.org/integers/"), який забезпечує клієнтів справжніми випадковими числами, а в змінну serverPar - рядок "?num=1&min=1&max=20&col=1&base=10&format=plain", задає значення наступних параметрів запиту на одержання випадкових чисел:

num - кількість отримуваних чисел;
min - мінімальне число діапазону;
max - максимальне число діапазону;
col - кількість стовпчиків для виведення випадкових чисел на екран;
base - основа системи числення випадкових чисел;
format - формат представлення випадкових чисел:
- plain - у вигляді простого тексту;
- html - у вигляді HTML-документу.

Функция handleStateChange() не містить коду, посуществляющего виведення на екран назви і статусу різних станів запиту.
результаті роботи скрипта при кожному запиті на пэкран виводиться одне випадкове число в діапазоні від 1 до 25.

Заголовок