步步解析Ajax

Ajax是什么?

           Ajax的全称是Asynchronous JavaScript and XML 翻译为异步JavaScript和XML,是指一种创建交互式网页应用的网页开发技术。

Ajax原理： 

    概括的来描述,Ajax是分层思想的体现.它的工作原理相当于在用户和服务器之间加了—个中间层，使得用户操作与服务器响应异步化。这样一来便会把以前的一些服务器负担的工作转移到客户端，利于客户端闲置的处理能力来处理相关请求，减轻服务器的负担.

Ajax实例：

　　Ajax应用的场景非常广泛，而最常用的场景之一是验证用户信息，尤其是用户ID信息，例如，在注册CSDN的时候，如果输入一个用户昵称，而服务器中已经有次用户，当你输完鼠标离开的时候会在后面进行提示：用户名已被占用．下面将从代码的角度来分析此功能的实现的整个过程．

　　Ajax进行异步用户ID验证主要的过程如下：

1　触发相关事件：如onblur()；

2　创建Ajax核心对象：XMLHttpRequest．

3　设置相关参数变量：如请求方式，URL变量（注意缓存问题）和是否异步．

4　通过onreadystatechange方法获取Ajax引擎状态并进行相应的验证．

5　完成验证．

 

整个过程的代码示例如下：

 

第一步:出发相关事件:onblur()

 

（以下代码在添加＼注册用户页面之中）

//通过input输入域制定验证方法onblur．span用户显示相关提示信息．

<inputname="userId" type="text" class="text1"id="userId"

size="10"maxlength="10" value="<%=userId %>" οnblur="validate(this)"  οnkeypress="userIdOnKeyPress()">

<spanid="spanUserId"></span>

 

       

      第二步:创建Ajax核心对象：XMLHttpRequest．

 

　　//验证用户代码是否已经存在

functionvalidate(field){

//焦点一离开就创建对象,如果输入为空,则检查

 

if(trim(field.value).length!= 0){

 

//创建XMLHttpRequest核心对象.

varxmlHttp=null;

 

//表示当前浏览器不是ie,如ns,firefox

if(window.XMLHttpRequest){

xmlHttp= new XMLHttpRequest();

}else if (window.ActiveXObject) {

xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");

}

 

      第三步:设置相关参数变量：如请求方式，URL变量（注意缓存问题）和是否异步．

 

//定义url变量,为了清除缓存问题可以加上时间标签,为了防止整个字符串不一样,从而避免缓存问题.

varurl="user_validate.jsp?userId="+trim(field.value)+"&time:"+new Date().getTime();

 

//设置对象的参数,并不会马上执行.

//设置的请求方式为GET,请求的URL,设置为异步提交

 

xmlHttp.open("GET",url, true);

//将方法地址等参数信息给onreadystatechange属性.

 

    第四步: 通过onreadystatechange方法获取Ajax引擎状态并进行相应的验证．

 

//此处采用的是匿名函数技术

xmlHttp.onreadystatechange=function(){

 

//判断引擎的状态是否是成功返回

if(xmlHttp.readyState== 4){

//判断引擎和服务器(Tomcat)的状态判断是否成功相应.

if(xmlHttp.status==200){

 

 

if(trim(xmlHttp.responseText)!= ""){

document.getElementById("spanUserId").innerHTML= "<font color ='red'>" + xmlHttp.responseText +"</font>";

}else{

document.getElementById("spanUserId").innerHTML="";

}

 

}else{

alert("请求失败,错误码"+ xmlHttp.status);

}

}

 

}

//将设置信息发送到Ajax引擎.

//GET请求方式参数为null,Post请求方式为body

xmlHttp.send(null);

}else {

document.getElementById("spanUserId").innerHTML="";

}

}

第五步:到相关验证页面完成验证.

 

验证页面：user_validate.jsp.

com.bjpowernode.drp.sysmgr.manager包是用户管理的相关逻辑．这里只用到了其中的查找用户方法．

 

<%@page language="java" contentType="text/html;charset=GB18030"

    pageEncoding="GB18030"%>

<%@page import ="com.bjpowernode.drp.sysmgr.manager.*" %>

 

<%

 

StringuserId = request.getParameter("userId");

    if(UserManager.getInstance().findUserById(userId) != null){

out.println("用户已经被占用");

 

}

 

%>

 

显示验证结果类似上图。

 

通过以上的例子完整的演示了整个Ajax的运作流程。

 

总结：

      Ajax并不是一项新技术,而是多项技术的有机结合.Ajax不是万能的，在适宜的场合使用Ajax，才能充分发挥它的长处，改善系统性能和用户体验，绝不可以为了技术而滥用。Ajax的特点在于异步交互、动态更新Web页面，因此它的适用范围是交互较多、频繁读取数据的Web应用。