利用Ajax发送请求（二）

使用get和post请求分别实现登录验证：

（一）使用get请求：

服务器端代码：

package web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ActionServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        System.out.println("service()");
        //分析请求资源路径
        //例如http://ip:port/ajax-day01/check.do (端口号后面的字符串为该路径)
        String uri= request.getRequestURI();
        System.out.println(uri);
        String action = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
        System.out.println(action);//check
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();//获得输出流
        if("/check_admin".equals(action)){
            String adminCode = request.getParameter("adminCode");
            System.out.println("adminCode:"+adminCode);
            if("King".equals(adminCode)){//帐号已经存在
                out.println("帐号已经存在");
            }else{
                out.println("可以使用");
            }
        }else if("/luck".equals(action)){
            //获取随机整数
            Random rand = new Random();
            int num = rand.nextInt(100);
            out.println(num);
        }
        out.close();
    }
    
}

引用的js代码片段：

//依据ID查找某个节点
function $(id){
    return document.getElementById(id);
}
//依据ID查找节点,返回节点的value
function $F(id){
    return $(id).value;
}

//获取ajax对象
function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){//非IE浏览器
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
}

jsp页面：

<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head>
  <script type="text/javascript" src="js/ajax.js"></script>
  <script type="text/javascript">
    function check_adminCode(){
        //获得ajax对象
        var xhr = getXhr();
        //发送请求
        xhr.open("get","check_admin.do?adminCode="+$F("adminCode"),true);
        //绑定事件处理函数
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                var text = xhr.responseText;
                $("admin_span").innerHTML = text;
            }
        };
        //打包发送请求
        xhr.send(null);
    }
  </script>
</head>
<body style="font-size:25px;">
  <form action="regist.do" method="post">
    帐号:<input type="text" name="adminCode" id="adminCode" onblur="check_adminCode();"/>
    <span id="admin_span" style="color:red;"></span><br/>
    密码:<input type="password" name="pwd"/><br/>
    <input type="submit" value="确定"/>
  </form>
</body>
</html>

使用post请求的jsp页面：

<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head>
  <script type="text/javascript" src="js/ajax.js"></script>
  <script type="text/javascript">
    function check_adminCode(){
        //获取ajax对象
        var xhr = getXhr();
        //发送请求
        xhr.open("post","check_admin.do?"+Math.random(),true);
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                //ajax接收服务器返回的部分数据
                var text = xhr.responseText;
                console.log(text);
                $("admin_span").innerHTML = text;
            }
        };
        xhr.send("adminCode="+$F("adminCode"));
    }
  </script>
</head>
<body style="font-size:25px;">
  <form action="regist.do" method="post">
    帐号:<input type="text" name="adminCode" id="adminCode" onblur="check_adminCode();"/>
    <span id="admin_span" style="color:red;"></span><br/>
    密码:<input type="password" name="pwd"/><br/>
    <input type="submit" value="确定"/>
  </form>
</body>
</html>

 

posted @ 2017-06-28 22:00  王庆84411433  阅读(119)  评论(0)  编辑  收藏  举报