javascript-深入理解XMLHttpRequest对象（一）

XMLHttpRequest对象

XMLHttpRequest对象是浏览器提供的向服务器请求和解析响应数据的接口。

XMLHttpRequest Level1（版本1）

XHR对象由IE最早提出，并在之后所有主流浏览器都实现了该对象。最初使用该对象的方式被称作版本1。

function getJSON1 (url, callback) {
     var xhr = new XMLHttpRequest()
     // 请求/响应的当前活动阶段变化时，触发该方法
     xhr.onreadystatechange = function () {
         if (xhr.readyState === 4 && xhr.status === 200) {
             callback(xhr.responseText)
         }
     }
     xhr.open('GET', url)
     xhr.send(null)
 }

 get方式请求接口，必须将参数与url拼接，形成如下格式的字符串
 http://localhost/findByName?name=wujiang&id=1
 open()方法第三个参数默认为异步调用，默认值为true

XMLHttpRequest Level2（版本2）

在XHR得到广泛接受后，W3C将其规范化，并对XHR进行升级、规范，形成了XMLHttpRequest Level2的规范。

function getJSON1 (url, callback) {
     var xhr = new XMLHttpRequest()
     // 请求成功时
     xhr.onload= function () {
         callback(xhr.responseText)
     }
     xhr.open('GET', url)
     xhr.send(null)
 }

设置请求头

function submitData (url, callback) {
    varxhr = new XMLHttpRequest()
    xhr.onload = function () {
        callback(xhr.responseText)
    }
    xhr.open('POST', url, true)
    // 设置请求头，以post表单的方式发送请求，参数格式为'a=1&b=2c=yyy'
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send('name=wujiang&id=1')
}

当以POST方式发送请求时，请求参数必须通过send()方法传递，且请求头必须设置在
open()方法和send()方法之间。如果以表单的方式发送请求，需设置Content-Type
值为'application/x-www-form-urlencoded'，且其数据格式为'a=1&b=2'。
若以json格式发送请求，需设置Content-Type值为'application/json'，
且其数据格式为json字符串，即JSON.Stringify(obj)，obj为javascript对象。

跨浏览器创建XHR对象

// 跨浏览器创建XMLHttpRequest对象
function createXHR () {
    if (typeof XMLHttpRequest !== 'undefined') {
      return new XMLHttpRequest();
    } else if (typeof ActiveXObject !== 'undefined') {
      if (typeof arguments.callee.activeXString !== 'string') {
        var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
          ],
          i, len

        for (i = 0, len = versions.length; i < len; i++) {
          try {
            new ActiveXObject(versions[i])
            arguments.callee.activeXString = versions[i]
            break
          } catch (e) {
          }
        }
      }
      return new ActiveXObject(arguments.callee.activeXString)
    } else {
      throw new Error('No XHR object available.')
    }
}

参考

https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html#event-xhr-load
http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html