<html>
<head>
<script src='selectcustomer.js'></script>
</head>
<body>
<form>
Выберите заказчика:
<select name='customers' onchange='showCustomer(this.value)'>
<option value='ALFKI'>Alfreds Futterkiste
<option value='NORTS '>North/South
<option value='WOLZA'>Wolski Zajazd
</select>
</form>
<p>
<div id='txtHint'><b>Информация о заказчике будет выводиться здесь.</b></div>
</p>
</body>
</html>
Как можно видеть, это просто форма HTML с раскрывающимся списком с названием 'customers'.
Параграф ниже формы содержит тег div с именем 'txtHint'. Тег div используется в качестве поля для заполнения получаемой с Web-сервера информацией.
Когда пользователь выбирает данные (имя заказчика), выполняется функция 'showCustomer()'. Выполнение функции запускается событием 'onchange'. Другими словами, каждый раз, когда пользователь изменяет значение в поле раскрывающегося списка, вызывается функция showCustomer.
Код JavaScript показан далее.
Следующий далее код JavaScript находится в файле 'selectcustomer.js':
var xmlHttp
function showCustomer(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ('Браузер не поддерживает запросы HTTP')
return
}
var url='getcustomer.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 file с именем 'getcustomer.asp'.
Страница написана на VBScript для Информационного сервера Интернет (IIS). Ее можно легко переписать на PHP, или любой другой серверный язык.
Код выполняет команды SQL на базе данных и возвращает результат в виде таблицы HTML:
sql='SELECT * FROM CUSTOMERS WHERE CUSTOMERID='
sql=sql & request.querystring('q')
set conn=Server.CreateObject('ADODB.Connection')
conn.Provider='Microsoft.Jet.OLEDB.4.0'
conn.Open(Server.Mappath('/db/northwind.mdb'))
set rs = Server.CreateObject('ADODB.recordset')
rs.Open sql, conn
response.write('<table>')
do until rs.EOF
for each x in rs.Fields
response.write('<tr><td><b>' & x.name & '</b></td>')
response.write('<td>' & x.value & '</td></tr>')
next
rs.MoveNext
loop
response.write('</table>')
AJAX можно использовать для интерактивного взаимодействия с файлом XML.
В следующем далее примере приложения AJAX показано, как Web-страница может извлекать
