Головна

Використання DOM

  1.  FSK модуляція і демодуляція з використанням мікроконтролера ...
  2.  FSK модуляція і демодуляція з використанням мікроконтролера ...
  3.  FSK модуляція і демодуляція з використанням мікроконтролера ...
  4.  II. Використання внутрішніх функцій, периферійних блоків ...
  5.  Toyota докладає зусиль для того, щоб заохочувати використання ременів безпеки.
  6.  VV Використання DreamLink'а під час ранкового сну
  7.  А2 Використання таймера Timer_А - файл RTC11xTAs43 File

Отримані без переривання роботи користувача нові дані потрібно включити до складу документа, вже показується на екрані. Для цього треба скористатися структурою об'єктів DOM. Від якості responseText краще відмовитися, так як його застосування потребують додаткового синтаксичного розбору. Набагато корисніше властивість responseXML, в якому інформація спочатку представляється в сумісному з DOM вигляді. У структурі поточного документа необхідно вибрати вузол, до складу якого слід включити повернуті дані, і викликати метод replaceChild (), замінивши старе поддерево новим, прочитаним з responseXML об'єкта XMLHttpRequest. Після цього залишилося задати зовнішній вигляд отриманих даних за допомогою каскадних таблиць стилів.

Виконавши згадані вище дії, ми отримаємо Ajax-додаток. Ну а щоб не порушувалася структура, наприклад, щоб не зустрічалися відкривають дескриптори без закривають, доцільно взагалі відмовитися від HTML - набагато більшу довіру заслуговує формат XML.

інформуйте користувача

Спочатку нам потрібно додати повідомлення про помилки, про які не може повідомити браузер. Про які помилки ми повинні повідомити користувачеві? Для початку це помилки з'єднання. Якщо запит не вдався, ми зможемо отримати код помилки за допомогою XMLHttpRequest і вивести відповідне повідомлення. Тут наведено уривок функції, яка обробляє подія onreadystatechange, об'єкта request класу XMLHttpRequest.

if (request.readyState == 4) {// 4 (complete) запит виконаний

if (request.status == 200) {

// HTTP OK, продовжуємо нормальну обробку Ajax

// ...

} Else {

// Щось пішло не так, повідомляємо про помилку

error ( "HTTP" + request.status +

". Сталася помилка:" + request.statusText);

}

}

Дуже важливо, щоб цикл зв'язку Ajax не переривати. Серверний скрипт повинен повертати коректний XML документ. Якщо серверний скрипт завершиться аварійно, повідомлення про помилку буде втрачено і додаток впаде

Якщо скрипти відключені

При створенні клієнтських скриптів можна забувати про користувачів, у яких скрипти відключені. У разі використання Ajax це зробити досить просто за допомогою використання «захоплення» посилання або форми.

onsubmit = "perform_ajax_action (); return false;">

Якщо цей код оброблятися браузером з включеними скриптами, то виконується код Ajax, інакше властивість onsubmit ігнорується і форма працює традиційним способом.

Ми можемо піти далі і перевірити чи підтримує браузер об'єкт XMLHttpRequest. Замість використання явного виклику return false в обробнику onsubmit, ми можемо перевірити чи є необхідні для Ajax об'єкти, в викликається функції, і виконати код Ajax якщо він підтримується або передати управління формі якщо немає. Перевіримо, чи існує функція createAjaxRequest створює відповідний браузеру об'єкт XMLHttpRequest.

var request; // Our request object

function perform_ajax_action () {

if (! request = createAjaxRequest ()) {

// Спроба використовувати Ajax не вдалася,

// Підтверджуємо форму

return true;

}

// Нормальна обробка за допомогою Ajax

// ...

return false; // Не підтверджують форму

}

У коді форми ми перепишемо обробник, щоб використовувати традиційний спосіб при перших ознаках проблем.

onsubmit = "return perform_ajax_action ();">

Якщо все пройде добре, буде виконаний код Ajax, а підтвердження форми пропущено. При наявності проблем з підтримкою Ajax, форма буде підтверджена, і користувач зможе продовжити роботу звичайним чином.

Розглянемо приклад:

// Створюємо новий об'єкт-запит JavaScript:

var req = new ActiveXObject ( "Microsoft.XMLHTTP"); // (Для IE)

var req = new XMLHttpRequest (); // (Для всього іншого)

Часто вибір класу для об'єкта req оформляється у вигляді функції

// Пишемо функцію, яка використовує цей об'єкт

var req;

function loadXMLDoc (url) {

// Branch for native XMLHttpRequest object

if (window.XMLHttpRequest) {

req = new XMLHttpRequest ();

req.onreadystatechange = processReqChange;

req.open ( "GET", url, true);

req.send (null); }

// Branch for IE / Windows ActiveX version

else if (window.ActiveXObject) {

req = new ActiveXObject ( "Microsoft.XMLHTTP");

if (req) {

req.onreadystatechange = processReqChange;

req.open ( "GET", url, true); // Відкрити запит

req.send (); // послати запит

}

}

}

// У тілі HTML файлу пишемо скрипт:

function checkName (input, response)

{

if (response! = '') {

// Response mode

message = document.getElementById ( 'nameCheckFailed');

if (response == '1') {

message.className = 'error';

} Else {

message.className = 'hidden';

}

} Else {

// Input mode

url = 'http: //localhost/xml/checkUserName.php? q =' \\

+ Input;

loadXMLDoc (url);

}

}

В даному прикладі в файлі localhost / xml / checkUserName.php обробляються дані, отримані з командного рядка в в змінної q. А результат зберігається в XML структурі, яка зберігається в цьому ж файлі. Так можна отримати з БД і обробити дані, які необхідно оновити.




 Властивості і методи об'єкта document |  Колекції і підлеглі об'єкти об'єкту document |  Властивості і методи об'єкта location |  Властивості і методи об'єкта style |  об'єкт layer |  Навігація по дереву документа |  Створення нових вузлів |  Видалення і заміна вузлів в документі |  Робота з атрибутами елементів |  JavaScript і AJAX |

© um.co.ua - учбові матеріали та реферати