Кафедра: АСОІ
Лабораторна Робота
На тему: XMLHttpRequest (AJAX)
abort ()
обриває поточний запит
getAllResponseHeaders ()
повертає повний набір заголовків відповіді (назв і значень) у вигляді рядка
getResponseHeader (<headerLabel>)
повертає строкове значення заголовка, назва якого вказана в параметрі.
open (<method>, <URL> [, <asyncFlag> [, <userName> [, <password>]]])
Присвоєння параметрів (методу, URL, та інших) поточному запиту.
send (<content>)
Надсилає запит
setRequestHeader (<label>, <value>)
Установка в пересилають запиті заголовка <label> зі значенням <value>
Властивості об'єкта XMLHttpRequest
onreadystatechange
подія, що виникає при зміні статусу об'єкта
readyState
значення статусу (integer), може приймати наступні значення: 0 = неініціалізованих (uninitialized); 1 = "йде завантаження" (loading); 2 = "завантажений" (loaded); 3 = "інтерактивний" (interactive) 4 = "виконано" (complete)
responseText
рядок з повернутими сервером даними
responseXML
DOM-сумісний об'єкт-документ з повернутими сервером даними
status
стандартний HTTP код статусу, наприклад 404 (для "Not Found") або 200 (для "OK")
statusText
текстове повідомлення статусу
Тут всі необхідні властивості й методи цього об'єкту, які допоможуть нам вирішити наш таск. Опишемо послідовність наших дій:
Алгоритм:
1. Створення екземпляра об'єкту XMLHttpRequest.
2. Оголошення обробника події onreadystatechange нашого екземпляра.
3. Відкриття з'єднання з вказівкою типу запиту, URL і інших параметрів.
4. Посил запиту.
Алгоритм простий, але, враховуючи деякі нюанси (і враховуючи, що ми вчимося:)), звичайно ж, розглянемо його детальніше:
Отже, пункт перший - створення екземпляра об'єкту. Ось тут спливає особливість забезпечення кроссбраузерну. Конструкція створення об'єкту різна: у IE 5 + вона реалізована через ActiveXObject, а в решті браузерах (Mozilla, Netscape і Safari) - як вбудований об'єкт типу XMLHttpRequest.
Для Internet Explorer:
var request = new ActiveXObject ("Microsoft. XMLHTTP");
Для всіх інших:
var request = new XMLHttpRequest ();
Таким чином, щоб забезпечити кросбраузерність, потрібно лише перевіряти наявність об'єктів window. XMLHttpRequest і window. ActiveXObject і застосовувати відповідний виклик створення екземпляра.
Далі за планом - створення обробника подій і відкриття з'єднання. Це дуже просто:
request. onreadystatechange = processRequestChange;
request. open ("GET", url, false);
Тут ми використовуємо метод GET, хоча можна і POST; в загальному вигляді це виглядет так: request. open (<"GET" | "POST "|...>, <url>, <asyncFlag>);. Функцію, що є обробником події onreadystatechange (у нашому випадку це функція - processRequestChange ()), ми повинні визначити самі.
Ну і останній пункт - посил запиту - метод send () (для версії без ActiveX як параметр потрібно передати null).
/ / Для IE
request. send ();
/ / Для інших
request. send (null);
Після запуску методу send () починає працювати згаданий вище обробник події onreadystatechange. Власне, цей обробник - основна частина програми. У ньому зазвичай перехоплюються всі можливі коди стану запиту і викликаються відповідні дії, а також перехоплюються можливі помилки.
Виходячи з усього вищесказаного, JavaScript код буде приблизно следущим:
var request;
/ **
* Load XMLDoc function
* Тут в якості параметра url при виклику ми повинні вказати
* Backend-скрипт, який, власне, і отримає дані з сервера
* /
function doLoad (url) {
if (window. XMLHttpRequest) {
request = new XMLHttpRequest ();
request. onreadystatechange = processRequestChange;
request. open ("GET", url, true);
request. send (null);
} Else if (window. ActiveXObject) {
request = new ActiveXObject ("Microsoft. XMLHTTP");
if (request) {
request. onreadystatechange = processRequestChange;
request. open ("GET", url, true);
request. send ();
}
}
}
/ **
* Get request state text function
* /
function getRequestStateText (code) {
switch (code) {
case 0: return "Uninitialized."; break;
case 1: return "Loading ..."; break;
case 2: return "Loaded."; break;
case 3: return "Interactive ..."; break;
case 4: return "Complete."; break;
}
}
/ **
* Event on request change
* Власне, обробник події onreadystatechange.
* Тут ми, в залежності від стану запиту,
* Будемо приховувати / показувати шари "Завантаження даних",
* Саме поле даних і т.д.
* /
function processRequestChange () {
document. getElementById ("resultdiv"). style. display = 'none';
document. getElementById ("state"). value = getRequestStateText (request. readyState);
abortRequest = window. setTimeout ("request. abort ();", 10000);
/ / Якщо виконаний
if (request. readyState == 4) {
clearTimeout (abortRequest);
document. getElementById ("statuscode"). value = request. status;
document. getElementById ("statustext"). value = request. statusText;
/ / Якщо успішно
if (request. status == 200) {
document. getElementById ("resultdiv"). style. display = 'block';
document. getElementById ("responseHTML"). innerHTML = request. responseText;
} Else {
alert ("Не вдалося отримати дані: n" + request. statusText);
}
document. getElementById ("loading"). style. display = 'none';
}
/ / Інакше, якщо йде завантаження або у процесі - показуємо шар "Завантажуються дані"
else if (request. readyState == 3 | | request. readyState == 1) {
document. getElementById ("loading"). style. display = 'block';
}
}
Тепер HTML-форми нашого прикладу:
<Input type = "text"
id = "search"
value = "Введіть перші літери ника"
onFocus = "this. value =''; document. getElementById ('resultdiv'). style. display = 'none';"
/>
<Input type = "button"
value = "Пошук"
onClick = "doLoad ('ajaxsearch. php? search =' + document. getElementById ('search'). value);"
/> <br /> <br />
Додаткова інформація про виконання запиту: <br /> <br />
<table>
<tr>
<td> Стан запиту: </ td>
<td> <input type="text" id="state" disabled="true" /> </ td>
</ Tr>
<tr>
<td> Код статусу: </ td>
<td>
<input type="text" id="statuscode" disabled="true" />
<input type="text" id="statustext" disabled="true" />
</ Td>
</ Tr>
</ Table>
Зверніть увагу на фрагмент, виділений зеленим кольором - подія onClick кнопки "Пошук". Ми викликаємо функцію doLoad (..), Як параметр якої передаємо адресу backend-скрипта, що виконує пошук в базі зареєстрованого користувача. Про backend-скрипі трохи пізніше, ім'я його ми визначили як ajaxsearch. php. Також GET-параметром скрипту ми передаємо змінну search, зі значенням, взятим з поля введення для ника.
І, як було сказано вище, оголосимо додаткові HTML-елементи (у нашому випадку - це невидимі шари) для відображення отриманого вмісту і вікна завантаження з можливістю відміни:
<div id="resultdiv" style="display: none; ">
Резульат пошуку:
<span id="responseHTML"> </ span>
</ Div>
<Div id = "loading"
style = "
position: absolute;
top: 450px;
left: 550px;
display: none;
width: 125px;
height: 40px;
font-family: Verdana;
font-size: 11pt;
border: 1px solid # BBBBBB;
background: # EEEEEE;
padding: 5px 5px 5px 5px;
"
>
Loading data ...
<Div id = "canselloading"
style = "
background: red;
border: 1px solid # 000000;
color: # FFFFFF;
padding: 2px 2px 2px 2px;
cursor: pointer;
"
onClick = "
request. abort ();
document. getElementById ('loading'). style. display = 'none';
return false;
"
> Cansel
</ Div>
</ Div>
Ну що ж, з frontend'ом розібралися, переходимо до backend'у - скрипт ajaxsearch. php. І знову ми стикаємося з невеликими нюансами: для того, щоб PHP-скрипт коректно працював з XMLHttpRequest, він (скрипт) повинен посилати ряд заголовків. А саме: тип вмісту і його кодування (особливо важливо, якщо ви працюєте з кирилицею), а також параметри кешування - будь-яке кешування повинно бути відключено (ну це й зрозуміло - необхідно мати свіжу інформацію).
Послати ці заголовки можна, приблизно, так:
header ("Content-type: text / html; charset = windows-1251");
header ("Cache-Control: no-store, no-cache, must-revalidate");
header ("Cache-Control: post-check = 0, div-check = 0", false);
І ще одна особливість: якщо ви будете виводить дані у форматі text / plane (у нашому випадку - text / html, тому нас це не торкнеться, але все ж - щоб знати), пам'ятайте, що спецсимволи такі як n, t, r і т.д., обробляються за замовчуванням тільки в рядках з подвійними лапками:
/ / Тобто правильно так
print "MessagenFrom AJAX";
/ / А не так!
print 'MessagenFrom AJAX';
Ну і тепер вельми банальний PHP-скрипт отримання даних з бази (а банальний, тому що передбачається, що у вас вже є навички роботи з базами даних в PHP). Вид скрипта наступний (у знайдених ніках ми підсвічує букви запиту червоним кольором і виводимо все це у вигляді таблиці):
<? php
/ **
* Посил заголовків
* /
header ("Content-type: text / plain; charset = windows-1251");
header ("Cache-Control: no-store, no-cache, must-revalidate");
header ("Cache-Control: post-check = 0, div-check = 0", false);
/ **
* Хост, логін і пароль бази даних
* (Вам, природно, потрібно замінити на свої значення)
* /
$ Dbhost = "localhost";
$ Dblogin = "root";
$ Dbpassword = "root";
/ **
* Зєднується до бази, виконуємо
* Запит, отримуємо результат
* /
@ Mysql_connect ($ dbhost, $ dblogin, $ dbpassword) or die ("Unable to connect to database.");
@ Mysql_select_db ("MYDATABASE") or die ("Unable to select database");
$ Sql = "SELECT * FROM users WHERE nick LIKE '%". $ _GET ["Search"]. "% 'ORDER BY nick";
$ Result = mysql_query ($ sql);
print "Знайдено за запитом:". mysql_num_rows ($ result);
/ **
* Якщо є ряди, виводимо таблицю
* /
if (mysql_num_rows ($ result)> 0) {
print "<table>";
print "<tr>";
print "<td> NickName </ td>";
print "<td> RealName </ td>";
print "<td> E-mail </ td>";
print "</ tr>";
$ Get = $ _GET ["search"];
while ($ row = mysql_fetch_array ($ result)) {
print "<tr>";
print "<td>";
print ($ row ["unick"]? divg_replace ("/($ get) / i "," <font color='red'> 1 </ font> ", $ row [" unick "]):" ") ;
print "</ td>";
print "<td> ($ row [" urealname "]? $ row [" urealname "]:" ") </ td>";
print "<td> $ row [" umail "] </ td>";
print "</ tr>";
}
print "</ table>";
}
? >
Лабораторна Робота
На тему: XMLHttpRequest (AJAX)
XMLHttpRequest (AJAX) - написання та обробка відповідей http-запитів за допомогою JavaScript
Методи об'єкта XMLHttpRequest
Всі ніжеізложанние методи і властивості - загальні для Internet Explorer 5, Mozilla, Netscape 7, і відповідно, використовувати їх можна безпечно.abort ()
обриває поточний запит
getAllResponseHeaders ()
повертає повний набір заголовків відповіді (назв і значень) у вигляді рядка
getResponseHeader (<headerLabel>)
повертає строкове значення заголовка, назва якого вказана в параметрі.
open (<method>, <URL> [, <asyncFlag> [, <userName> [, <password>]]])
Присвоєння параметрів (методу, URL, та інших) поточному запиту.
send (<content>)
Надсилає запит
setRequestHeader (<label>, <value>)
Установка в пересилають запиті заголовка <label> зі значенням <value>
Властивості об'єкта XMLHttpRequest
onreadystatechange
подія, що виникає при зміні статусу об'єкта
readyState
значення статусу (integer), може приймати наступні значення: 0 = неініціалізованих (uninitialized); 1 = "йде завантаження" (loading); 2 = "завантажений" (loaded); 3 = "інтерактивний" (interactive) 4 = "виконано" (complete)
responseText
рядок з повернутими сервером даними
responseXML
DOM-сумісний об'єкт-документ з повернутими сервером даними
status
стандартний HTTP код статусу, наприклад 404 (для "Not Found") або 200 (для "OK")
statusText
текстове повідомлення статусу
Тут всі необхідні властивості й методи цього об'єкту, які допоможуть нам вирішити наш таск. Опишемо послідовність наших дій:
Алгоритм:
1. Створення екземпляра об'єкту XMLHttpRequest.
2. Оголошення обробника події onreadystatechange нашого екземпляра.
3. Відкриття з'єднання з вказівкою типу запиту, URL і інших параметрів.
4. Посил запиту.
Алгоритм простий, але, враховуючи деякі нюанси (і враховуючи, що ми вчимося:)), звичайно ж, розглянемо його детальніше:
Отже, пункт перший - створення екземпляра об'єкту. Ось тут спливає особливість забезпечення кроссбраузерну. Конструкція створення об'єкту різна: у IE 5 + вона реалізована через ActiveXObject, а в решті браузерах (Mozilla, Netscape і Safari) - як вбудований об'єкт типу XMLHttpRequest.
Для Internet Explorer:
var request = new ActiveXObject ("Microsoft. XMLHTTP");
Для всіх інших:
var request = new XMLHttpRequest ();
Таким чином, щоб забезпечити кросбраузерність, потрібно лише перевіряти наявність об'єктів window. XMLHttpRequest і window. ActiveXObject і застосовувати відповідний виклик створення екземпляра.
Далі за планом - створення обробника подій і відкриття з'єднання. Це дуже просто:
request. onreadystatechange = processRequestChange;
request. open ("GET", url, false);
Тут ми використовуємо метод GET, хоча можна і POST; в загальному вигляді це виглядет так: request. open (<"GET" | "POST "|...>, <url>, <asyncFlag>);. Функцію, що є обробником події onreadystatechange (у нашому випадку це функція - processRequestChange ()), ми повинні визначити самі.
Ну і останній пункт - посил запиту - метод send () (для версії без ActiveX як параметр потрібно передати null).
/ / Для IE
request. send ();
/ / Для інших
request. send (null);
Після запуску методу send () починає працювати згаданий вище обробник події onreadystatechange. Власне, цей обробник - основна частина програми. У ньому зазвичай перехоплюються всі можливі коди стану запиту і викликаються відповідні дії, а також перехоплюються можливі помилки.
Виходячи з усього вищесказаного, JavaScript код буде приблизно следущим:
var request;
/ **
* Load XMLDoc function
* Тут в якості параметра url при виклику ми повинні вказати
* Backend-скрипт, який, власне, і отримає дані з сервера
* /
function doLoad (url) {
if (window. XMLHttpRequest) {
request = new XMLHttpRequest ();
request. onreadystatechange = processRequestChange;
request. open ("GET", url, true);
request. send (null);
} Else if (window. ActiveXObject) {
request = new ActiveXObject ("Microsoft. XMLHTTP");
if (request) {
request. onreadystatechange = processRequestChange;
request. open ("GET", url, true);
request. send ();
}
}
}
/ **
* Get request state text function
* /
function getRequestStateText (code) {
switch (code) {
case 0: return "Uninitialized."; break;
case 1: return "Loading ..."; break;
case 2: return "Loaded."; break;
case 3: return "Interactive ..."; break;
case 4: return "Complete."; break;
}
}
/ **
* Event on request change
* Власне, обробник події onreadystatechange.
* Тут ми, в залежності від стану запиту,
* Будемо приховувати / показувати шари "Завантаження даних",
* Саме поле даних і т.д.
* /
function processRequestChange () {
document. getElementById ("resultdiv"). style. display = 'none';
document. getElementById ("state"). value = getRequestStateText (request. readyState);
abortRequest = window. setTimeout ("request. abort ();", 10000);
/ / Якщо виконаний
if (request. readyState == 4) {
clearTimeout (abortRequest);
document. getElementById ("statuscode"). value = request. status;
document. getElementById ("statustext"). value = request. statusText;
/ / Якщо успішно
if (request. status == 200) {
document. getElementById ("resultdiv"). style. display = 'block';
document. getElementById ("responseHTML"). innerHTML = request. responseText;
} Else {
alert ("Не вдалося отримати дані: n" + request. statusText);
}
document. getElementById ("loading"). style. display = 'none';
}
/ / Інакше, якщо йде завантаження або у процесі - показуємо шар "Завантажуються дані"
else if (request. readyState == 3 | | request. readyState == 1) {
document. getElementById ("loading"). style. display = 'block';
}
}
Тепер HTML-форми нашого прикладу:
<Input type = "text"
id = "search"
value = "Введіть перші літери ника"
onFocus = "this. value =''; document. getElementById ('resultdiv'). style. display = 'none';"
/>
<Input type = "button"
value = "Пошук"
onClick = "doLoad ('ajaxsearch. php? search =' + document. getElementById ('search'). value);"
/> <br /> <br />
Додаткова інформація про виконання запиту: <br /> <br />
<table>
<tr>
<td> Стан запиту: </ td>
<td> <input type="text" id="state" disabled="true" /> </ td>
</ Tr>
<tr>
<td> Код статусу: </ td>
<td>
<input type="text" id="statuscode" disabled="true" />
<input type="text" id="statustext" disabled="true" />
</ Td>
</ Tr>
</ Table>
Зверніть увагу на фрагмент, виділений зеленим кольором - подія onClick кнопки "Пошук". Ми викликаємо функцію doLoad (..), Як параметр якої передаємо адресу backend-скрипта, що виконує пошук в базі зареєстрованого користувача. Про backend-скрипі трохи пізніше, ім'я його ми визначили як ajaxsearch. php. Також GET-параметром скрипту ми передаємо змінну search, зі значенням, взятим з поля введення для ника.
І, як було сказано вище, оголосимо додаткові HTML-елементи (у нашому випадку - це невидимі шари) для відображення отриманого вмісту і вікна завантаження з можливістю відміни:
<div id="resultdiv" style="display: none; ">
Резульат пошуку:
<span id="responseHTML"> </ span>
</ Div>
<Div id = "loading"
style = "
position: absolute;
top: 450px;
left: 550px;
display: none;
width: 125px;
height: 40px;
font-family: Verdana;
font-size: 11pt;
border: 1px solid # BBBBBB;
background: # EEEEEE;
padding: 5px 5px 5px 5px;
"
>
Loading data ...
<Div id = "canselloading"
style = "
background: red;
border: 1px solid # 000000;
color: # FFFFFF;
padding: 2px 2px 2px 2px;
cursor: pointer;
"
onClick = "
request. abort ();
document. getElementById ('loading'). style. display = 'none';
return false;
"
> Cansel
</ Div>
</ Div>
Ну що ж, з frontend'ом розібралися, переходимо до backend'у - скрипт ajaxsearch. php. І знову ми стикаємося з невеликими нюансами: для того, щоб PHP-скрипт коректно працював з XMLHttpRequest, він (скрипт) повинен посилати ряд заголовків. А саме: тип вмісту і його кодування (особливо важливо, якщо ви працюєте з кирилицею), а також параметри кешування - будь-яке кешування повинно бути відключено (ну це й зрозуміло - необхідно мати свіжу інформацію).
Послати ці заголовки можна, приблизно, так:
header ("Content-type: text / html; charset = windows-1251");
header ("Cache-Control: no-store, no-cache, must-revalidate");
header ("Cache-Control: post-check = 0, div-check = 0", false);
І ще одна особливість: якщо ви будете виводить дані у форматі text / plane (у нашому випадку - text / html, тому нас це не торкнеться, але все ж - щоб знати), пам'ятайте, що спецсимволи такі як n, t, r і т.д., обробляються за замовчуванням тільки в рядках з подвійними лапками:
/ / Тобто правильно так
print "MessagenFrom AJAX";
/ / А не так!
print 'MessagenFrom AJAX';
Ну і тепер вельми банальний PHP-скрипт отримання даних з бази (а банальний, тому що передбачається, що у вас вже є навички роботи з базами даних в PHP). Вид скрипта наступний (у знайдених ніках ми підсвічує букви запиту червоним кольором і виводимо все це у вигляді таблиці):
<? php
/ **
* Посил заголовків
* /
header ("Content-type: text / plain; charset = windows-1251");
header ("Cache-Control: no-store, no-cache, must-revalidate");
header ("Cache-Control: post-check = 0, div-check = 0", false);
/ **
* Хост, логін і пароль бази даних
* (Вам, природно, потрібно замінити на свої значення)
* /
$ Dbhost = "localhost";
$ Dblogin = "root";
$ Dbpassword = "root";
/ **
* Зєднується до бази, виконуємо
* Запит, отримуємо результат
* /
@ Mysql_connect ($ dbhost, $ dblogin, $ dbpassword) or die ("Unable to connect to database.");
@ Mysql_select_db ("MYDATABASE") or die ("Unable to select database");
$ Sql = "SELECT * FROM users WHERE nick LIKE '%". $ _GET ["Search"]. "% 'ORDER BY nick";
$ Result = mysql_query ($ sql);
print "Знайдено за запитом:". mysql_num_rows ($ result);
/ **
* Якщо є ряди, виводимо таблицю
* /
if (mysql_num_rows ($ result)> 0) {
print "<table>";
print "<tr>";
print "<td> NickName </ td>";
print "<td> RealName </ td>";
print "<td> E-mail </ td>";
print "</ tr>";
$ Get = $ _GET ["search"];
while ($ row = mysql_fetch_array ($ result)) {
print "<tr>";
print "<td>";
print ($ row ["unick"]? divg_replace ("/($ get) / i "," <font color='red'> 1 </ font> ", $ row [" unick "]):" ") ;
print "</ td>";
print "<td> ($ row [" urealname "]? $ row [" urealname "]:" ") </ td>";
print "<td> $ row [" umail "] </ td>";
print "</ tr>";
}
print "</ table>";
}
? >