Каскадный режим | Линейный режим

***all__*** · 16.02.2010 17:00

Второй пример показывает работу с 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="jSendPOST()" - при отжатии клавиши будет выполняться функция 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

Если, что-то не получилось, вы можете скачать рабочий пример.

Похожие темы
Тема:		Автор	Ответов:	Просмотров:	Посл. сообщение
	Post запрос - Пример 1	all__	40	18 767	25.08.2011 14:54 Посл. сообщение: Гость
	Работа с canvas - простейший пример	all__	0	3 465	12.07.2011 14:30 Посл. сообщение: all__
	Простейший пример DOM (Document Object Model)	all__	52	6 685	16.02.2010 16:33 Посл. сообщение: all__

Каскадный режим \| Линейный режим Post запрос timeout - Пример 2
Автор	Сообщение