Javascript实现Ajax

一、发送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();//关闭流
    }
    
}