1:先写一个JS文件 :ajax.js
//创建XmlHttpRequest对象
function createXmlHttpRequest() {
var xmlHttp;
//支持IE
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
//支持DOM
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
//全局的便于后面回调使用
var xmlHttp;
function sendRequest(method,url,param) {
//得到创建对象
xmlHttp = createXmlHttpRequest();
//当xmlHttp与服务器进行通信时，就会调你所赋于的函数
xmlHttp.onreadystatechange =callBackFun;//回调函数
//判断方法的类型
if(method=="get"){
if(param!=""){
url=url+"?"+param;
}
xmlHttp.open("get",true);
xmlHttp.send(null);
}else if(method=="post"){
//类似于是否支持多线程
xmlHttp.open("post",true);
//post提交数据时设置请求头信息
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送
xmlHttp.send(param);
}else if(method!=""){
out.print("输入有误！");
}
}
//回调函数
function callBackFun() {
//1.判断打印状态
//alert(xmlHttp.readyState);
//2.判断状态是否完成
//0:示初始化1:加载中 2:已加载 3:交互中 4:交互完成
if (xmlHttp.readyState == 4) {
//3.判断响应状态码是否正确
if (xmlHttp.status == 200) {
//4.取得服务端发送来的消息
callBack(xmlHttp.responseText);
} else {
alert("发生错误 状态码为=" + xmlHttp.status);
}
}
}
2: 写一个TestServlet类：
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException {
String name=request.getParameter("username");
if (name != null && name.equalsIgnoreCase("admin")) {
response.getWriter().write("no");
} else {
response.getWriter().write("yes");
}
}
3：写一个JSP页面
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
function checkName() {
//1.点击按钮时的状态
document.getElementById("msg").innerHTML = "正在验证中...";
//2.得到用户名
var username = document.getElementsByName("username")[0];
//发送请求
sendRequest("get","TestServlet","username=" + username.value);
}
//判断 响应的结果是何种类型
function callBack(result){
if(result=="no"){
document.getElementById("msg").innerHTML="用户已存在";
}else{
document.getElementById("msg").innerHTML="可注册";
}
}
</script>
</head>
<body> 姓名:
<input type="text" name="username">
<span id="msg"></span>
<input type="button" value="验证" onclick="checkName()">
<br>
密码:
<input type="text" name="password">
</body>
</html> 原文链接：https://www.f2er.com/ajax/165194.html