Марк Кан - Основы программирования на 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>
<div id="txtHint"><b>Здесь выводится информация о компакт-диске.</b></div>
</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:
Откройте для себя мир чтения на siteknig.com - месте, где каждая книга оживает прямо в браузере. Здесь вас уже ждёт произведение Марк Кан - Основы программирования на JavaScript, относящееся к жанру Прочая околокомпьютерная литература. Никаких регистраций, никаких преград - только вы и история, доступная в полном формате. Наш литературный портал создан для тех, кто любит комфорт: хотите читать с телефона - пожалуйста; предпочитаете ноутбук - идеально! Все книги открываются моментально и представлены полностью, без сокращений и скрытых страниц. Каталог жанров поможет вам быстро найти что-то по настроению: увлекательный роман, динамичное фэнтези, глубокую классику или лёгкое чтение перед сном. Мы ежедневно расширяем библиотеку, добавляя новые произведения, чтобы вам всегда было что открыть "на потом". Сегодня на siteknig.com доступно более 200000 книг - и каждая готова стать вашей новой любимой. Просто выбирайте, открывайте и наслаждайтесь чтением там, где вам удобно.
