<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var xmlHttpRequest=null; //创建Ajax引擎 function getXmlHttpRequest() { if (window.ActiveXObject) { //ie xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } else { //firefox xmlHttpRequest = new XMLHttpRequest(); } } //检查用户名是否重复 function checkUserName() { //创建ajax引擎 getXmlHttpRequest(); //如果ajax引擎创建成功 if (xmlHttpRequest) { //第一个参数表示请求的方式get/post //第二个参数指定url //第三个参数true表示使用异步机制 //如果使用get方法请求，第一次进行请求，第二次从缓存里面取 var url = "/Ajax/AjaxReturnType"; //post提交数据 var data="username="+$("username").value; xmlHttpRequest.open("post",url,true); xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //回调函数 xmlHttpRequest.onreadystatechange =chuli; //发送请求,如果是get，写null， 可以传参数 xmlHttpRequest.send(data); } } //回调函数 function chuli() { if (xmlHttpRequest.readyState == 4) { var mes=xmlHttpRequest.responseXML.getElementsByTagName("mes"); //<res> // <mes>aaaa</mes> //</res> $("res").innerHTML=mes[0].childNodes[0].nodeValue; } } //$方法 function $(id) { return document.getElementById(id); } </script> </head> <body> 用户名:(输入aaa重复) <input type="text" id="username" onkeyup="checkUserName();" /> <span id="res" style="color: red;"></span> </body> </html>
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class AjaxReturnType
*/
@WebServlet("/AjaxReturnType")
public class AjaxReturnType extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AjaxReturnType() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request,HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
// TODO Auto-generated method stub
}
/**
* @see HttpServlet#doPost(HttpServletRequest request,HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request,IOException {
response.setContentType("text/xml; charset=utf-8");
response.setHeader("Cache-Control","no-cache");
PrintWriter out=response.getWriter();
String username=request.getParameter("username");
if(username.equals("aaa")){
out.print("<res><mes>用户名可以使用</mes></res>");
}else{
out.print("<res><mes>用户名不可以使用</mes></res>");
}
out.close();
}
}
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
json
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class AjaxReturnType
*/
@WebServlet("/AjaxReturnType")
public class AjaxReturnTypeJson extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AjaxReturnTypeJson() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request,IOException {
response.setContentType("text/json; charset=utf-8");
response.setHeader("Cache-Control","no-cache");
PrintWriter out=response.getWriter();
String username=request.getParameter("username");
if(username.equals("aaa")){
//一个json数据
//out.print("{'res':'该用户不可以使用','name':'张三'}");
out.print("[{'res':'该用户可以使用1','name':'李四1'}],[{'res':'该用户可以使用1','name':'李四1'}]");
}else{
//多个json数据
out.print("[{'res':'该用户可以使用2','name':'李四2'}],[{'res':'该用户可以使用2','name':'李四2'}]");
}
out.close();
}
}
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var xmlHttpRequest=null; //创建Ajax引擎 function getXmlHttpRequest() { if (window.ActiveXObject) { //ie xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } else { //firefox xmlHttpRequest = new XMLHttpRequest(); } } //检查用户名是否重复 function checkUserName() { //创建ajax引擎 getXmlHttpRequest(); //如果ajax引擎创建成功 if (xmlHttpRequest) { //第一个参数表示请求的方式get/post //第二个参数指定url //第三个参数true表示使用异步机制 //如果使用get方法请求，第一次进行请求，第二次从缓存里面取 var url = "/Ajax/AjaxReturnTypeJson"; //post提交数据 var data="username="+$("username").value; xmlHttpRequest.open("post",如果是get，写null， 可以传参数 xmlHttpRequest.send(data); } } //回调函数 function chuli() { if (xmlHttpRequest.readyState == 4) { //使用eval将字符串转换为json对象 var res=eval("("+xmlHttpRequest.responseText+")"); //res.res; var ress=""; for(var i=0;i<res.length;i++){ ress+=res[i].res+","+res[i].name; } $("res").innerHTML=ress; } } //$方法 function $(id) { return document.getElementById(id); } </script> </head> <body> 用户名:(输入aaa重复) <input type="text" id="username" onkeyup="checkUserName();" /> <span id="res" style="color: red;"></span> </body> </html>
