利用Ajax发送请求（二）

来源：互联网发布：淘宝二级页面设计编辑：程序博客网时间：2024/06/06 07:40

使用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查找节点,返回节点的valuefunction $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>

阅读全文

0 0