Второй пример показывает работу с timeout`а, т.е. если ответ с сервера не получен в течении 5 секунд, выводится сообщение и ожидание ответа прекращается.
В этом примере, мы будем вводить в текстовое поле текст, как уже делали
здесь. Но теперь текст будет выводиться в div`е не на прямую, а через post запрос на сервер, и строка будет возвращаться в ответе.
Создаем index.html
Код:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>
POST запрос при помощи Ajax
</title>
</head>
<body>
<div id="out"></div><br>
<input type="text" onkeyup="javascript:SendPOST()" id="data" />
<script type="text/javascript" src="send.js"></script>
</body></html>
<div id="out"> - служит для вывода результата.
onkeyup="j
SendPOST()" - при отжатии клавиши будет выполняться функция SendPOST() нашего скрипта
src="send.js" - ссылка на скрипт
Теперь создадим send.js
Код:
function SendPOST()
{
var data = document.getElementById('data').value;
ajaxSendPOST('post.php','q='+encodeURI(data), SendCallback);
}
function SendCallback(answer) {
var ans = eval('('+answer+')'); // Преобразуем полученный в данных объект из текстового вида
if (ans.res=='error') {document.getElementById('out').innerHTML=ans.msg;return; }
if (ans.res!='ok') {document.getElementById('out').innerHTML='Не корректный ответ.';return; }
document.getElementById('out').innerHTML=ans.text;
}
function ajaxSendPOST(xmlpage,data,callback)
{
var xmlh = null;
if(window.XMLHttpRequest)
xmlh = new XMLHttpRequest();
else
try{
xmlh = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(ex) {
xmlh = new ActiveXObject('Microsoft.XMLHTTP');
}
if(xmlh){
var requestDone = false;
xmlh.open('post', xmlpage, true);
setTimeout(function(){
requestDone = true;
}, 5000); // ожидать выполнение запроса 5 сек
xmlh.onreadystatechange = function(x) {
if(xmlh.readyState==4 && !requestDone) callback(xmlh.responseText);
if(requestDone){document.getElementById('out').innerHTML='timeout';}
}
xmlh.setRequestHeader("Accept-Charset", "UTF-8");
xmlh.setRequestHeader("Accept-Language","ru, en");
xmlh.setRequestHeader("Connection", "close");
xmlh.setRequestHeader("Content-length", data.length); // Длинна отправляемых данных
xmlh.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlh.send(data); // отправляем данные
}
}
Сам скрипт немного изменился:
Код:
var requestDone = false; // завершен запрос или нет
...
setTimeout(function(){ // Активируем таймер
requestDone = true; // Который, будет прерывать запрос
}, 5000); // через 5 секунд
И немного меняем условие
Код:
if(xmlh.readyState==4 && !requestDone) callback(xmlh.responseText);
if(requestDone){document.getElementById('out').innerHTML='timeout';}// если запрос прерван вывести timeout
Если, что-то не получилось, вы можете скачать рабочий пример.