javascript - ajax 在页面加载时被调用 4 次

Question

首先，我沉迷于 jQuery，但我想创建一些无框架且尽可能轻量级的东西，所以我自己 ajaxing。

我有这个代码：

    function ajax(url)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        console.log(xmlhttp.responseText);
    }
   else
        console.log( "error");
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

我在脑海中调用一次：

ajax("url");

但是，我在控制台中看到 3 个“错误”日志，第 4 个是 rsponseText。

任何人都知道为什么会发生这种情况以及如何避免它？我的页面中没有其他脚本。

Answer 1

是的 onreadystatechange 调用每个州.... http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp上的更多信息

试试这个

if (xmlhttp.readyState==4) {
  if(xmlhttp.status==200) {
    console.log(xmlhttp.responseText);
  } 
  else {
     console.log('error');
  }
}

Answer 2

xmlhttp.onreadystatechange=function()

此回调用于超过 readystate 4 和 200。尝试将 xmlhttp.status 添加到您的错误消息中

function ajax(url)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        console.log(xmlhttp.responseText);
    }
   else
        console.log( "error - readyState: "+xmlhttp.readyState);
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

ajax(url)不是不止一次被调用，而是xmlhttp.onreadystatechange被调用。

Answer 3

这不是错误，也不是错误，您看到的是 onready statechange 事件并始终登录 else 块。httpObject 中不仅有成功和失败状态。

请在这里查看

如您所见，有 4 种状态，仅xmlhttp.readyState==4 && xmlhttp.status==200表示实际成功、请求完成且没有服务器错误。

Answer 4

这是因为 readyState 将从 1 变为 4 int（即，在其他浏览器中较小）。

尝试：

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    console.log(xmlhttp.responseText);
   else if(xmlhttp.readyState==4)
        console.log( "error");
}