Ajax技术

Ajax技术

Ajax包含：

1.异步数据获取技术：使用XMLHttpRequest

2.基于标准的表示技术：使用XHTML和CSS

3.动态显示和交互技术：使用Document Object Model（文档对象模型）

4.数据互换和交互技术：使用XML和XSLT

5.JavaScript融合以上技术

 

Ajax包含的问题：

1.安全问题

2.性能问题

a.使用局部变量而不是全局变量

b.优化for循环

c.尽量少用eval，因为每次使用eval都要花费大量时间

d.将DOM节点附加到文档上去

e.减少点号（.）操作符的使用

3.浏览器的兼容问题，因为不同的浏览器提供创建XMLHttpRequest的方式是不同的

 

XMLHttpRequest：

1.创建XMLHttpRequest对象

var xmlhttp = new XMLHttpRequest();   //大部分非IE浏览器创建方法

验证需要用一个xmlhttp变量和多次创建，不成功为false，成功则xmlhttp不为false

 

2.XMLHttpRequest对象方法：

（1）open（method，url，async）

（2）abort()

（3）getAllResponseHeaders()

（4）setRequestHeader（Header，value）

（5）send（String/null）

（6）setRequestHeader()

（7）getResponseHeader()

 

3.XMLhttpRequest对象属性：

（1）readyState HTTP请求状态 属性从0到4

未初始化-->服务器连接已建立-->请求已接收-->请求处理中-->请求已完成，响应已就绪

（2）responseText：服务器当前为止接收到的响应体（不包括头部），如果还没有接收到数据就是空字符串。如果服务器的响应不是XML的话，建议使用这个属性，可以返回字符串形式的响应。

（3）responseXML：对请求的响应，解析为XML并作为Document对象返回，如果来服务器的响应是XML，而且需要作为XML进行解析，此时需要使用该属性。

status：服务器返回的HTTP状态码。。

（4）statusText：此属性用名称而不是数字指定了请求的HTTP状态代码。

XMLHttpRequest对象的事件句柄函数：

onreadystatechange事件规定当readyState等于4且状态为200时，表示响应已经就绪。

xmlhttp.onreadystatechange=function() {

if(xmlhttp.teadystate==4 && xmlhttp,status==200) {

document.getElementByID(“myID”).innerHTML = xmlhttp.responseText;

}

}

当有多个Ajax任务时，我们应该为创建的XMLHttpRequest对象编写一个标准的函数，并为每个Ajax任务调用函数callback，函数callback调用包含URL以及发生onreadystatechange事件时执行的任务。

 

与服务器通信——发送请求和处理响应：

发送请求的四个步骤：

1.初始化XMLHttpRequest对象

2.为XMLHttpRequest对象指定一个返回结果处理函数（即回调函数），对于返回的结果进行处理。

3.创建和服务器的一个连接，需要指定发送请求的方式和是否采用异步的方法发送请求。

4.向服务器发送请求。