javascript Базовый. Занятие 08

Темы лекции: Ajax и работа с HTTP протоколами.

Практическое задание: Ajax и работа с HTTP протоколами.

Тренер: Игорь Шкулипа, к.т.н.

JavaScript. Базовый курс

Занятие 8

http://www.slideshare.net/IgorShkulipa 2

Ajax

Ajax расшифровывается как Asynchronous Javascript And XML(Асинхронные Javascript И XML) и технологией в строгом смысле словане является. Это просто аббревиатура, обозначающая подход ксозданию веб-приложений с помощью следующих технологий:

• стандартизированное представление силами XHTML и CSS;• динамическое отображение и взаимодействие с пользователем с

помощью DOM;• обмен и обработка данных в виде XML и JSON;• JavaScript;• асинхронные запросы с помощью объекта XMLHttpRequest.

Если в стандартном веб-приложении обработкой всей информациизанимается сервер, тогда как браузер отвечает только завзаимодействие с пользователем, передачу запросов и выводпоступившего HTML, то в Ajax-приложении между пользователем исервером появляется еще один посредник - движок Ajax. Онопределяет, какие запросы можно обработать "на месте", а за какиминеобходимо обращаться на сервер.

http://www.slideshare.net/IgorShkulipa


Схема работы



Что можно сделать с помощью Ajax

• Небольшие элементы управления

В первую очередь AJAX полезен для небольших элементов, связанныхс элементарными действиями: добавить в корзину, подписаться, ит.п.

• Динамическая подгрузка данных с сервера.

Например, дерево, узлы которого подгружаются по мере раскрытия.

• Незаметные для пользователя действия.

Например, при редактировании статьи - каждые 10 минут результатыавтосохраняются на сервере.

• Непрерывная подзагрузка информации с сервера.

Самый типичный пример - чат. В окошко постоянно поступают всеновые сообщения, непрерывно подгружаемые с сервера. И, опятьже, через AJAX, без перезагрузки страницы, пользователь можетотсылать сообщения на сервер.



Объект XMLHttpRequest

Объект XMLHttpRequest (или, сокращенно, XHR) дает возможностьбраузеру делать HTTP-запросы к серверу без перезагрузки страницы.

Несмотря на слово XML в названии, XMLHttpRequest может работать сданными в любом текстовом формате, и даже c бинарными данными.


http://xmlhttprequest.ru/

http://xmlhttprequest.ru/


Основные методы

Основные методы для посылки запросов XMLHttpRequest:

• метод open(Method, Url, async);• метод send(data);• событие onreadystatechange;

Обычная последовательность вызова – это:

• Открыть соединение (open)• Описать обработчик onreadystatechange• Отправить запрос (send)



Методы open, send и abort

• open(method, URL, async, user, password) задаёт основные параметры запроса:

• method — HTTP-метод. Как правило, используется GET либо POST, хотядоступны и более экзотические, вроде TRACE/DELETE/PUT и т.п.

• URL — адрес запроса. Можно использовать не только HTTP/HTTPS, но идругие протоколы, например ftp:// и file://. При этом есть ограничениябезопасности, называемые «Same Origin Policy»: запрос со страницы можноотправлять только на тот же протокол://домен:порт, с которого она пришла.

• async — если установлено в false, то запрос производится синхронно,если true — асинхронно.

• user, password — логин и пароль для HTTP-авторизации.

Обязательны только первые два аргумента. Метод open сам по себе не открываетсоединение, а только инициализирует соединение.

• send(body) отправляет запрос на сервер. В body находится тело запроса. Не увсякого запроса есть тело, например у GET-запросов тела нет, в таком случаепередаётся null или пустая строка. С другой стороны, в POST основные данныекак раз передаются через body.

• abort() - прерывает выполнение запроса.



Синхронный вызов

Синхронный вызов XMLHttpRequest происходит, если параметр asyncравен false.

В этом случае страница «подвисает»: скрипт ждёт ответа сервера, азатем продолжается — и ответ сервера уже можно использовать.



Событие readystatechange

Событие readystatechange происходит несколько раз в процессеотсылки и получения ответа.

При этом можно посмотреть «текущее состояние запроса» в свойствеreadyState, которое принимает значения от 0 до 4:

• UNSENT = 0; - начальное состояние• OPENED = 1; - вызван open• HEADERS_RECEIVED = 2; - получены заголовки• LOADING = 3; - загружается тело• DONE = 4; - запрос завершён

Надёжно и кросс-браузерно работает только последнее состояние: 4 -запрос завершён.

Типичная проверка конца запроса:xhr.onreadystatechange = function() {

if (xhr.readyState != 4) return; // запрос ещё не завершён

// .. обработать завершение запроса, проверить ошибки

}



Свойства status и statusText

Эти свойства содержат HTTP-статус ответа и его описание, например:

• status - statusText• 200 - OK• 404 - Not Found• 500 - Internal Server Error

