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

2012-04-18 10:03:01
《研磨struts2》第十四章对Ajax的支持之 14.1 Ajax基础
浏览(4961)|(0) 交流分类：Java|笔记分类: 研磨struts2

14.1 Ajax基础概述

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

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

Ajax的核心技术包括：

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

对象

这里简单的介绍一下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对象的方法

示例

虽然不详细去讲述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：运行测试一下

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