Основы программирования на JavaScript
Шрифт:
}
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
В следующем далее примере приложения 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