ajax

Ajax( Asynchronous JavaScript and XML ) 是 一种创建互动式网页应用的网页开发技术 。 根据 Ajax 提出者 Jesse James Garrett 建议 ，它：

• 使用XHTML+CSS 来表示资讯；
• 使用JavaScript 操作DOM （Document Object Model ）进行动态显示及互动；
• 使用XML 和XSLT 进行资料交换及相关操作；
• 使用XMLHttpRequest 物件与Web 伺服器进行非同步资料交换；
• 使用JavaScript 将所有的東西连接在一起。
• 使用SOAP 以XML 的格式来传送方法名和方法参数。

Ajax 利用JavaScript 操作DOM 达到无刷新更改页面数据，让程序web 程序接近桌面应用程序，提升客户体验。其主要利用了浏览器的内置对象—XMLHttpRequest 。

下面是一个简单的Ajax 例子，用来测试用户名是否被占用, 整个过程中页面无刷新。（以下工程以J2EE 为例，代码仅为关键部分，不包括全部）

1. Jsp 页面( 利用XMLHttpRequest ）提交用户名到servlet
2. servlet 验证用户名是否被占用, 然后将结果返回到Jsp 页面
3. Jsp 页面显示验证结果

 

1         login.jsp 页面

< script type = "text/javascript"   src = "ajax.js" ></ script >

 

< style type = "text/css" >

.warning {

       border :   #efd78b 1px solid ;

       width : 300px ;

       height : 20px ;

              background-color : #fffce3 ;

              font-size : 12px ;

              padding-left : 15px ;

              line-height : 19px ;

              color : #f00 ;

              display : none ; 

       }

</ style >

 

 

 

< div id = "used" class = "warning" > 用户名已被占用! </ div >

< div id = "unused" class = "warning" > 用户名可以使用! </ div >

< div >

请输入用户名: < input type = "text" name = "loginName" id = "loginName" >

< input type = "button" value = " 是否被占用" onclick = "check('loginName')" >

</ div >

 

2         ajax.js 文件

// 声明XMLHttpRequest 全局变量

var oXmlHttpRequest= null ;

 

 

/**

  * 创建XMLHttpRequest 对象

  * @return {}   XMLHttpRequest 对象

  */

function createXMLHttpRequest(){

      

       if ( typeof XMLHttpRequest != "undefined" ){

              //     非IE 浏览器

              return new XMLHttpRequest();

       } else {

              //     IE 浏览器有其自己的ActiveXObject 对象

              if (window.ActiveXObject) {

                     var aVersion = [ "MSXML2.XMLHttp.6.0" ,

                                                "MSXML2.XMLHttp.5.0" ,

                                                "MSXML2.XMLHttp.4.0" ,

                                                "MSXML2.XMLHttp.3.0" ,

                                                "MSXML2.XMLHttp" ,

                                                "Microsoft.XMLHttp" ];

                     for ( var i = 0; i < aVersion.length; i++) {

                            try {

                                   var oXmlHttp = new ActiveXObject(aVersion[i]);

                                   return oXmlHttp;

                            }

                            catch (ex) {

                            }

                     }

              }

       }

       throw new Error( "XMLHttp can't be created!" );

}

 

/**

  * 验证用户名是否被占用

  * @param {} textBoxId   需要验证的数据

  */

function check(textBoxId){

       // 得到页面文本框中的数据

       var value = document.getElementById(textBoxId).value;

       // 要提交给服务器的请求数据串

       var queryString = "operate=checkLoginName&loginName=" +value;

      

       /**********************    无刷新提交请求的主要步骤   BEGIN    **********/

      

       //1. 创建XMLHttpRequest

       oXmlHttpRequest = createXMLHttpRequest();

      

       //2. 设置回调函数

       /**

         * XmlHttpRequest

         *

         * @argument readyState     XMLHttpRequest 对象把一个HTTP 请求

*                                       发送到服务器时将经历若干种状态 ，状态值从0~4

         *

         * @argument status     这个status 属性描述了HTTP 状态代码。

         *                                仅当readyState 值为3( 正在接收中) 或4( 已加载) 时，这个属性才可用。

         *

         * @event onreadystatechange    无论readyState 值何时发生改变，

*                                              XMLHttpRequest 对象都会激发这个事件

         */

       oXmlHttpRequest.onreadystatechange= function (){

              //readyState==4 时, 说明服务器做出的响应已经加载

              if (oXmlHttpRequest.readyState == 4){

                     //HTTP 状态值200, 请求成功

                     if (oXmlHttpRequest.status == 200){

                            callBack(); // 调用业务

                     }

              }

       };

      

       //3. 初始化XMLHttpRequest 组件

       oXmlHttpRequest.open( "GET" , "LoginServ.do?" +queryString);

       //4. 发送请求

       oXmlHttpRequest.send();

      

       /**********************    无刷新提交请求的主要步骤   END    ************/

}

 

 

/**

  * 回调函数, 当服务器返回响应的时候, 调用该函数处理结果

  */

function callBack(){

       //     客户端接收到的HTTP 响应的文本内容

       var result = oXmlHttpRequest.responseText;

      

       //     jsp 页面的信息提示层( 用户名已占用)

       var oDivUsed = document.getElementById( "used" );

       oDivUsed .style.display = "none" ;

       //     jsp 页面的信息提示层( 用户名可以使用)

       var oDivUnused = document.getElementById( "unused" );

       oDivUnused.style.display = "none" ;

      

       //     根据返回结果, 显示用户名是否占用的提示信息

       if (result.indexOf( "true" ) != -1){

              oDivUsed.style.display = "block" ;

       } else {

              oDivUnused.style.display = "block" ;

       }

      

}

 

 

 

 

 

3         servlet.java 文件(doGet 方法中的代码)

PrintWriter out = response.getWriter();

      

// 得到需要执行的业务名称

String operate = request.getParameter( "operate" );

             

// 检查用户名

if (operate.equals( "checkLoginName" )){

       // 得到提交的用户名

       String loginName = request.getParameter( "loginName" );

       boolean result = false ;

       if (loginName.equals( "admin" )){

              result = true ;

       }

       out.print(result);

}

 

这写文件编写完之后, 配置到服务器上运行，就可以体验到Ajax 带来的提交数据无刷新更改页面的效果了。

 

原理 :

1 、当页面调用check( textBoxId ) 函数时, 调用 createXMLHttpRequest() 函数来 创建XMLHttpRequest 对象。

2 、为XMLHttpRequest 对象的onreadystatechange 事件设置回调函数。

3 、然后XMLHttpRequest 对象调用其open() 方法进行初始化。

4 、初始化完成后，XMLHttpRequest 调用其send() 方法将请求发送，同时ReadyState 属性值开始从1 变化至4 ，每当ReadyState 之变化时就会引发onreadystatechange 事件，我们就在被引发的这个事件中设置回调函数callBack() 来控制页面元素的显示和隐藏。

5 、在onreadystatechange 事件中我们判断ReadyState 属性的值，当其为4 时说明服务器响应已经加载成功。

6 、然后判断status 属性的值，这个值是HTTP 状态值，当它为200 时，说明没有错误，响应成功。

7 、调用callBank() 函数。

8 、 responseText 属性里存放的是返回的文本信息，我们可以根据此信息进行相关的操作，例如显示或隐藏某些页面元素。

注：有关于XMLHttpRequest 对象，具体请参阅其他文档，本文不予详细介绍。