自从把AJAX学了之后,就是在云里雾里飘着,想总结,却无从下手,就一直拖到现在。最近看DRP,王勇老师简单的讲了AJAX,对这个又是技术又是技巧的东西做了再一次的解,感觉自己稍微理解了一些。现将我现在理解的分享下。
首先什么是AJAX呢?
AJAX简介:
AJAX这个名词最早是由Jesse James Garrett提出的,当时给出的解释是:Asynchronous JavaScript And XML,虽然当时Jesse James Garrett也曾发表文章介绍这个技术,但是真正被人们所熟知的时候还是在Google在Google Labs发布了Google Maps和Google搜索引擎之后。
其实关于AJAX,它是一种创建快速动态网页的一种技术,是几种技术的合成体,这几种技术包括:
基于HTML+CSS的标准的表示;
用(DOM)Document Object Model进行动态显示和交互;
用XMLHttpRequest与服务器进行异步通信;
用JavaScript绑定和处理;
用XML做数据交换 。
正式这这几种技术合成一体,才构成了强大的AJAX,那么AJAX的核心是什么呢?
AJAX的核心对象:XMLHttpRequest对象
XMLHttpRequest对象是JavaScript的一个对象,其实这个对象早在IE5(1995年发布)出现的时候就有了,是将它实现成一个对象——ActiveX,而其他浏览器是将它实现为一个本地的JavaScript对象,正是因为有这些差异,所以在JavaScript中才包含一些逻辑,从而使用Activex技术或者使用本地JavaScript对象技术创建XMLHttpRequest的实例。到底如何创建呢?
创建XMLHttpRequest对象:
var xmlhttp=null; if (window.XMLHttpRequest){ //IE7+,Firefox,Chrome,Opera,Safari xmlhttp=new XMLHttpRequest(); } else{ //IE6,IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }分析:
首先创建全局作用变量xmlhttp来保存XMLHttpRequest,根据不同的浏览器返回的对象的不同,决定实例化对象,Firefox等浏览器调用本地的JavaScript来实例化对象,而IE5,IE6根据ActiveX对象来创建XMLHttpRequest实例。那这个对象的主要方法和属性有哪些呢?
XMLHttpRequest方法与属性:
方法:
分析:
open(method,url,async),建立对服务器的应用,有三个参数,参数1:需要提供提交方式(GET、POST、PUT);参数2:提供所调资源的URL;参数3:指示是同步还是异步的布尔值,默认为true,表示异步。
send(string):string,可选参数,具体向服务器发出请求,如果请求声明为异步,则方法立即返回,否则会等待直到服务器接到响应为止。string,仅用于POST请求。
setRequestHeader(header,value):有两个参数,第一表示设置的首部,第二表示要在首部放置的值。
属性:
了解了XMLHttpRequest的创建、方法、属性后,我们应该怎么使用AJAX去实现一个简单的请求呢?
XMLHttpRequest对象的五步使用法:
1、 建立XMLHttpRequest对象;
2、 注册回调函数 ;
3、 使用open方法和服务器端交互;
4、 设置发送的数据,开始和服务器端交互 ;
5、 在回调函数中判断交互是否结束,响应是否正确,并根据服务器端返回的数据,更新页面内容。
实例:
前台:
<body class="body1" onload="init()"> <form name="userForm" target="_self" id="userForm"> <div align="center"> <hr width="97%" align="center" size=0> <table width="95%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="22%" height="29"> <div align="right"> <font color="#FF0000">*</font>用户代码: </div> </td> <td width="78%"> <input name="userId" type="text" class="text1" id="userId" onblur="validate()"size="10" maxlength="10"> <span id="spanUserId"></span> </td> </tr> <tr> <td height="26"> <div align="right"> <font color="#FF0000">*</font>用户名称: </div> </td> <td> <input name="userName" type="text" class="text1" id="userName" size="20" maxlength="20"> </td> </tr> <tr> <td height="26"> <div align="right"> <font color="#FF0000">*</font>密码: </div> </td> <td> <label> <input name="password" type="password" class="text1" id="password" size="20" maxlength="20"> </label> </td> </tr> </table> </div> </form> </body>
JS:
var xmlHttp; function createXMLHttpRequest(){ //1:创建XMLHttpRequest对象 //IE7+、Firefox等 if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); }else { //IE5、IE6 if(window.ActiveXObject){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } }
function validate() { var field = document.getElementById("userId"); if(trim(field.value).length!=0){ //1:创建ajax核心对象XMLHttpRequest createXMLHttpRequest(); var url="user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime(); //2:注册回调函数,将方法给onredystatechange属性 xmlHttp.onreadystatechange=callback; //3:使用open方法,设置请求方式、url、是否异步 xmlHttp.open("GET",true); //4:将设置信息发送给ajax引擎 xmlHttp.send(null); }else{ document.getElementById("spanUserId").innerHTML=""; } }
function callback(){ //5:在回调函数中判断交互是否结束,响应是否正确,并根据服务器端返回的数据,更新页面内容。 //与服务器交互完成,即Ajax引擎状态成功 if(xmlHttp.readyState==4){ //200表示“HTTP协议状态成功”,404表示“未找到”,500表示“服务器内部错误” if(xmlHttp.status==200){ if(trim(xmlHttp.responseText)!=""){ document.getElementById("spanUserId").innerHTML="<font color='red'>"+xmlHttp.responseText+"</font>"; } else{ document.getElementById("spanUserId").innerHTML=""; } }else{ alert("请求失败,错误码="+ xmlHttp.status); } } }效果如下:
总结:
Ajax,简单来说就是通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面,这其中最关键的一步就是从服务器获得请求数据,实现页面无刷新,在页面内与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。