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()
将传递进去的字符串转化为对象