Ajax —— 一言不合就谈Ajax

Ajax —— 一言不合就谈Ajax

众所周知,Ajax是一种可以不刷新页面即可从服务器取得新数据。为什么它有这样的功能呢?原因是Ajax有一个核心技术叫做XMLHttpRequest,简称XHR,XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。这里值得一提的是别看XMLHttpRequest包含XML,但是Ajax通信与数据格式无关。

首先呢,IE5是第一个引入XHR对象的浏览器,XHR对象是通过MSXML库中的一个ActiveX对象实现的(这个不用管它,知道就行),在IE中可能会遇到三种不同版本的XHR。

然后呢,其他浏览器,IE7+、Firefox、Opera、Chrome、Safari都是支持原生的XHR的。直接通过var xhr = new XMLHttpRequest(),便可得到XHR对象。

最终呢,我们写一个函数,可兼容各种浏览器,来创建XHR对象。

从上面的图中可以看到,(1)检测原生XHR对象是否存在,如果存在,就返回它的实例,(2)如果不存在,就检测ActiveX,(3)如果两种对象都不存在,就抛出一个错误

下面直接通过var xhr = createXHR()在所有浏览器中创建XHR对象了。

好,第一步创建XHR对象就是这么简单,完成了。

我们知道,创建完XHR对象之后,就得向服务器发送请求了,一般比较常用的请求有两种get和post。

使用XHR对象时,要调用的第一个方法open();open函数并不会真正发送请求,只是启动一个请求以备发送。然后通过调用send(),发送到服务器。

由于这次请求是同步的,则JavaScript会等到服务器响应之后,再继续执行,而响应的内容一般包括以下几种
    responseText: 作为响应主题被返回的文本
    responseXML: 一般为XML DOM文档
    status: 响应的HTTP请求
    statusText: HTTP状态的说明

所以,在发送完成后,为接收到响应,应进行状态检测

说完同步,再说说异步请求,因为呢,大多数还是发送异步请求的,才能让JavaScript继续执行而不必去等待响应。这时,就要用到XHR对象的readyState属性了。

只要readyState属性的值由一个值变成另一个值,都会触发一次onreadystatechange事件。当readyState值为4的时候,说明已经接收到全部的响应内容了,可以进行使用了。

到这里呢,Ajax的用法就介绍完了。小伙伴们,是不是很简单呢!

相关文章

IE6是一个非常老旧的网页浏览器,虽然现在很少人再使用它,但...
PHP中的count()函数是用来计算数组或容器中元素的个数。这个...
使用 AJAX(Asynchronous JavaScript and XML)技术可以在不...
Ajax(Asynchronous JavaScript and XML)是一种用于改进网页...
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX,我们可以...
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax...