2015-09-06
258
<html>
<head>
<title>Изучаем AJAX + PHP</title>
<script type="text/javascript" src="quickstart.js"></script>
</head>
<body onload='process()'>
Сервер желает узнать Ваше Имя:
<input type="text" id="myName" />
<div id="divMessage" />
</body>
</html>
Quickstart.js
// запомнить ссылку на объект XMLHttpRequest
var xmlHttp = createXmlHttpRequestObject();
// создать объект XMLHttpRequest
Function createXmlHttpRequestObject()
{
// ссылка на объект XMLHttpRequest
var xmlHttp;
// если сценарий запущен под управлением Internet Explorer
If(window.ActiveXObject)
{
Try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Catch (e)
{
xmlHttp = false;
}
}
// если сценарий запущен под управлением Mozilla или других браузеров
Else
{
Try
{
xmlHttp = new XMLHttpRequest();
}
Catch (e)
{
xmlHttp = false;
}
}
if (!xmlHttp)
alert("Ошибка создания объекта XMLHttpRequest");
Else
return xmlHttp;
}
// выполнить асинхронный запрос с помощью объекта XMLHttpRequest
Function process()
{
// работа возможна если объект не занят
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
// получить имя, введенное пользователем в форму
// name = encodeURIComponent(document.getElementById("myName").value);
|
|
|
name = document.getElementById("myName").value;
// выполнить сценарий quickstart.php на сервере
xmlHttp.open("GET", "quickstart.php?name=" + name, true);
// определиь метод, который будет обрабтывать ответы сервера
xmlHttp.onreadystatechange = handleServerResponse;
// послать асинхронный запрос серверу
xmlHttp.send(null);
}
Else
// если соединение занято, повторить попытку через 1 секунду
setTimeout('process()', 1000);
}
// вызывается автоматически по прибытии сообщения от сервера
Function handleServerResponse()
{
// продолжать далее можно если транзакция с сервером завершена
if (xmlHttp.readyState == 4)
{
// статус 200 означает, что транзакция прошла успешно
if (xmlHttp.status == 200)
{
// извлечь XML, полученный от сервера
xmlResponse = xmlHttp.responseXML;
// получить корневой элемент в структуре XML
xmlDocumentElement = xmlResponse.documentElement;
// извлечь текстовое сообщение, которое находится в
// первом дочернем элементе корневого узла
helloMessage = xmlDocumentElement.firstChild.data;
// обновить текст сообщения на экране
document.getElementById("divMessage").innerHTML =
'<i>' + helloMessage + '</i>';
// повторить последовательность действий
setTimeout('process()', 1000);
}
// код отличный от 200 означает ошибку
Else
{
alert("При обращении к серверу возникли проблемы: " + xmlHttp.statusText);
}
}
}
