《研磨struts2》第十四章对Ajax的支持之 14.1 Ajax基础

14.1 Ajax基础

14.1.1 Ajax概述

Ajax（Asynchronous JavaScript And XML）技术，通常翻译成“异步JavaScript和xml”，它能让应用程序以异步的方式连接到服务器，等待服务器处理后获取返回值，从而实现无需刷新页面就可以与后台通讯的方式。

Ajax技术其实是一个非常老的技术，2000年左右就已经有了，只不过一直没有得到重视，直到Google把这个技术应用到Gmail和Google Maps里面，其异步的功能特性迅速走红，从而引起业界广泛的关注，得到更多的应用。到了web2.0的时代，Ajax成为了web2.0的核心技术之一。

Ajax的核心技术包括：

XMLHttpRequest对象：用来实现异步通讯的组件对象，是Ajax的核心技术
Javascript：Ajax的编程脚本，可以通过Javascript来操作Ajax
Dom（Document Object Model）模型：Javascript通过Dom跟页面进行交互
XML：可扩展标记语言，用来封装交互的数据

虽然xml是Ajax的核心技术之一，但是完全可以不使用xml，而且现在在实际项目开发中，也大有使用JSON来代替xml的趋势。

14.1.2 XMLHttpRequest对象

这里简单的介绍一下Ajax的这个核心对象的基本用法：

1：如何初始化

要使用XMLHttpRequest对象，首先就是要初始化这个对象，示例代码如下：

java代码：

 
    查看 
    复制到剪贴板 
    打印 
   
<script language="javascript">  
    var myReq;    
    function t1(){  
        //对于IE浏览器,第一种方式  
        myReq = new ActiveXObject("Msxml2.XMLHTTP");  
        //对于IE浏览器,第二种方式  
        myReq = new ActiveXObject("Microsoft.XMLHTTP");  
          
        //对于Mozilla浏览器  
        myReq = new XMLHttpRequest();  
    }  
</script>  

2：XMLHttpRequest对象的属性

3：XMLHttpRequest对象的方法

14.1.3 Ajax示例

虽然不详细去讲述Ajax的知识，还是通过一个基本的示例来看看如何使用Ajax技术。更多Ajax的知识，有需要的朋友请参阅相应的Ajax资料。

使用Ajax来实现一个输入校验的功能，用户填写数据，当光标离开输入框后，自动到后台去校验输入是否正确，并给出相应的提示信息。

1：先来实现后台的功能

为了演示的简洁性，直接就在jsp里面实现。功能也很简单，就是判断用户的输入是否重复了，如果不重复，提示用户“输入正确”；如果重复了，提示用户“输入不正确，请重新输入”。

后台文件的名称为server.jsp，示例代码如下：

java代码：

 
    查看 
    复制到剪贴板 
    打印 
   
<%@ page contentType="text/html; charset=gb2312"%>  
<%@ page import="java.util.*"%>  
<head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>  
<%  
    String account = request.getParameter("account");  
      
    //准备已经注册的数据,测试使用  
    Set<String> set = new HashSet<String>();  
    set.add("account1");  
    set.add("account2");  
    set.add("account3");  
      
    if(set.contains(account)){  
        out.print("输入不正确，请重新输入");  
    }else{  
        out.print("输入正确");  
    }         
%>  

2：实现前台页面的功能

在页面上除了简单的输入框之外，就是要实现Ajax的功能，当帐号信息输入完毕，光标离开的时候，提交到后台进行校验。

文件的名称为client.jsp，示例代码如下：

java代码：

 
    查看 
    复制到剪贴板 
    打印 
   
<%@ page contentType="text/html; charset=gb2312"%>  
<head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>  
<script language="javascript">  
    var myRequest;  
    function t1(){  
        //准备向后台传输的数据  
        var account = document.getElementById("account").value;   
        //Ajax  
        myRequest = new ActiveXObject("Msxml2.XMLHTTP");  
        myRequest.onreadystatechange = t2;  
        myRequest.open("GET","server.jsp?account="+account,true);  
        myRequest.send(null);  
    }     
    function t2(){  
        if(myRequest.readyState==4){  
            var ret = myRequest.responseText;             
            //后续处理  
            document.all("myDiv").innerHTML = ret;    
        }  
    }     
</script>  
<form action="" medhot="post">  
    <table>  
        <tr>  
            <td colspan=3 align=center>新用户注册</td>  
        </tr>  
        <tr>  
            <td>用户帐号：</td>  
            <td><input type="text" id="account" name="account" onblur="t1();"><font color=red>*</font></td>  
            <td><div id="myDiv"></div></td>  
        </tr>  
        <tr>  
            <td>用户密码：</td>  
            <td colspan=2><input type="password" id=""password" name="password"></td>  
        </tr>  
        <tr>  
            <td>重复密码：</td>  
            <td colspan=2><input type="password" id=""password2" name="password2"></td>  
        </tr>  
        <tr>  
            <td colspan=3 align=center><input type="submit" value="保存注册信息"></td>  
        </tr>  
    </table>  
</form>  

3：运行测试一下

先输入一个正确的，运行结果如下：

图14.1 Ajax示例一

再来输入一个重复的，比如“account1”之类的，运行结果如下：

图14.2 Ajax示例二

通过上面的示例，大家可以初步体会一下Ajax实现的方式，以及无需刷新页面即可与后台交互的实现。

私塾在线网站原创《研磨struts2》系列

转自请注明出处：【http://sishuok.com/forum/blogPost/list/0/4128.html】

欢迎访问http://sishuok.com获取更多内容