Основы программирования на JavaScript - Марк Кан
Шрифт:
Интервал:
Закладка:
AJAX можно использовать для интерактивного взаимодействия с файлом XML.
В следующем далее примере приложения AJAX показано, как Web-страница может извлекать информацию из файла XML с помощью технологии AJAX.
На Web-странице выводится список выбора с именами исполнителей музыкальных произведений. При выборе исполнителя на странице появляется информация с описанием компакт-диска с записями этого музыканта.
Рассматриваемый пример содержит простую форму HTML и ссылку на код JavaScript:
<html> <head> <script src="selectcd.js"></script> </head> <body> <form> Выберите компакт-диск: <select name="cds" onchange="showCD(this.value)"> <option value="Bob Dylan">Bob Dylan</option> <option value="Bonnie Tyler">Bonnie Tyler</option> <option value="Dolly Parton">Dolly Parton</option> </select> </form> <p> <div id="txtHint"><b>Здесь выводится информация о компакт-диске.</b></div> </p> </body> </html>
Как можно видеть, это простая форма HTML с простым раскрывающимся списком выбора с именем "cds".
Параграф ниже формы содержит тег div с именем "txtHint". Тег div используется в качестве поля для заполнения информацией, получаемой с Web-сервера.
Когда пользователь делает свой выбор, выполняется функция с именем "showCD". Выполнение функции запускается событием "onchange". Другими словами, каждый раз, когда пользователь изменяет значение в поле раскрывающегося списка, вызывается функция showCD.
Код JavaScript показан далее.
Следующий далее код JavaScript находится в файле "selectcd.js":
var xmlHttp function showCD(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Браузер не поддерживает запросы HTTP") return } var url="getcd.asp" url=url+"?q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText } } function GetXmlHttpObject() { var objXMLHttp=null if (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") } return objXMLHttp }
Серверная страница, вызываемая кодом JavaScript, будет простым файлом ASP с именем "getcd.asp".
Страница написана на VBScript для Информационного сервера Интернет (IIS). Ее можно легко переписать на PHP, или любом другом серверном языке.
Код выполняет запрос на файле XML и возвращает результат в виде HTML.
q=request.querystring("q") set xmlDoc=Server.CreateObject("Microsoft.XMLDOM") xmlDoc.async="false" xmlDoc.load(Server.MapPath("cd_catalog.xml")) set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']") for each x in nodes for each y in x.childnodes response.write("<b>" & y.nodename & ":</b> ") response.write(y.text) response.write("<br />") next next
Объект XMLHttpRequest делает возможной технологию AJAX.
Чтобы создавать Web-приложения AJAX, необходимо хорошо знать объект JavaScript, называемый XMLHttpRequest.
Объект XMLHttpRequest является ключевым понятием технологии AJAX. Он был доступен с момента появления в июле 2000 браузера Internet Explorer 5.5, но не был полностью понят до 2005 года, когда начались разговоры об AJAX и Web 2.0.
Ниже представлены некоторые методы и свойства этого объекта, с которыми необходимо быть знакомым.
Различные браузеры используют для создания объекта XMLHttpRequest различные методы.
Internet Explorer использует ActiveXObject.
Другие браузеры используют встроенный в JavaScript объект, называемый XMLHttpRequest.
Вот простейший код, который можно использовать, чтобы обойти эту проблему.
var XMLHttp=null if (window.XMLHttpRequest) { XMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { XMLHttp=new ActiveXObject("Microsoft.XMLHTTP") }
Сначала создается переменная XMLHttp для использования в качестве объекта XMLHttpRequest. Ее значение задается как null.
Затем проверяется, доступен ли объект window.XMLHttpRequest. Этот объект доступен в более новых версиях браузеров, таких как Firefox, Mozilla, и Opera.
Если объект доступен, то он используется для создания нового объекта.
XMLHttp=new XMLHttpRequest().
Если он не доступен, то проверяется, доступен ли объект window.ActiveXObject. Этот объект будет доступен в браузере Internet Explorer версии 5.5 и выше.
Если этот объект доступен, то он используется для создания нового объекта:
XMLHttp=new ActiveXObject().
Некоторые программисты предпочтут использовать самую новую и быструю версию объекта XMLHttpRequest.
Следующий пример пытается использовать самую последнюю версию объекта "Msxml2.XMLHTTP" компании Microsoft, доступную в Internet Explorer 6, прежде чем обратиться к объекту "Microsoft.XMLHTTP", доступному в Internet Explorer 5.5 и выше.
var XMLHttp=null try { XMLHttp=new ActiveXObject("Msxml2.XMLHTTP") } catch(e) { try { XMLHttp=new ActiveXObject("Microsoft.XMLHTTP") } } if (XMLHttp==null) { XMLHttp=new XMLHttpRequest() }
Сначала создается переменная XMLHttp для использования в качестве объекта XMLHttpRequest. Ее значение задается как null.
Затем делается попытка создания объекта способом компании Microsoft, доступным в Internet Explorer 6 и более поздних версиях:
XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")
Если это порождает ошибку, то используется старый способ (Internet Explorer 5.5):
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
Если XMLHttp по прежнему имеет значение null, то делается попытка создания объекта "стандартным" способом:
XMLHttp=new XMLHttpRequest()
Метод open()
Метод open() создает запрос для Web-сервера.
Метод send()
Метод send() посылает запрос серверу.
Метод abort()
Метод abort() отменяет текущий запрос к серверу.
Свойство readyState определяет текущее состояние объекта XMLHttpRequest.
В таблице показаны возможные значения свойства readyState:
СостояниеОписание0Запрос не инициализирован1Запрос создан2Запрос послан3Запрос обрабатывается4Запрос завершен
readyState=0 после создания объекта XMLHttpRequest, но до вызова метода open().
readyState=1 после вызова метода open(), но до вызова метода send().
readyState=2 после вызова метода send().
readyState=3 после того, как браузер соединится с сервером, но до завершения сервером ответа.
readyState=4 после завершения запроса и полного получения всех данных ответа с сервера.
Различные браузеры используют свойство состояния готовности по-разному. Не стоит рассчитывать, что все браузеры будут сообщать обо всех состояниях. Некоторые не сообщают о состоянии 0 и 1.
Для приложений AJAX представляет интерес фактически только состояние 4. Те есть, когда запрос завершен, и можно использовать полученные данные.
Свойство responseText содержит присланный сервером текст.
Дополнение. Учебное руководство по XHTML
Язык XHTML является более строгой и четкой версией языка разметки HTML.
В данном руководстве рассмотрены различия между HTML и XHTML, а также показано, как преобразовать Web-сайт на использование XHTML.
Язык XHTML является более строгой и четкой версией языка HTML.
Для понимания изложенного материала необходимо знать язык HTML и основы создания Web-страниц.
XHTML является сокращением от английского EXtensible HyperText Markup Language, что означает "Расширяемый язык разметки гипертекста".
XHTML предназначен для замены HTML.
XHTML почти совпадает с HTML 4.01.
XHTML является более строгой и четкой версией языка HTML.
XHTML является языком HTML, определенным как приложение XML.
XHTML одобрен в качестве Рекомендации консорциумом W3C.
XHTML 1.0 был одобрен как Рекомендация W3C 26 января 2000 г..
W3C определяет XHTML как последнюю версию HTML. XHTML будет постепенно заменять HTML.
Язык XHTML совместим с HTML 4.01.
Все новые браузеры поддерживают XHTML.
XHTML является переработкой HTML 4.01 в соответствии с XML, и может сразу использоваться существующими браузерами при соблюдении нескольких простых правил.
Данное руководство рассматривает:
[x]. Почему необходимо использовать XHTML
[x]. Синтаксис XHTML
[x]. Как преобразовать сайт на XHTML
[x]. Проверка XHTML
[x]. Модуляризация XHTML
XHTML является объединением HTML и XML (EXtensible Markup Language – Расширяемого языка разметки).
XHTML состоит из всех элементов HTML 4.01, объединенных с синтаксисом XML.
В настоящее время многие страницы в Интернет содержат "плохой" код HTML.
Следующий код HTML будет нормально работать при просмотре в браузере, даже хотя он не полностью следует правилам HTML:
