Ajax手写代码应知应会

一、什么是Ajax？

Ajax是几个单词首字母的缩写：Asynchronous(异步的)Javascript And Xml。它不是一种全新的技术，而是整合了几种现有的技术：Javascript、XML和CSS

我们通过Javascript的XMLHttpRequest对象完成发送请求到服务器并获得返回结果的任务，然后用js更新局部的网页，xml一般用于请求数据和响应数据的封装，CSS用于美化页面样式

二、传统的web开发技术和Ajax技术有什么不同？

无论使用哪种开发技术，流程都是先由客户端发送HTTP请求，然后由服务器对请求生成响应，二者存在很多差异

1、  发送请求方式不同：传统web应用通过提交表单方式发送请求，而Ajax技术通过javascript的XMLHttpRequest对象发送请求

2、  服务器响应不同：传统web应用服务器的响应是一个完整的页面，而采用Ajax技术后，服务器响应只是需要的数据

3、  客户端处理的响应方式不同：传统的web应用发送请求后，浏览器将等待服务器响应完成后重新加载整个页面，而采用Ajax技术后，浏览器不再等待请求的响应，而只是动态更新页面中需要更新的部分

三、XmlHttpRequest的常用方法

1、Open（method，URL，async）：建立于服务器的连接，method参数指定请求的HTTP方法；URL参数指定请求的地址；async参数指定是否使用异步请求，其值为true或false[Firefox中无响应]

2、send(content)：发送请求，content参数指定请求的参数

3、setRequestHeader(header,value)：设置请求的头信息

经验：当XMLHttpRequest的send（）方法不配置参数，即xmlHttpRequest.send()时，在IE中能够正常运行，但在Firefox中却不能，所以建议最好加上null

四、XmlHttpRequest的常用属性

1、onreadystatechange：指定XMLHttpRequest对象的回调函数。onreadystatechange属性的作用与文本框的onblur等属性一样，是事件处理属性，即当XmlHttpRequest的状态发生改变时，XmlHttpRequest对象都会触发onreadystatechange所指定的函数

2、readyState：XmlHttpRequest的状态信息。

有5种状态：

u       0：XmlHttpRequest对象没有完成初始化，此时已经创建一个XmlHttpRequest对象，但是还没有初始化；

u       1：XmlHttpRequest对象开始发送请求，此时代码已经调用open()方法并且XmlHttpRequest已经准备好把一个请求发送到服务器；

u       2：XmlHttpRequest对象的请求发送完成，此时已经通过send方法把一个请求发送到服务器端，但是还没有收到一个响应

u       3：XmlHttpRequest对象开始读取响应；此时已经接收到HTTP响应头部信息，但是消息提部分还没有完全接收结束

u       4：XmlHttpRequest对象读取响应结束，此时响应已经被完全接收

3、  status：HTTP的状态码。仅当readyState的值为3或4时，status属性才可用

HTTP常用的状态码及其含义如下：

200：服务器响应正常

400：开始找到请求的资源

403：没有访问权限

404：访问的资源不存在

500：服务器内部错误

4、  responseText：获得响应的文本内容

注意：当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3时，响应中包含还未完成的响应信息。当readyState为4时，responseText包含完整的响应信息

5、  responseXML：获得响应的XML文档对象

注意：如果readyState的值不为4，那么responseXML的值为null。当responseXML接收完整的响应时，如果Conent-Type指定的MIME类型不包含text/xml或application/xml，或以+xml结尾之一的MIME类型，那么responseXML的值为null。

五、使用Ajax技术实现异步交互的步骤如下：

       1、创建XmlHttpRequest对象

       2、通过XmlHttpRequest对象设置请求信息

       3、向服务器发送请求

       4、创建回调函数，根据响应状态动态更新页面