XHR-XMLHttpRequest简介(ZT)

XMLHttpRequest

XMLHttpRequest是一个函数，用来创建一个http请求。最初XHR是IE通过ActiveX对象实现的。以后各个浏览器都开始支持了。现在流行的AJAX就是通过XMLHttpRequest对象来实现的。总的来说ajax就是不必刷新整个页面而获取新的内容的一种方法。通过ajax我们可以做类似桌面的程序。

AJAX:Asynchronous Javascript and XML.

• Asynchronous，向服务器发个请求，并不用等待返回。但是它可以做其他的事情并且通过一个事件来得知有一个相应返回。
• Javascript,我们通过javascript来创建一个XHR对象。
• XML，因为最初的开发人员都是用XHR请求一个XML文档。把它作为数据返回到页面上。现在比较流行用JSON的格式。

用XHR非常简单只需要两个步骤

1. 发出一个请求，创建一个XHR对象，并且给它一个监听器。
2. 处理响应，事件的监听器能得知响应的返回。这样代码就能处理这个响应了。

发送一个请求

为了用于演示，以下的代码在各个浏览器可能不太一样。

第一步创建一个XHR对象

var xhr = new XMLHttpRequest();

var xhr = new XMLHttpRequest();

第二步给readystatechange添加一个监听器。

xhr.onreadystatechange = myCallback;

xhr.onreadystatechange = myCallback;

第三步调用XHR对象的open方法

xhr.open('GET', 'somefile.txt', true);

xhr.open('GET', 'somefile.txt', true);

第一个参数是HTTP请求的类型，一般都是post和get。如果不需要向服务端发送大量的数据可以用get。不然的话就用post。第二个参数是请求的url。这个例子中是个相同目录下的somefile.txt文件。最后一个参数指定是否为异步。

第四步发送一个请求。

xhr.send('');

xhr.send('');

这个方法，可以向服务端发送数据。对于GET请求，是个空字符串。对于post请求它是个字符串 key=value&key2=value2

 

处理请求

我们已经给readystatechange加了一个监听器了。什么事ready state，它是怎样改变的呢？

XHR有个属性叫做readyState.它每次变化都会去执行readystatechange事件。

readyState属性的值如下

• 0-uninitialized
• 1-loading
• 2-loaded
• 3-interactive
• 4-complete

当readyState的值为4的时候，也就是response返回了。在上个例子的myCallback函数中，在确认readyState值为4的之后，还要确认HTTP请求的status code(状态码).如请求了一个不存在的URL，http的状态码为404.如果状态码是200就说明是正确的了。所以，myCallback函数中会检查这个状态码。我们可以用过XHR的status属性来获取状态码。

 

所以如果readyState为4，http状态码为200，你就可以通过XHR的responseText属性访问请求URL的内容了。

具体看代码

function myCallback() {
  if (xhr.readyState < 4) {
    return; // 还没有返回
  }
  if (xhr.status !== 200) {
    alert('Error!'); // HTTP状态码错误。
    return;
  }
  //  查看返回的内容。
  alert(xhr.responseText);
}

function myCallback() {
  if (xhr.readyState < 4) {
    return; // 还没有返回
  }
  if (xhr.status !== 200) {
    alert('Error!'); // HTTP状态码错误。
    return;
  }
  //  查看返回的内容。
  alert(xhr.responseText);
}

 通过xhr.responseText。你就可以获取请求URL内容，并且可以把它添加到当前的页面中了。

 

在IE浏览器中创建XHR对象

因为在IE中，是用ActiveX来创建XHR对象的。但是各个IE浏览器版本之间也有所不同。

因此如果要跨浏览器创建XHR对象，代码如下

var ids = ['MSXML2.XMLHTTP.3.0',
           'MSXML2.XMLHTTP',
           'Microsoft.XMLHTTP'];

var xhr;
if (typeof window.XMLHttpRequest === 'function') {
  xhr = new XMLHttpRequest();
} else {
  for (var i = 0; i < ids.length; i++) {
    try {
      xhr = new ActiveXObject(ids[i]);
      break;
    } catch (e){}
  }
}

var ids = ['MSXML2.XMLHTTP.3.0',
           'MSXML2.XMLHTTP',
           'Microsoft.XMLHTTP'];
           
var xhr;
if (typeof window.XMLHttpRequest === 'function') {
  xhr = new XMLHttpRequest();
} else {
  for (var i = 0; i < ids.length; i++) {
    try {
      xhr = new ActiveXObject(ids[i]);
      break;
    } catch (e){}
  } 
}

 来解释下上面的程序。首先这个ids数组存放着三个不同的ActiveX的ID。用来解决IE浏览器版本的问题。

 然后在检查window.XMLHttpRequest是否是个合法的函数。如果支持说明浏览器支持XMLHttpRequest(一般firefox,Safari,Opera都支持)。

 

关于异步

现在我们知道了怎样创建一个XHR以及处理响应。如果发出两个异步请求的话会怎么样呢？如果第二个响应在第一个响应之前返回呢？

 

在上个例子中XHR是个全局的对象myCallBack函数依赖于全局的XHR对象。如何避免用全局的变量呢，那就把回调函数封装为闭包。看下代码

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = (function(myxhr){
  return function(){myCallback(myxhr);}
})(xhr);
xhr.open('GET', 'somefile.txt', true);
xhr.send('');

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = (function(myxhr){
  return function(){myCallback(myxhr);}
})(xhr);
xhr.open('GET', 'somefile.txt', true);
xhr.send('');

 这个例子中，myCallback函数接收了XHR对象，就不需要访问全局的XHR了。

 

关于XML

虽然JSON已经明显要比XML流行的多，但是XML仍然是一个好的选择。如果是XML文档，我们可以用responseXML来访问一个XML文档。这样返回的内容就可以用DOM解析的方式来读取了。如getElementsByTagName()等等。