Ajax及XMLHttpRequest对象的使用

Ajax英文：Asynchronous Javascript And XML（异步JavaScript和XML）。

传统的网页刷新数据需要将整个页面给刷新，但是使用Ajax可以实现无需加载整个页面的情况下刷新局部页面。

Ajax工作原理和XMLHttpRequest对象

Ajax的工作原理就是通过创建XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后通过JavaScript操作DOM来更新页面。其工作原理图为：

因为Ajax是通过创建的XMLHttpRequest对象来进行请求的，所以XMLHttpRequest是Ajax的基础。

XMLRequest对象的属性有：

onreadystatechange：每次状态改变所触发的事件

responseText：从服务器返回的字符串格式的响应数据

responseXML：从服务器返回的XML格式的数据

status：服务器返回的状态码（200、404、304等）

readyStats：对象的状态值。

Ajax请求

Ajax是基于XMLHttpRequest对象来请求的，所以我们要先创建XMLRequest对象。

var xhr = new XMLHttpRequest

如果是IE5或者IE6使用以下代码

var xhr = new ActiveXObject("Microsoft.XMLHTTP")

向服务器发送请求需要用到XMLHttpRequest对象的open()和send()方法。

方法	描述
open(method, url, async)	规定请求的类型，URL以及是否是以异步方式请求 method：请求的类型（post、get） url：请求的URL async：true（异步）或者false（同步）
send(string)	将数据发送到服务器 string：仅用于post请求

方法

描述

open(method, url, async)

规定请求的类型，URL以及是否是以异步方式请求

method：请求的类型（post、get）
url：请求的URL
async：true（异步）或者false（同步）

send(string)

将数据发送到服务器

string：仅用于post请求

然后发送数据

xhr.open('get', '/test', true)
xhr.send()

如果需要发送表单类型的数据需要使用setRequestHeather()添加HTTP头

方法	描述
setResquestHeader(header, value)	向请求中添加HTTP头 header：头名称 value：值

方法

描述

setResquestHeader(header, value)

向请求中添加HTTP头

header：头名称
value：值

例如

var xhr = new XMLHttpRequest
var form = new FormData()
// 向form添加数据
form.append('name', 'hhh')
form.append('age', '18')
form.append('description', 'very cool')

xhr.open('post', '/test', true)
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
xhr.send(form)

Ajax响应

如果我们从服务器收到数据，需要我们将数据显示到页面上。使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById('result').innerText = xhr.responseText
    }
}

这里说明一下readyState的状态码

0：请求初始化
1：服务器连接成功
2：请求以接收
3：请求处理中
4：请求处理完成，返回响应数据