ajax技术在2005年的时候就开始流行起来,这种技术能给用户带来更好的浏览体验,它开启了web2.0时代,现在许多的网站几乎都使用了ajax技术。

首先我们简单对ajax作一个介绍,ajax是什么?ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的缩写。在Ajax之前,Web站点强制用户必须提交/等待/重新显示,用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力,从而使用户从请求/响应的循环中解脱出来。借助于Ajax技术,可以在用户点击按钮时,向服务器发出异步请求,以执行更新或查询数据库。当请求返回时,就可以使用JavaScript和CSS来相应地更新页面,而不是刷新整个页面。最重要的是,用户甚至不知道浏览器正在与服务器通信,Web站点看起来就像是即时响应的。

 

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应。

 

下面是一个ajax的简单例子,这个例子主要是模拟一下在各大网站或论坛使用的注册时检测用户名是否被占用的问题,当注册用户名被占用,在不刷新页面的情况下给出“该用户名被占用,请另选一个用户名”的提示,没有被占用就给出“该用户名可以注册”的提示。

 

按照如下的步骤进行:

1、编写一个html页面,在这个页面中有一个表单,但我们的表单没有提交按钮,当用户填写了“用户名”之后,在用户名之后会自动显示该用户名是否被占用。下面是该html页面的完整代码:register.html

 


<html>
  <head>
	  <script language="javascript">
	  	var xmlHttp = null ;
       function showHint(str) {
         if (str.length==0) { 
           document.getElementById("txtHint").innerHTML="";
           return;
         }
         xmlHttp = GetXmlHttpObject();
         if (xmlHttp==null) {
           alert ("您的浏览器不支持AJAX!");
           return;
         } 
         xmlHttp.onreadystatechange = stateChanged;
         xmlHttp.open("GET",'gethint.jsp?search=' + str,true);
         xmlHttp.send(null);
       }

       function stateChanged() {
       	 if (xmlHttp.readyState==4) { 
           document.getElementById("txtHint").innerHTML = xmlHttp.responseText; 
          }
       }

       function GetXmlHttpObject() {
         try {
           //Firefox, Opera 8.0+, Safari
           xmlHttp = new XMLHttpRequest();
         } catch (e) {
           //Internet Explorer
           try {
             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
           } catch (e) {
             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
           }
         }
         return xmlHttp;
       }
     </script>
   </head>
   
  <body>
     <form> 
       用户名:
         <input type="text" id="txt1" οnkeyup="showHint(this.value)">
         *: <span id="txtHint"></span></p> 
     </form>
   </body>
</html>

2、编写一个jsp页面,该jsp页面负责处理对用户名是否被占用的检测,在这里为了简单起见,因为只是模拟一 下这个过程,所以没有使用数据库,没有从数据库中去检测用户名,而是使用一个数组,预先在数组中定义一些用户名(要连接数据库原理都一样,就只要查询一遍数据库)。其代码如下:gethint.jsp

<%@ page contentType="text/html;charset=gbk"%>
<%
String[] a = new String[10] ;
a[0]="ylj" ;
a[1]="hnylj" ;
a[2]="wjh" ;
a[3]="yang" ;
a[4]="sheng" ;
a[5]="chen" ;
a[6]="zhang" ;
a[7]="ming" ;
a[8]="liming" ;
a[9]="wuhua" ;

String q = request.getParameter("search") ;
String hint1 = null ;
String hint2 = null ;

if (q.length()>0) {
  for (int i=0;i<a.length;i++) {
  	if (!q.equals(a[i])) {
        hint1 = "该用户名可以注册" ;
    } else {
    	  hint2 = "该用户名被占用,请另选一个用户名" ;
     }
  }
}
if (hint2!=null) 
  out.println(hint2) ;
else
  out.println(hint1) ;
%>

3、在tomcat的webapp目录下建立一个ajax文件夹,在该文件夹下再建立一个WEB-INF文件夹,在这个WEB-INF文件夹下再建立一个web.xml文件,这个文件可以怎么都不配,只需一个schema声明,其代码如下:

 


<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
   version="2.5">

</web-app>


4、将上面编写好的ajax.html文件和time.jsp文件复制到ajax目录下,然后启动tomcat,打开浏览器,在浏览器的地址栏输入:http://localhost:8080/ajax/register.html 即可看到一个表单页面,当我们在填写“用户名”时,在表单后面将自动显示出该用户名是否被占用的信息。

 

这个例子程序非常的简单,旨在模拟一下这个过程,说明一下ajax的原理,初学者可以参考参考。