ajax的基础（一）—— HttpRequest()

Ajax技术的核心就是XMLHttpRequest对象（XHR）

Ajax技术是无须刷新页面即可以从服务器取得数据

一、XMLHttpRequest对象

IE7+、Firefox、Opera、Chrome、Safari 都支持的原生XHR对象，如下创建即可

var xhr = new XMLHttpRequest()

• 但是都知道低版本的IE浏览器是不想面对的，那么我们要兼容早期的IE，该如何处理？
• IE5是第一款引入XHR对象的浏览器，是通过MSXML库中的一个ActiveX对象实现的。
• 在IE中有三个不同版本的XHR对象，MSXML2.XMLHttp.6.0、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp

function createXHR() {
    // 判断原生XHR对象是否存在
    if (typeof XMLHttpRequest != "undefined") {
        return new XMLHttpRequest()
    } else if (typeof ActiveXObject != "undefined") { // 判断ActiveX对象是否存在
        // callee 是 arguments 对象的一个属性。它可以用于引用该函数的函数体内当前正在执行的函数。
        if (typeof arguments.callee.activeXString != "string") {
            // 版本数组
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"]
            var i, len
            // 查找IE中MSXML库中最新版本
            for (i = 0, len = versions, length; i < len; i++) {
                try {
                    // new 一个实例，若成功，则使用当前版本的versions[i]
                    new ActiveXObject(versions[i])
                    arguments.callee.activeXString = versions[i]
                    break
                } catch (ex) {
                    //跳过
                }
            }
        }
        // 创建当前IE中最新版本的XHR对象
        return new ActiveXObject(arguments.callee.activeXString)
    } else {
        throw new Error('No XHR object available.')
    }
}

//创建xhr对象
var xhr = createXHR()

二、XHR的用法

xhr.open()方法； 接受3个参数：请求类型(get、post)、请求的URL路径、表示是否异步发送请求的布尔值

xhr.open('get',localost:3000/userlist,false)

• 启动一个请求备发送，但open()方法并不会真的发送，要发送特定请求，需要send()方法

xhr.send()  接受一个参数，作为请求主体发送的数据。若不需要发送数据，则传入null

xhr.send(null)

• 调用send()之后，请求就会被分派到服务器；收到响应后，响应的数据会自动填充XHR对象的属性，如下：

responseText：作为响应主体被返回的文本

responseXML：

status：响应的HTTP状态

statusText：HTTP的状态说明

• 接收到响应后应该判断响应状态，再执行后续操作

xhr.open('get', 'localhot:3000/user')
xhr.send(null)
if ((xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)) {
    alert(xhr.responseText)
} else {
    alert('request was unsuccessful:' + xhr.status)
}

XHR对象的 readyState 属性

0：未初始化，即尚未调用open()方法。

1：启动，即已经调用open()方法，但尚未调用send()方法。

2：发送，即已经调用send()方法，但尚未接收到响应。

3：接收，即已经接收到部分响应数据。

4：完成，即已经接收到全部响应数据，而且已经可以在客户端使用。

• 可以用readystatechang事件监听readyState属性值的变化

var xhr = createXHR()
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)) {
            alert(xhr.responseText)
        } else {
            alert('request was unsuccessful:' + xhr.status)
        }
    }
}

xhr.open('get','localhot:3000/users',true)
xhr.send(null)

• 在接收到响应之前还可以调用abort()方法来取消异步请求

xhr.abort()

• 调用此方法后，XHR对象会停止触发事件，也不再允许访问任何与响应有关的对象属性。

三、HTTP头部信息

• 每个http请求和响应都会带有相应的头部信息；

Accept：

Accept-Charset：

Accept-Encoding：

Accept-Language：

Connection：

Cookie：

Host：

Referer：

User-Agent：

• XHR也提供了操作这两种头部信息的方法；

    setRequestHeader()方法可以设置自定义的请求头信息；接收两个参数：头部字段的名称和头部字段的值的

var xhr = createXHR()
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)) {
            alert(xhr.responseText)
        } else {
            alert('request was unsuccessful:' + xhr.status)
        }
    }
}

xhr.open('get','user/user?name=zs',true)
// 建议使用自定义的头部字段名称，不要使用浏览器注册发送的字段名称，否则可能影响服务器的响应
xhr.setRequestHeader('myHeader','Myvalue')
xhr.send(null)

  getResponseHeader()方法可以获取响应头部信息；接受一个参数：头部字段名称

var myHeader = xhr.getResponseHeader('MyHeader')

 getAllResponseHeaders()方法会取得一个包含所有头部信息的长字符串

var allHeaders = xhr.getAllResponseHeades()

四、get请求

• get请求是最常见的请求类型，常用于向服务器查询某些信息；可以将查询参数追加到URL的末尾，发给服务器
• 而查询参数的格式是有要求的，如  localhost:3000/user?name=zs&age=18
• 可以使用encodeURLComponent对参数进行编码，可以确保参数格式良好，可靠的用于XHR对象

function addURLParam(url, name, value) {
    url += (url.indexOf('?') == -1 ? '?' : '&')
    url += encodeURIComponent(name) + '=' + encodeURIComponent(value)
    return url
}

var url = 'localhost:3000/user'
    // 添加参数
url = addURLParam(url, 'name', 'zs')
url = addURLParam(url, 'book', 'JavaScript')

xhr.open('get', url)

五、post请求

• post 请求通常用于向服务器发送应被保存的数据
• post 请求把数据作为请求的主体进行提交

function submitData() {
    var xhr = createXHR()
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)) {
                alert(xhr.responseText)
            } else {
                alert('request was unsuccessful:' + xhr.status)
            }
        }
    }

    xhr.open('post', '/user', true)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 获取表单数据
    var userFrom = document.getElementById('userInfo')
    // serialize处理数据格式 
    xhr.send(serialize(userFrom))
}