информацию из файла 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.
