Слишком много ответов AJAX

Question

Я делаю простой запрос AJAX и регистрирую ответ в консоли JS, используя следующий код. Он работает абсолютно нормально, но меня беспокоит то, что он отбрасывает 3 ответа от сервера (см. Прикрепленное изображение).

Может ли кто-нибудь пролить свет на то, почему это так?

var xmlHttp = newXMLHttpObj(); 

function newXMLHttpObj(){ 
    var xml; 
    if(window.XMLHttpRequest){ 
     xml = new XMLHttpRequest();  
    } else{ 
     xml = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    return xml; 
} 

function ajaxHandler(){ 
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ 
     //handle response 
     var response = xmlHttp.responseXML.documentElement; 
     console.log(response); 
     var name = response.getElementsByTagName("name")[0].firstChild.data; 
     var age = response.getElementsByTagName("age")[0].firstChild.data; 
     ajaxContent.innerHTML = "Name: " + name + "<br />Age: " + age; 
    } else{ 
     setTimeout(ajaxHandler, 1000); 
    } 
} 

function ajaxProcess(){ 
    var ajaxContent = document.getElementById("ajaxContent"); 
    ajaxContent.innerHTML = "loading"; 
    //check server is ready to comunicate 
    if (xmlHttp.readyState == 0 || xmlHttp.readyState == 4){ 
     xmlHttp.open("POST", "/js/test.php", true); 
     xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     xmlHttp.onreadystatechange = ajaxHandler; 
     xmlHttp.send("name=the chuff&age=26"); 
    } else{ 
     setTimeout(ajaxProcess, 1000); //restart ajaxProcess until ready to comunicate 
    } 
} 

Answer 1

Это происходит потому, что ваш поток выглядит следующим образом:

1. объект Запрос не инициализирован и xmlHttp.readyState == 0
2. ajaxHandler является переплетены в качестве обработчика для готового изменения состояния (не матер, что будет являться государством)
3. Запрос инициализирован и отправлен
4. сервера установлено соединение и xmlHttp.readyState == 1
5. Готовые изменения состояния и ajaxHandler называется
6. Поскольку xmlHttp.readyState != 4 новый ajaxHandler вызов планируется после 1s
7. запрос получен и xmlHttp.readyState == 2
8. Готовые изменения состояния и ajaxHandler называется
9. С xmlHttp.readyState != 4 новый ajaxHandler звонок начисляется после 1 с
10. запрос обрабатывается и xmlHttp.readyState == 3
11. Готовые изменения состояния и ajaxHandler называется
12. Поскольку xmlHttp.readyState != 4 новый ajaxHandler вызов планируется после 1s
13. запрос закончен и ответ готов, xmlHttp.readyState == 4
14. Ответ записывается консоль в первый раз
15. 1с передано и запланировано ajaxHandler вызовов вызывается 3 еще tim эс! и ответ записывается на консоль еще 3 раза.

Таким образом, как правило, вы должны увидеть ответ вход в консоль раз, но не все браузеры проходят через все состояния готовности (например, может быть не отдельный готовый состояние 3 и браузер переключается с 2 непосредственно 4) и поэтому вы регистрируете ответ 3 раза.

, если вы хотите, чтобы исправить это, просто не перепланировать ajaxHandler:

function ajaxHandler(){ 
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ 
     //handle response 
     flag = true; 
     var response = xmlHttp.responseXML.documentElement; 
     console.log(response); 
     var name = response.getElementsByTagName("name")[0].firstChild.data; 
     var age = response.getElementsByTagName("age")[0].firstChild.data; 
     ajaxContent.innerHTML = "Name: " + name + "<br />Age: " + age; 
    } 
} 

Наконец, гораздо проще и удобнее взять некоторую библиотеку как JQuery, который будет заботиться обо всем этом штате. http://api.jquery.com/jQuery.ajax/