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应用。