Когда ошибка не связана с кодом ответа сервера (например, не удалосьсоединение), свойство status равно нулю, а в statusText — пустаястрока.



Свойства responseText и responseXML

После завершения запроса становится доступно свойство responseText,которое содержит текст ответа сервера. В современных браузерах онодоступно даже при неоконченном запросе и содержит текст,полученный к текущему моменту.

Если сервер прислал ответ с Content-Type: text/xml, то браузерпревращает его в полноценный документ и записывает вresponseXML.

Если его нет, то браузер не станет обрабатывать ответ как XML, исвойство responseXML будет пустым.



Заголовки

Для работы с заголовками есть 3 метода:

• setRequestHeader(name, value) устанавливает заголовок nameзапроса со значением value. Если заголовок с таким name уже есть —он заменяется.

xhr.setRequestHeader('Content-Type', 'text/xml');

• getResponseHeader(name) возвращает значение заголовка ответаname.

xhr.getResponseHeader('Content-Type') == 'text/plain'

• getAllResponseHeaders() возвращает все заголовки ответа.

Заголовки возвращаются в виде единой строки, например:Cache-Control: max-age=31536000Content-Length: 4260Content-Type: image/pngDate: Sat, 08 Sep 2012 16:53:16 GMT



Таймаут

Максимальную продолжительность запроса можно задать свойствомtimeout:

xhr.timeout = 30000; // 30 секунд

При превышении этого времени запрос будет оборван и сгенерированособытие ontimeout.



Другие события

• onerror - Ошибка при выполнении запроса.

• onload - Запрос успешно завершён.

• onprogress - Браузер получил очередной пакет данных. Можнопрочитать текущие полученные данные в responseText.

• onabort - Запрос отменён вызовом abort().

• onloadstart - Запрос начат.

• onloadend - Запрос окончен, возможно с ошибкой.



Пример. HTML

<!DOCTYPE html> <html> <head>

<title>JavaScript Canvas and Cookie Example</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="css/site.css" type="text/css" />

<script type="text/javascript" src="js/functions.js"> </script>

<script type="text/javascript" src="js/ajax.js"> </script>

<body>

<div id="page">

<div id="head">

<div id="logo">

<img src="img/logo.png" height="94" width="100" alt="logo">

</div>

<div id="title">JavaScript Canvas and Cookie Example</div>

</div>

<div class="main">

<div class="innermain">

<div id="menu" class="menu">

<a href="#" id="mi1" class="menuitem">Ajax</a>

<input type="text" id="searchcountry" />

</div>

<div id="content" class="content">

</div> </div> </div>

<div id="foot">

<p onmouseover="this.className = 'pmouseover'"

onmouseout="this.className = 'pmouseout'">

Move Closer to Change the Style</p>

</div> </div>



Пример. HTML

<script type="text/javascript">

var mi1 = document.getElementById("mi1");

mi1.addEventListener("click", startAjax, false);

var ctxt = document.getElementById("searchcountry");

ctxt.addEventListener("keyup", searchCountryAjax,

false);

</script>

</body>

</html>



Файлы 1.xml и countries.txt



Пример. Кроссбраузерная функция получения объекта.

function getXmlHttp() {

var xmlhttp;

try {

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

} catch (e) {

try {

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

} catch (E) {

xmlhttp = false;

}

}

if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {

xmlhttp = new XMLHttpRequest();

}

return xmlhttp;

}



Пример Ajax

function getXML() {

var xmlHttp = getXmlHttp();

xmlHttp.open("GET", "./files/1.xml", true);

xmlHttp.onreadystatechange = function () {

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

document.getElementById("content").innerHTML += "<pre>" +

xmlHttp.responseText + "</pre>";

document.getElementById("content").innerHTML +=

"<br/><br/>";

document.getElementById("content").innerHTML += "<p>" +

xmlHttp.responseText + "</p>";

}

}

}

xmlHttp.send(null);

}

var interval;

function startAjax() {

interval = window.setInterval(getXML, 1000, null);

window.setTimeout(function () { window.clearInterval(interval); },

5000, null);

}



Результат



Пример Ajax

function searchCountryAjax() {

var xmlHttp = getXmlHttp();

xmlHttp.open("GET", "./files/countries.txt", true);

xmlHttp.onreadystatechange = function () {

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

document.getElementById("content").innerHTML = "<ul>";

var ctrs = xmlHttp.responseText.split("\n");

for (var i = 0; i < ctrs.length; i++) {

if (ctrs[i].toLowerCase()

.startsWith(document

.getElementById("searchcountry")

.value.toLowerCase())) {

document.getElementById("content").innerHTML +=

"<li>" + ctrs[i] + "</li>";

}

}

document.getElementById("content").innerHTML += "</ul>";

}

}

}

xmlHttp.send(null);

}



Результат



Лабораторная работа №5.

К персональной странице добавить Ajax-функциональность.Например, подгрузка статей из файла по необходимости.


javascript Базовый. Занятие 08

Education