Помощь студентам - введение в AJAX

AJAX – Asyncronous Javascript and XML

oПоложил начало созданию динамичных и интерактивных веб приложений

oСтал набирать популярность с появлением проектов Gmail и Google Maps

oПолучил широкую поддержку в браузерах

Ключевые технологии в AJAX

n(X)HTML и CSS – оформление и стилизация содержания страницы

nDOM (Document Object Model) –динамичное визуализирование на странице.

nXMLHttpRequest – асинхронное взаимодействие.

nXML (XSLT) – обмен и обработка данных.

oDocument Object Model

<html>

<head>

function change() {

var x = document.getElementById("header")

x.innerHTML = "New"

}

</script>

</head>

<body>

</body>

</html>

oXMLHttpRequest

Позволяет клиентским скриптам отправлять HTTP-запросы к веб-серверу

Пример запроса:

var req = new XMLHttpRequest();

req.open('GET', '/test/test.xml') //присвоение параметров (метода, URL, и других) текущему запросу

req.send(null);//отправка

oXMLHttpRequest

Пример обработки ответа

req.onreadystatechange = handleResponse;

// onreadystatechange – событие, возникающее при смене статуса объекта;

function handleResponse () {

if (req.readyState == 4) { // 4 - «выполнен»;

// операции обработки данных ответа

}

oHTML и CSS

HTML – разметка структуры страницы.

CSS – стилизация страницы.

oXML

Данные содержатся в поле req.responseXML документа (ответ должен иметь в заголовке Content-Type : text/xml)

Поддержка AJAX различными браузерами

nMicrosoft Internet Explorer 5.0 и новее

nMozilla Firefox 1.0 и новее

nOpera 7.6 и новее

nNetscape 7 и новее

nApple Safari 1.2 и новее

nKonqueror

Различия в поддержке

var xmlreq = null;

if (window.XMLHttpRequest) { // Non IE

xmlreq = new XMLHttpRequest();

} else if (window.ActiveXObject) {

try { // new IE

xmlreq = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e1) {

try { // Old IE

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

} catch (e2) {

// Unable to create XMLHttpRequest

}

Преимущества AJAX

oИнтерактивность

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

nОбработка данных на сервере происходит как бы в "фоновом режиме”, сокращается время возврата ответа пользователю

AJAX Frameworks

DOJO

http://dojotoolkit.org/

n пользовательские и готовые Javascript widgets

ndrag-and-drop, эффекты, анимация

nобработка событий

Prototype

http://prototype.conio.net/

Форма входа

Наша реклама

Поиск

Календарь

Архив записей

Наш опрос

Друзья сайта

Статистика

Технология AJAX – основные принципы

AJAX – Asyncronous Javascript and XML

Поддержка AJAX различными браузерами