一、发送GET请求
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 <body> 10 <input type="text" name="username" id="username" onblur="testName();"> 11 <span id="notice"></span> 12 <script type="text/javascript"> 13 function testName(){ 14 //获取页面中输入的用户名 15 var userName=document.getElementById("username").value; 16 //创建Ajax的核心对象XMLHTTPRequest的实例 17 var xhr=null; 18 if(window.XMLHTTPRequest){ 19 //高版本IE或者其他的浏览器 20 xhr=new XMLHTTPRequest(); 21 }else{ 22 //低版本的IE浏览器（IE5和IE6） 23 xhr=new ActiveXObject("Microsoft.XMLHTTP"); 24 } 25 //设置回调函数 26 xhr.onreadystatechange=function(){ 27 //当Ajax返回状态readystate为4，并且http状态吗为200时，处理服务器响应 28 if(xhr.readystate==4&&xhr.status==200){ 29 //定义变量接收服务器返回的数据 30 var data=xhr.responseText; 31 if(data=="true"){ 32 //当返回的text文本为true时，在相应的标签内显示提示信息 33 document.getElementById("notice").innerHTML="用户名已经被占用"; 34 }else{ 35 //当返回的text文本不为为true时，在相应的标签内显示提示信息 36 document.getElementById("notice").innerText="用户名可以使用"; 37 } 38 } 39 } 40 //初始化XMLHTTPRequest组件 41 xhr.open("GET","nameServlet?name="+userName,true); 42 //发送请求 43 xhr.send(null); 44 } 45 </script> 46 </body> 47 </html>
二、发送POST请求
<%@ 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> </head> <body> <input type="text" name="username" id="username" onblur="testName();"> <span id="notice"></span> <script type="text/javascript"> function testName(){ //获取页面中输入的用户名 var userName=document.getElementById("username").value; //创建Ajax的核心对象XMLHTTPRequest的实例 var xhr=null; if(window.XMLHTTPRequest){ //高版本IE或者其他的浏览器 xhr=new XMLHTTPRequest(); }else{ //低版本的IE浏览器（IE5和IE6） xhr=new ActiveXObject("Microsoft.XMLHTTP"); } //设置回调函数 xhr.onreadystatechange=function(){ //当Ajax返回状态readystate为4，并且http状态吗为200时，处理服务器响应 if(xhr.readystate==4&&xhr.status==200){ //定义变量接收服务器返回的数据 var data=xhr.responseText; if(data=="true"){ //当返回的text文本为true时，在相应的标签内显示提示信息 document.getElementById("notice").innerHTML="用户名已经被占用"; }else{ //当返回的text文本不为为true时，在相应的标签内显示提示信息 document.getElementById("notice").innerText="用户名可以使用"; } } } //初始化XMLHTTPRequest组件 xhr.open("POST","nameServlet",true); //设置响应的请求头 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //发送请求 xhr.send("name="+userName); } </script> </body> </html>
三、servlet处理Ajax的页面
package com.vic.controller; 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; @WebServlet("/nameServlet") public class NameServlet extends HttpServlet { //处理get请求 @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } //处理post请求 @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8");//设置请求编码 resp.setCharacterEncoding("utf-8");//设置响应编码 boolean flag=false;//定义返回数据 String preName=req.getParameter("name");//接受Ajax携带的数据 if(preName.equals("admin")) {//虚拟一个用户名 flag=true;//如果携带的数据和预设的用户名相同，改变返回数据为false } PrintWriter out=resp.getWriter(); out.print(flag);//将数据返回页面 out.flush();//刷新流 out.close();//关闭流 } }