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对象,首先就是要初始化这个对象,示例代码如下:
- <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,示例代码如下:
- <%@ 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,示例代码如下:
- <%@ 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获取更多内容