Ajax及传统Ajax详解

Ajax全称是“Asynchronous JavaScript and XML”（异步JavaScript和XML），它并不是指一种单一的技术，而是有机的利用了一系列交互式网页应用相关的技术所形成的结合体。它的出现，解开了无刷新更新页面的新时代，并有代替传统Web方式和通过隐藏框架来进行一部提交的优势，是Web开发应用的一个里程碑。

 

一、Aja的优势和不足

1、优势

不需要插件支持：不需要任何浏览器插件，就可以被绝大多数主流浏览器所支持，用户只需要允许JavaScript在浏览器上执行即可。

优秀的用户体验：不需要刷新整个页面前提下更新数据，这使得Web应用程序能更为迅速地回应用户操作。

提高Web程序的性能：与传统模式相比，Ajax模式在性能上最大区别就在于传输数据的方式，在传统模式中，数据提交时通过表单（Form）来实现，而数据获取是靠全页面刷新获取整页的内容。而Ajax模式只是通过XMLHttpRequest对象想服务器端提交希望提交的数据，即按需发送。

减轻服务器和宽带的负担：Ajax的工作原理相当于在用户和服务器中间加了一个中间层，使用户操作与服务器响应异步化，它在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源处理，减轻服务器和宽带的负担。

 

2、不足

浏览器对XMLHttprequest对象的支持度不足

破坏浏览器前进、后退按钮的正常功能

对搜索引擎的支持不足

开发和调试工具的缺乏

 

二、Ajax的XMLHttprequest对象

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键——发送一部请求、截杀偶相应及执行回调都是通过它来完成的。XMLHttprequest对象最早是在IE ActiveX组件中被引入的，之后各大浏览器厂商都以JavaScript内置对象的方法实现XMLHttpRequest对象。

 

三、编写一个Ajax的例子

1、传统Ajax的例子，

 

首先在前台页面中书写HTML代码，如下：

<input type="button" value="Ajax提交" onclick ="Ajax()" />

<divid="restText"></div>

 

<button>按钮用来触发Ajax，id为resText的元素用来显示从服务器返回的HTML文本。

 

完成Ajax()函数，实现如下：

1. 定义一个函数，通过该函数来异步获取信息，代码如下：、

function Ajax（）{

var xmlHttpReq = null; //声明对象转入XMLHttpRequest对象；

if（window.ActiveXObject){//IE5\6以ActiveXObject的方式引入XMLHttpRequest对象的

xmlHttpReq =newActive XObject（“microsoft.XMLHTTP”）；

}else if（window.XMLHttpRequest){

xmlHttpRequest =new XMLHttpRequest（）；

}

 

 

}

 

PS：IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest对象的，而其他浏览器的XMLHttpRequest对象都是window对象。

实例化成功后，是哦那个open（）方法初始化XMLRequest对象，指定HTTP方法和奥受那个的服务器URL，代码如下：

xmlHttpReq.open("GET","test.php:,true);//调用open（）方法并次奥你个异步方式

默认情况下使用XMLHttpRequest对象发送的HTTP请求时异步进行的，但是可以显式地把async参数设置为true，如上面代码所示：

 

2）因为要做异步调用，所以需要注册一个XMLHttpRequest对象将调用的回调事件处理器当它的readyState值改变时调用。当readyState值被改变时会激发一个readystatechange事件，可以受那个onreadystatechange属性来注册该回调事件处理器，代码如下：

xmlHttpReq.onreadystatechange=RequestCallBack；//设置回调函数

3）是哦那个send（）方法发送该请求，inwei这个请求是哦给你的是HTTP的GET方式，所以可以在不指定参数或是哦给你null参数的情况下调用send（）方法，代码如下：

xmlHttpReq.send(null);//因为使用GET方式提交，所以使用null作为参数调用

当请求状态改变时，XMLHttpRequest对象调用onredystatechange属性注册的事件处理器。因此在处理该响应之前，事件处理器应该首先检查readyState的值和HTTP状态，当请求完成加载（readyState值）为4的时候，并且响应已经成功（HTTP状态值为200）时，就可以调用javaScript函数处理该响应，代码如下：

function RequestCallBack（）{

if（xmlHttpReq.readyState== 4){

if(xmlHttpReq.status ==200){

//将xmlHttpReq.responseText的值赋予id为restTest的元素

document.getElementById("resTxt").innerHTML=xmlHttpReq.reponseText;

 

}

}

 

}

 

这样如果单机Ajax提交后发现页面叔叔给你出现了HelloAjax，那么久完成了第一个Ajax调用。