Реферат Технологія AJAX

Кафедра:АСОИиУ

>Лабораторная робота

На тему:AJAX

Душанбе, 2009


Запровадження

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

Це двох років томуAJAX був у дивовижу (і словаAJAX тоді не вигадали). Тепервеб-приложения, сторінки яких оновлюються "на льоту", звичний перебіг подій. Навіть навпаки, безAJAX важко навіть уявити собі деякі сервіси.

Як працювали звичайнівеб-приложения? Зазвичай, на подія (клік по засланні чи натискання на кнопку) браузер реагував відправкою запиту серверу. Коли з серверу приходив відповідь, все вміст сторінки повністю оновлювалося.

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

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

Сучасні браузери, підтримують стандартиW3CDOM, дозволяють вивестивеб-приложение новий рівень.

Схема взаємодії залишається майже той самий. Ось тільки відправляє запит і він здобуває відповідь з серверу теперскрипт за клієнта, а замість відновлення всієї сторінки - оновлюється лише його частина (замість відновлення можуть вживатися інші дії, наприклад, вирушати наступний запит).

>Веб-приложение виходить розподіленим, і частина логіки перебуває в боці клієнта, а частина - за серверу. Такі докладання і називають терміном ">AJAXApplications" (абревіатура розшифровується якAsynchronousJavascriptAndXmlApplications).


Об'єктXMLHTTPRequest

Для асинхронних запитів від клієнта до сервера за браузери служить спеціальний об'єкт під назвоюXMLHTTPRequest.

Перерахуємо методи лікування й властивості об'єкта, які використані далі:

>XMLHTTPRequest.open("method", ">URL",async, ">uname", ">pswd") - створює запит до сервера.

>method - тип запиту, наприклад,GET

>URL -URL запиту, наприкладlocalhost/file.xml

>async - якщоTrue, він використовуватися асинхронний запит, тобто виконанняскрипта продовжиться після відправки запиту. Інакшескрипт чекатиме відповіді серверу, заморозившиUI.

>uname,pswd - логін і пароль для простийвеб-авторизации.

>XMLHTTPRequest.send("content") - відправляє запит на сервер.Значениемcontent може бути дані дляPOST-запроса чи порожня рядок.

>XMLHTTPRequest.onreadystatechange - оброблювач подій що спрацьовує кожне зміна стану об'єкта. Стану об'єкта може бути такими:

0 - перш ніж запит відправлений (>uninitialized)

1 - об'єктинициализирован (>loading)

2 - отримано відповідь від серверу (>loaded)

3 - з'єднання з сервером активно (>interactive)

4 - об'єкт завершив роботу (>complete)

>XMLHTTPRequest.responseText - повертає одержані від серверу дані як рядки.

>XMLHTTPRequest.responseXML - якщо відповідь серверу прийшов у вигляді правильногоXML, повертаєXMLDOM об'єкт.

>XMLHTTPRequest. status - повертає статусHTTP-ответа як числа. Наприклад, 404 якщозапрашиваемая сторінка була знайдено на сервері.

Розглянемо застосування об'єкта з прикладу простогоAJAX-приложения.

ПолеSELECT з її пошуком

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

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

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

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

У HTML виглядати це може:

<>inputtype="text"

>onkeyup="lookup(this.value, '>id_select',

'>localhost/cgi-bin/xmlhttp.cgi')" />

<>selectid="id_select"name="id_select">

<>optionselected="selected"value=""></option>

</>select>

На будь-яку несприятливу подіюKeyUp (>отжатие кнопки) в текстовому полі викликається функціяlookup ('текст', '>id-selecta', '>url')

>functionlookup(text,select_id,url) {

// Отримуємо об'єктXMLHTTPRequest

>if(!this.http) {

>this.http =get_http();

>this.working =false;

}

// Запит

>if (!this.working &&this.http) {

>varhttp =this.http;

// Якщо текстовому полі менш трьох

// символів - не робимо нічого

>if (>text.length <3)return;

// додаємо закодований текст

// вURL запиту

>url =url + "?text="+encodeURIComponent(text);

// створюємо запит

>this.http.open("GET",url,true);

//прикрепляем до запитуфункцию-обработчик

// подій

>this.http.onreadystatechange =function() {

// 4 - дані готові заради обробки

>if (>http.readyState == 4) {

>fill(select_id,http.responseText);

>this.working =false;

}>else{

// дані у процесі отримання,

// можна повеселити користувача

// повідомленнями

// ЧЕКАЙТЕ ВІДПОВІДІ

}

}

>this.working =true;

>this.http.send(null);

}

>if(!this.http) {

>alert('Ошибка під час створенняXMLHTTP об'єкта! ')

}

}

Як бачимо, на початку ми маємоXMLHTTP-объект з допомогою функціїget_http(). Потім пошуковий текст кодується у стиліURL і формуєтьсяGET-запрос до сервера.URL запиту у разі виглядатиме приблизно так:localhost/cgi-bin/xmlhttp.cgi?text=...

>Скрипт на сервері, отримавши значенняtext, робить пошук в таблиці і відсилає результат клієнту. Уобработчике подій об'єктаXMLHTTP, коли дані від серверу отримані і готові для використання, викликається функціяfill('select_id', '>data'), яка заповнить списокSELECT отриманими даними.

Функціяget_http() - цекросс-браузерная реалізація отримання об'єктаXMLHTTP (у кожному браузері він виходить по-своєму). Її реалізацію з коментарями ви можете легко знайти у інтернеті, це, як кажуть, приклад, з підручника.

>functionget_http() {

>varxmlhttp;

/*@>cc_on

@>if (@_>jscript_version >= 5)

>try {

>xmlhttp = newActiveXObject("Msxml2.XMLHTTP");

}catch (e) {

>try {

>xmlhttp = new

>ActiveXObject("Microsoft.XMLHTTP");

}catch (E) {

>xmlhttp =false;

}

}

@>else

>xmlhttp =false;

@end @*/

>if (!xmlhttp &&typeofXMLHttpRequest! = '>undefined') {

>try {

>xmlhttp = newXMLHttpRequest();

}catch (e) {

>xmlhttp =false;

}

}

>returnxmlhttp;

}

Функціяfill() отримує на вхід значення параметраID спискуSELECT, що необхідно заповнити, й існують самі дані, отримані з серверу.

Для простоти припустимо, що ці з серверу ми маємо як таблиці, поля якої Розділено символом табуляції '>t', а рядки - символом перенесення рядки 'n':

>id1tname1n

>id2tname2n

З вмісту цієї таблиці ми заповнювати поліSELECT елементамиOPTION.

>functionfill (>select_id,data) {

// поліSELECT в зміну як об'єкта

>varselect =document.getElementById(select_id);

// очищаємоSELECT

>select.options.length = 0;

// якщо даних немає - не робимо більше нічого

>if(data.length == 0)return;

// в масивіarr - рядки отриманої таблиці

>vararr =data.split('n');

// кожної рядки

>for(var і inarr) {

// в масивіval - поля отриманої таблиці

>val =arr [і].split('t');

// додаємо новий об'єктOPTION до нашогоSELECT

>select.options [>select.options.length] =

newOption(val [1],val [0],false,false);

}

}

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

Суть її зводиться ось до чого: передавати даних (тобто. спілкування клієнта з сервером) без фактичної перезавантаження web-сторінки. Є кілька реалізацій цієї ідеї, дана статтяраскажет про моєї. Причому не стверджую, що її до мене. Якщо була - про неї не знав (на даний момент написання цього).

Спочатку пропоную визначити, які плюси ми маємо, роблячиAJAX-скрипти.

1. Ми заощаджуємо трафік як відвідувача, і свій власний (адже в нас платний хостинг і поза МБ ми платимо:)).

2. Ми заощаджуємо час відвідувача.

3. Ми полегшуємо життя серверу - йому доводиться передавати щоразу купу "зайвого"HTML-кода.

4. У очах відвідувача ми перетворюємо свій сайт в системну програму. Він тисне на кнопку та практично відразу бачить результат.

З особистої практики:

Приміром, раніше наWebFashion користувач, щоб вийти (очиститиcookies), тиснув для виходу", чекав перезавантаження і, переконавшись, що з системи він Гість, йшов із сайту. Тепер, він тисне "вихід" і крізь мить бачить зміна свого статусу (змінюється верхнє навігаційне меню).

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

