<html>
<head><title>Simple jsp page</title>
<script type="text/javascript" src="js/verify.js"></script>
</head>
<body>
<input id="name" type="text"><br>
<input type="button" value="校验" οnclick="return verify()">
<div id="result"></div>
</body>
</html>
var xmlhttp; function verify() { var userName = document.getElementById("name").value; //1.创建XMLHttpRequest对象 //这是XMLHttpReuquest对象无部使用中最复杂的一步 //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码 if (window.XMLHttpRequest) { //针对FireFox,Mozillar,Opera,Safari,IE7,IE8 xmlhttp = new XMLHttpRequest(); //针对某些特定版本的mozillar浏览器的BUG进行修正 if (xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { //针对IE6,IE5.5,IE5 //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中 //排在前面的版本较新 var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for (var i = 0; i < activexName.length; i++) { try{ //取出一个控件名进行创建,如果创建成功就终止循环 //如果创建失败,抛出异常,然后可以继续循环,继续尝试创建 xmlhttp = new ActiveXObject(activexName[i]); break; } catch(e){ } } } //确认XMLHTtpRequest对象创建成功 if (!xmlhttp) { alert("XMLHttpRequest对象创建失败!!"); return; } else { //alert(xmlhttp.readyState); } //2.注册回调函数 //注册回调函数时,之需要函数名,不要加括号 //我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这是错误的 xmlhttp.onreadystatechange = callback; //3。设置连接信息 //第一个参数表示http的请求方式,支持所有http的请求方式,主要使用get和post //第二个参数表示请求的url地址,get方式请求的参数也在url中 //第三个参数表示采用异步还是同步方式交互,true表示异步 var url = convertUrl("ajaxServlet?name="+userName); xmlhttp.open("GET",encodeURI(encodeURI(url)) ,true); //POST方式请求的代码 //xmlhttp.open("POST","ajaxServlet",true); //POST方式需要自己设置http的请求头 //xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //POST方式发送数据 //xmlhttp.send("name=" + userName); //4.发送数据,开始和服务器端进行交互 //同步方式下,send这句话会在服务器段数据回来后才执行完 //异步方式下,send这句话会立即完成执行 xmlhttp.send(null); } //回调函数 function callback() { //alert(xmlhttp.readyState); //5。接收响应数据 //判断对象的状态是交互完成 if (xmlhttp.readyState == 4) { //判断http的交互是否成功 if (xmlhttp.status == 200) { //获取服务器端返回的数据 //获取服务器段输出的纯文本数据 var responseText = xmlhttp.responseText; //将数据显示在页面上 //通过dom的方式找到div标签所对应的元素节点 var divNode = document.getElementById("result"); //设置元素节点中的html内容 divNode.innerHTML = responseText; } else { alert("出错了!!!"); } } } function convertUrl(url){ var d = new Date(); if(url.indexOf("?")!=-1){ url = url + "&t=" + d.getTime(); }else{ url = url + "?t" + d.getTime(); } return url; }
<servlet> <servlet-name>ajaxServlet</servlet-name> <servlet-class>cn.lichaozhang.ajaxtrain.ajaxServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ajaxServlet</servlet-name> <url-pattern>/ajaxServlet</url-pattern> </servlet-mapping>
public class ajaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//1.取参数
String old = request.getParameter("name");
//String name = new String(old.getBytes("iso8859-1"),"UTF-8");
String name = URLDecoder.decode(old, "UTF-8");
//2.检查参数是否有问题
if (old == null || old.length() == 0) {
out.println("用户名不能为空");
} else {
// String name = URLDecoder.decode(old,"UTF-8");
// byte[] by = old.getBytes("ISO8859-1");
// String name = new String(by,"utf-8");
// String name = URLDecoder.decode(old,"utf-8");
//3.校验操作
// String name = old;
if (name.equals("zlc")) {
//4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段,而不是将一个新的页面发送给用户
//写法没有变化,本质发生了改变
out.println("用户名[" + name + "]已经存在,请使用其他用户名, ");
} else {
out.println("用户名[" + name + "]尚未存在,可以使用该用户名注册, ");
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
}