AJAX(Asynchronous JavaScript and XML) 是多种技术的综合应用， 包括XHTML、Javascript和XML等。
AJAX使用XHTML和CSS标准化呈现，使用XML和JSON进行数据交换与处理，使用JavaScript绑定和处理所有数据。
在AJAX提出之前，业界对于上述技术都只是单独的使用，没有综合应用。
“AJAX”这个名字是在2005年2月，Jesse James Garrett在他的文章Ajax : A New Approach to Web Application中首先提出的。
而AJAX 这项技术，是 Google 在Google Labs发布Google Maps和Google Suggest后真正为人所认识。
现在大量的基于Web系统都采用AJAX技术，来提高web应用系统的用户体验。
接下里讲一下如何利用ajax进行一些简单的异步验证用户的合法性
编写异步的ajax时候首先需要明白编写的步骤，以及ajax对象中都有哪些对象和数据成员，这杨有利于后面对代码的理解
如果对ajax的成员不是太了解的话，建议先复习一下ajax的内容，下面是ppt的下载地址，，当然这是我的老师的，嘿嘿，没有经过老师同意，但是私自放上希望能对大家有所帮助
链接地址：http://pan.baidu.com/s/1geLDK1H
好接下来进入正题，如何简单的实现异步的页面交互
首先编写util.js工具类用于得到ajax对象，这个函数我们不用去了解他的具体实现，我们只需要复制粘贴就好，因为这个是w3c标准提供的
1：获取ajax对象的函数
function getXHR()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
return xmlHttp;
}
2：边界登录页面，并且在登录页面生成表单，这个过程很简单，表单如下
<body>
<form action="/HomeWork_2_3/Controller?type=login" method="post">
<table align="center">
<tr><td>管理员：</td><td><input type="text" name="user" id="id1"><span id="msg"></span></td></tr>
<tr><td>密码：</td><td><input type="password" name="password" id="id2" ></td></tr>
<tr><td><input type="submit" value="登录"></td><td><input type="reset" value="重置"></td></tr>
</table>
</form>
</body>
3：在表单页面引入util.js工具类并且编写ajax代码
<script type="text/javascript" src="${pageContext.request.contextPath}/util.js"></script>
<script type="text/javascript">
window.οnlοad=function(){
document.getElementById("id1").οnblur=function(){
if(this.value==""){
alert("请输入用户名");
this.focus();//恢复焦点
return;
}
//发出异步请求
var xhr = getXHR();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
document.getElementById("msg").innerHTML=xhr.responseText;
}
}
}
/*
xhr.open("GET","${pageContext.request.contextPath}/servlet/ServletDemo2?username="+this.value+"&time="+new Date().getTime());
xhr.send(null);
*/
xhr.open("POST","${pageContext.request.contextPath}/AjaxServlet?time="+new Date().getTime());
//设置请求消息头：告知客户端提交的正文的MIME类型
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("user="+this.value);
}
}
</script>
4：编写处理异步请求的servlet并且生成必要的相应返回给用户。注意这个过程是异步进行的
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("utf-8");
String []account= {"admin","zhangfucheng","103"};
String name = request.getParameter("user");
boolean flag=false;
for(String s:account)
{
if(s.equals(name))
{
flag=true;
break;
}
}
if(flag)
{
response.getWriter().write("<font color='green'>管理员合法</font>");
}else
{
response.getWriter().write("<font color='red'>管理员不合法</font>");
}
以上是编写一个异步的ajax表单页面处理的基本过程
因为上面的讲解可能过于草率，所以在这里呢我也将自己草率编写的工程代码分享出来，如果能对大家有帮助就最好不过了，工程代码不必要全部看懂，只要看核心部分就好，因为我也是刚刚学习javaEE所以，代码的逻辑可能会很混乱，但是只是看关键的代码的话还是可以的
链接地址：http://pan.baidu.com/s/1dFOFQpz 提取码：j51v
代码实现截图：