Отже, чого ж динамічно здійснити запит до сервера і отримати від неївразуметельний відповідь? Сподіваюся, всі знають існуваннітега <>script>. Не знаєте, далі годі й читати. Отож, він має чудовий атрибутsrc. Значення цього атрибута - адресу доJavaScript-файлу, запитаєте Ви? Але не зовсім. Це адресу до файлу, який міститьJavaScript-код. Відчуваєте різницю? Т. е. цим файлом то, можливоphp-файл зphp-кодом, який після обробки сервером виведе якийсьJavaScript, попутно зберігаючи б у файли, створюючиcookies, змінюючиБД тощо. Фактично програма, створює нову програму.

Перед ознайомленням з наступним абзацом вкотре прочитайте попередній, усвідомте що йдеться, покурите і повертайтеся.

Отже, Ви повернулися, отже ми можемо продовжити. На порядку денному ще декілька питань, але про все усе своєю чергою. Ми повинні динамічно створювати <>script> у документі.Отведем йому спеціальний блок:

<>divid="_ajax"style="position:absolute;left: 0;top: 0;visibility:hidden"></div>

Слід зазначити, що мені знадобиться передавати параметриphp-скрипту, а функціїURL-кодирования вJavaScript немає. Отже треба створити щось на кшталт таблиці кодування (виводиться елементарнимphp-скриптом і трохи правиться руками):

Аби забивати метр статті, вкладаю файл.

Тепер напишемо функцію, яка динамічно створювати <>script>. Функція приймає три параметра: адресуphp-файла, масив імен що передаються змінних і масив значень цих змінних. Кожне значення миURL-кодировать.

>functionLoadScript(addr,query,str) {

// складання рядки запиту

>for(k = 0;k <str.length;k++)

{

>str2 = "";

//URL-кодируем (що такеchr дивимося у вкладеному файлі)

>for(j = 0; j <str [>k].length; j++)str2 += '%' +chr [>str [>k].charAt(j)] ;

// додаємо до кінця запиту ">переменная=значение"

>addr +=query [>k] +"="+>str2;

}

/*

* _>ajax - ідентифікаторdiv-блока, хто забув.

* Трохи танцюємо з бубоном:

* Писати в HTML лише <>script></script> не можна - IE лається,

* тому додаємо будь-яку рядок, наприклад ">MSIE... ".

* Також не можна однієї рядком написати "</>script>",

* розбиваємо на два рядки.

*/

_>ajax.innerHTML = ">MSIE... <>script></"+"script>";

/*

* даємоJavaScript 10мсек на усвідомлення, що _>ajax змінено

* і призначаємо атрибутsrc.

*/

>setTimeout(

>function()

{

>scr = _>ajax.getElementsByTagName("script") [0] ;

>scr.language = ">javascript";

>if (>scr.setAttribute)scr.setAttribute("src",addr);

>elsescr.src=addr;

}

,

10);

}

Тепер, аби виконати запитindex. PHP?action=view&id=49, потрібно викликати функціюLoadScript() так:

>LoadScript("index.php",Array("?action","&id"),Array("view","49"));

На виконанняскрипта без параметрів слід передати функціїLoadScript() його адреса київська і два порожніх масиву.

Ви запитаєте, як видати якийсь результат зphp-скрипта? У документі, з яких запускаємоLoadScript(), створюємо блок

<>divid="_hz"></div>

Наphp-скрипте пишемо

>echo<<<a

_>hz.innerHTML="работает!!!";

a;

І нині треба іще одна маленькийвопросик. Річ у тім, що цескрипти,визивающиеся як <>scriptsrc="address"></script>кешируются браузером. Щоб уникнути, коженphp-скрипт починаємо з чотирьох рядків:

>Header("Expires:Mon, 26Jul 1997 05: 00: 00 GMT");

>Header("Cache-Control:no-cache,must-revalidate");

>Header("Pragma:no-cache");

>Header("Last-Modified: ".gmdate("D,d M Y H: і:s"). "GMT");


Схожі реферати:

Навігація