Ajax原理和XmlHttpRequest对象

Ajax相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

 

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。

 

XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。

首先,需要先了解XMLHttpRequest这个对象的属性和方法:

ajax请求实例 java ajax的请求过程_.net

 

 

ajax请求实例 java ajax的请求过程_javascript_02

 

 

下边该我们使用它了,当然这里我也用五步法写出代码来:

第一步:创建XMLHttpRuquest对象,注意各个浏览器是否支持;
第二步:打开与服务器的连接,open(method, url, async);
 第三步:发送请求,GET需要在url后连接参数,若没有参数,则给出null,xmlHttp.send(null)/POST必须设置Content-Type请求头的值为application/x-www-form-urlencoded,否则会忽略请求体。然后使用send来设置请求体内容;
 第四步:接收服务器响应

XMLHttpRequest对象有一个onreadystatechange事件,它会在XMLHttpRequest对象的状态发生变化时被调用。下面介绍一下XMLHttpRequest对象的5种状态:

 0:初始化未完成状态,只是创建了XMLHttpRequest对象,还未调用open()方法;
 1:请求已开始,open()方法已调用,但还没调用send()方法;
 2:请求发送完成状态,send()方法已调用;
 3:开始读取服务器响应;
 4:读取服务器响应结束。
onreadystatechange事件会在状态为1、2、3、4时引发。但通常我们只关心最后一种状态,即读取服务器响应结束时,客户端才会做出改变。我们可以通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态。

其实我们还要关心服务器响应的状态码是否为200,如果服务器响应为404,或500,那么就表示请求失败了。我们可以通过XMLHttpRequest对象的status属性得到服务器的状态码。

最后,我们还需要获取到服务器响应的内容,可以通过XMLHttpRequest对象的responseText得到服务器响应内容。