HTML页面
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="xml.js"></script>
<meta http-equiv=”Content-Language” content=”UTF-8” />
<title>ajax实例 TEST</title>
</head>
<body>
ajax实例 TEST <br/>
<input type="text" id="username"name="username"/>
<input type="button" value="ok" onclick="varify()">
<div id="msg"></div>
</body>
</html>
JAVASCRIPT:
var xmlhttp;
function varify(){
var username = document.getElementById("username").value;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
if(xmlhttp.overrideMimeType ){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject) {
var activexName = ["MSXML.XMLHTTP","Microsoft.XMLHTTP"];
for(var i;i<activexName.length;i++){
try{
xmlhttp = new ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
//注册回调函数时，只需要函数名，不要回括号
xmlhttp.onreadystatechange=callback;
/*
* 第一个参数表示http的请求方式，支持所有http的请求方式，主要为get和post;
* 第二个参数表示请求的url地址，get方式参数也在URL中;
* 第三个参数表示采用异步还是同步方式交互，true 表示异步;
*/
// xmlhttp.open("GET","AjaxServlet?name="+username,true);
// xmlhttp.send(null);
//post方式
xmlhttp.open("POST","AjaxServlet",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded") ;
// 参数
xmlhttp.send("name="+username);
}
// 回调函数
function callback() {
//判断对象的状态是交互完成的
if(xmlhttp.readyState == 4){
if(xmlhttp.status==200){
// 使用纯文本方式 out.println("用户名[" + name + "]已经存在，请使用其他用户名, ");
var responseText = xmlhttp.responseText;
alert(responseText) ;
//使用XML s.append("用户名[" + name + "]已经存在，请使用其他用户名, ").append("</message>");
var domObj = xmlhttp.responseXML;
var messageNode = domObj.getElementsByTagName("message");
var responseMessage = messageNode[0].firstChild.nodeValue;
alert(responseMessage) ;
document.getElementById("msg").innerHTML=responseMessage;
}
}
}
==================
AjaxServlet
import javax.servlet.ServletException;
import javax.servlet.http.*;
import java.io.*;
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/xml;charset=utf-8"); //使用XML 为 text/xml
PrintWriter out = response.getWriter();
String name = request.getParameter("name");
StringBuilder s= new StringBuilder();
s.append("<message>");
if(name==null||name.length()==0){
s.append("用户不能为空").append("</message>");
} else{
if(name.equals("qq")) {
s.append("用户名[" + name + "]已经存在，请使用其他用户名, ").append("</message>");
} else{
s.append("用户名[" + name + "]不存在，可以使用").append("</message>");
}
out.println(s.toString());
System.out.println(s);
}
}
}