用AJAX实现一个小案例—对用户名进行校验来实现局部刷新

AJAX:为称为是无刷新技术。

在日常生活中，当我们要对username来进行校验，是不是需要访问数据库来判断username是不是已经存在，这时我们需要重新发送resquest来接收数据库返回的值。所以此时页面会刷新一次。这样会对用户体验以及效率大大的缩水。所以出现了AJAX技术来实现无刷新技术。

 

在a.js文件中

var xhr;

function a(){
var username = document.getElementById("u").value;

if(window.XMLHttpRequest) {

//1.获取XMLHttpRequest对象

xhr= new XMLHttpRequest();
//服务器的响应没有XML mime-type header，某些Mozilla浏览器可能无法正常工作
if(xhr.overrideMimeType) {
       xhr.overrideMimeType("text/xml");
    }

}else if(window.ActiveXObject) {

//activeName是各个ActiveX控件的名字。因为每个ActiveX的控件名是不一样的。

var activeName =["MSXML2.XMLHTTP" , "Microsoft.XMLHTTP" , "SXML2.XMLHTTP5.0" , "SXML2.XMLHTTP4.0","SXML2.XMLHTTP3.0"];
for(var n=0;n<activeName.length;n++) {
try{
xhr= new ActiveXObject(activeName[n]);
break;
}catch(e) {
}
}
}
//2.注册回调函数
xhr.onreadystatechange=callback;      //注意是注册回调函数而不是调用回调函数，所以callback不能有()
//3.与服务器建立连接
xhr.open("get", "check.do?username="+username,true);
//4.发送数据
xhr.send(null);

}

 然后在你的项目下新建一个CheckServlet.java，映射路径为check.do

//设置客户端的编码为:UTF-8

response.setCharacterEncoding("UTF-8");
//不要让浏览器开辟缓存 
response.setHeader("Cache-Control","no-cache"); 
response.setHeader("Cache-Control","no-store"); 
//程序立即过期 
response.setDateHeader("Expires",0); 
//不要让浏览其缓存程序 
response.setHeader("Pragma","no-cache"); 

PrintWriter out = response.getWriter();

//接收参数
String username = request.getParameter("username");
if("admin".equals(username)){
out.print("此用户已存在!");
}else{
out.print("用户不存在，可以注册!");
}
out.flush();
out.close();

在index.html中有一个username文本框

username:<input type="text" id="u" name="username" οnblur="a()"><span id="userMsg"></span><br>

在浏览器中输入你的网页，对实验进行实验。