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()

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