JavaScript XMLHttpRequest是什么、怎样完整地执行一次GET请求、怎样检测错误

问题

JavaScript XMLHttpRequest是什么、怎样完整地执行一次GET请求、怎样检测错误

答案

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

　所以我们先从XMLHttpRequest讲起，来看看它的工作原理。

XMLHttpRequest 属性

它的属性有：

• onreadystatechange 每次状态改变所触发事件的事件处理程序。

• responseText 从服务器进程返回数据的字符串形式。

• responseXML 从服务器进程返回的DOM兼容的文档数据对象。

• status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

• status Text 伴随状态码的字符串信息

• readyState 对象状态值

  • 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

  • 1 (初始化) 对象已建立，尚未调用send方法

  • 2 (发送数据) send方法已调用，但是当前的状态及http头未知

  • 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

  • 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据 但是，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest

var xmlhttp;
function loadXMLDoc (url) {
  xmlhttp = null;
  if (windows.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    //For IE5 IE6
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
  }

  if (xmlhttp != null) {
    xmlhttp.onreadystatechange = stateChange;
    xmlhttp.open("GET", url, true)
    xmlhttp.send(null);
  } else {
    alert("不支持XMLHTTP")
  }
}

function stateChange () {
  // 4 'load'
  if (xmlhttp.readState == 4) {
    // 200 'load'
    if (xmlhttp.status == 200) {
      //...
    } else {
      alert("problem retrieving XML data")
    }
  }
}

更多面试题

如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！