[LIUYONGCN]
[2011-06-30]
[http://www.cnblogs.com/liuyongcn/]
一 原理
1-什么是AJAX
AJAX(Asynchronous JavaScript and Xml)异步的JavaScript和Xml,AJAX整合了JavaScript、Xml和CSS。我们通过JavaScript和XMLHttpRequest对象完成发送请求到服务器并获得返回结果的任务，然后用JavaScript更新局部的网页。使用AJAX 避免了重复加栽页，减少了带宽，同时还提高了用户体验
2-XMLHttpRequest对象
XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。
readyState属性
HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。
5 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义：
状态 名称 描述
0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1 Open open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2 Sent Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
4 Loaded HTTP 响应已经完全接收。
二 AJAX实现简单的登录验证的例子
<%@ page language="java" pageEncoding="gbk"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<html>
<head>
<script type="text/javascript">
//创建xmlHttpRequest
var xmlHttpRequest ;
function createXMLHttpRequest(){
if(window.ActiveXObject){
//如果是IE浏览器
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP") ;
}
else if(window.XMLHttpRequest){
//如果是非IE浏览器
xmlHttpRequest = new XMLHttpRequest() ;
}
}
//检查姓名
function checku(name){
//获取登陆名
var uname=name.value;
if(!uname){
//登陆名为空显示错误信息，并获取文本框焦点
document.getElementById("div").innerHTML="<font size='2' color='orange'> 用户名不能为空</font>";
name.focus();
return;
}
//访问地址，如果是servlet
//var url="LoginServlet?name="+uname;
//访问地址，如果使用action,login.do是对应loginAction doLogin是action中的一个方法
var url="login.do?operate=doLogin&name="+uname;
//1创建XmlHttpRequest组键
createXMLHttpRequest();
//2初始化XmlHttpRequest，true表示使用异步，false表示同步
xmlHttpRequest.open("GET",url,true) ;
//3创建回调用函数
xmlHttpRequest.onreadystatechange = back ;
//4发送请求
xmlHttpRequest.send(null) ;;
}
//回调函数，完成操作后，最后调用这个函数显示结果
function back(){
//4表示完成 200表示运行正常
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
var b=xmlHttpRequest.responseText;//获取PrintWriter输出信息
if(b=="true"){
document.getElementById("div").innerHTML="<font size='2' color='orange'> 用户名已存在</font>"
}else{
document.getElementById("div").innerHTML="<font size='2' color='green'> √</font>"
}
}
}
</script>
<title>This is a ajax test</title>
</head>
<body>
<form action="index.jsp" method="post">
<html:form action="/login">
name : <html:text property="name" onblur="return checku(this)" /><div id="div" style="display:inline" ></div>
<br/>
<html:submit/><html:cancel/>
</html:form>
</form>
</body>
</html>
LoginAction中的 doLogin方法。用于测试
public ActionForward doLogin(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
response.setContentType("text/html;charset=gb2312");
PrintWriter out;
try {
out = response.getWriter();
UserBiz biz=new UserBiz();
User user=new User();
user.setName(request.getParameter("name"));
System.out.println(request.getParameter("name"));
if(biz.checkUser(user)){
out.print("true");
}else{
out.print("false");
}
out.flush();
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}