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. Он
определяет, какие запросы можно обработать "на месте", а за какими
необходимо обращаться на сервер.

Схема работы

Что можно сделать с помощью Ajax
• Небольшие элементы управления
В первую очередь AJAX полезен для небольших элементов, связанных
с элементарными действиями: добавить в корзину, подписаться, и
т.п.
• Динамическая подгрузка данных с сервера.
Например, дерево, узлы которого подгружаются по мере раскрытия.
• Незаметные для пользователя действия.
Например, при редактировании статьи - каждые 10 минут результаты
автосохраняются на сервере.
• Непрерывная подзагрузка информации с сервера.
Самый типичный пример - чат. В окошко постоянно поступают все
новые сообщения, непрерывно подгружаемые с сервера. И, опять
же, через AJAX, без перезагрузки страницы, пользователь может
отсылать сообщения на сервер.

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

Основные методы
Основные методы для посылки запросов 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=31536000
Content-Length: 4260
Content-Type: image/png
Date: 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.

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to JavaScript Базовый. Занятие 08.

Similar to JavaScript Базовый. Занятие 08. (20)

More from Igor Shkulipa

More from Igor Shkulipa (20)

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