JS -- Ajax原理

Ajax：JavaScript and XML，异步JavaScript与XML

在不刷新页面的情况下，更新部分页面内容

为什么请求需要异步：

同步请求，是当使用send()发生请求时，会阻止用户动作，并等待响应；而异步请求，不打扰用户动作

Ajax通信流：

（1）用户活动和时间触发器

（2）客户端发送XHR、iFrame、脚本、图像等给服务器端

（3）服务器端接收请求，做处理，生成XML、JSON等格式的响应

（4）客户端接收响应，使用JavaScript和DOM功能更新部分页面

XMLHttpRequest对象

JavaScript提供了XMLHttpRequest对象，它包括了获取和设置HTTP头的能力，读取和响应代码的能力，处理服务器产生的不同类型的内容的能力

常用属性

属性	描述
readState	指示请求状态
status	从服务器返回回来的HTTP响应状态码
statusText	从服务器返回回来的HTTP响应状态短语
response	容纳来自服务器的响应
responseText	来自服务器的作为字符串的全部响应
responseType	指示响应的字符串的类型
responseXML	服务器的响应将作为XML文档进行解析的Document对象

readyState属性

readyState的值	常量值	描述
0	unsend	已经实例化，但还没有open()
1	opened	已经调用open()，但还没有send()
2	header_receive	调用send()，正在接收头
3	loading	正在接收数据
4	done	所有数据已完成接收，可以查看数据

常用方法

方法	描述
open(method,url [,asynchronous [,user,password] ])	准备发送请求
setRequestHeader(name,value)	添加HTTP头
getResponseHeader(headerName)	指定获取响应的HTTP头
getAllResponseHeaders()	获取响应的所有HTTP头
send(body)	向服务器端发送请求
timeout	指定超时时间，超时则中止请求

常用事件处理

事件处理程序	描述
onreadystatechange	readyState的值发生变化时触发
onload	整个文档成功完成加载时触发
onloadstart	请求开始时触发
onloadend	请求完成后触发，不管是否成功
ontimeout	当在达到timeout指定的值之前，有某些情况阻止完成请求时引发
onerror	网络错误时触发
onabort	请求中止时触发

跨浏览器的XHR包装

var xhr = (window.XMLHttpRequest) 
          ? new XMLHttpRequest()
          : new ActiveXObject("Microsoft.XMLHTTP");

JSON ( JavaScript对象表示法 )

JSON格式中可以使用的值是字符串、数字、对象、数组、true、boolean值、null

JSON.stringify()

将传递进去的对象转化为字符串

JSON.parse()

将传递进去的字符串转化为对象