49306956


Post запрос timeout - Пример 2
Автор Сообщение
all__ Не на форуме
Админ
*******

Сообщений: 874
Зарегистрирован: 01.2010
Сообщение: #1
Post запрос timeout - Пример 2
Второй пример показывает работу с 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

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


Прикрепления
.zip  post-text.zip (Размер: 1.6 Кб / Загрузок: 258)

Лучшая благодарность - "Мне нравится", +1 или Like! Вверху страницы.
16.02.2010 17:00
Вебсайт Найти все сообщения
Тема закрыта 


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