AJAX技术简介

AJAX技术简介

知识点：

1、基本概念

AJAX ——A synchronous J avaScript a nd X ML

异步的Javascript和XML

传统的WEB模型：同步模型——必须是一次请求，一次响应。

每次请求服务器（地址栏输入，点击超链接，提交表单），页面都会刷新。

传统的WEB模型——同步模型——缺点：

由于浏览器在向服务器发出请求之后，必须等待服务器给响应，有可能页面成为一片空白，客户体验不好。

由于每次都要刷新整个页面，导致服务器的网络带宽被浪费。

AJAX技术的WEB模型：异步模型——可以连续发出多个请求给服务器，在随后

不确定的时间里响应回来。

我们有了一种新的请求服务器的方法（以前传统的浏览器请求服务器的方式：地址栏输入、点击超链接、提交表单），通过下图的Ajax Engine（引擎）。

我们可以通过AJAX引擎发出多个请求，然后可以接收服务器的响应。

此时可以不必刷新整个浏览器页面，就能更新页面的部分内容。

AJAX技术优势：

1、传统模式每次请求页面都会刷新，这样比较占用服务器网络带宽。

AJAX模式可以实现局部刷新，大大节约服务器网络带宽。

2、AJAX模式能很好的改善客户体验。

2、X MLHttpRequest使用

Ajax Engine在浏览器中是一个对象，它的类型是：XMLHttpRequest

1、创建XMLHttpRequest对象（它在不同浏览器中，创建方式不一样的；但是使用上是一样的）

方法属性

open()onreadystatechange

setRequestHeader()status

send()readyState

getResponseHeader()statusText

getAllResponseHeaders()responseText responseXML responseBody responseStream

open初始化HTTP请求参数,语法(method, url, async, username, password)|method 指定请求方式,一般是[GET、POST]不区分大小写; url指定请求地址,大多数浏览器都限制在同域下[要求url与请求页面具有相同的主机名和端口],可以为绝对地址也可以为相对地址; async指定请求是异步还是同步,默认是异步[true]则通常许指定一个onreadystatechange句柄[用于异步回调],同步则指定为 [false]; username 和 password 参数是可选的[及在请求的url 需要授权时填写];

setRequestHeader单独指定请求的某个http头,语法

(headerStr,valueStr)|headerStr指定头名称,如果存在则覆盖 valueStr指定值[此方法必须在open方法后调用]

send发送请求到http服务器并接收回应,语法(varBody)|指定请求中发送的数据;此方法的同步或异步方式取决于open方法中的async参数,如果async == False,此方法将会等待请求完成或者超时时才会返回;如果async == True，此方法将立即返回。

getAllResponseHeaders获取响应的所有http头,语法()|每个http头名称和值用冒号分割，并以\r\n结束。当send方法完成后才可调用该方法。

getResponseHeader从响应信息中获取指定的http头,语法

(headerStr)|headerStr指定头名称,当send方法成功后才可调用该方法;

onreadystatechange当readyState属性改变时调用该属性指定的方法

status2**：操作成功收到，分析、接受[200常用] |4**：客户端请求错误 |5**：服务器响应错误

statusTextstatusText属性和status属性的功能基本相同．他们的区别在于status返回的是http状态码[数字形式]; 而statusText返回的是以文本形式返回http状态信息.比如在请求一个不存在的网页时status返回404, 而statusText则返回Not Found readyState

0 未初始化还没有调用send()方法

1 载入已调用send()方法，正在发送请求

2 载入完成send()方法执行完成，已经接收到全部响应内容

3 交互正在解析响应内容

4 完成响应内容解析完成，可以在客户端调用了

responseText_responseXML_responseBody_responseStream

responseText 将响应信息作为字符串返回;XMLHTTP默认将响应数据的编码定为UTF-8;

responseXML 将响应信息格式化为Xml Document对象并返回;如果响应数据不是有效的XML文档，此属性本身不返回XMLDOMParseError，可以通过处理过的DOMDocument对象获取错误信息

responseBody 以unsigned array格式表示直接从服务器返回的未经解码的二进制数据

responseStream 以Ado Stream对象的形式返回响应信息

最后还有一个abort方法，用于取消当前请求.

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencode d");