ajax简单登录说明 GET请求

最新推荐文章于 2024-01-31 17:00:07 发布

weixin_34363171

最新推荐文章于 2024-01-31 17:00:07 发布

阅读量119

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/scha/p/7286095.html

版权

ajax 简单登录说明 GET请求:

//依据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;
}

<%@ page 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>
<script type="text/javascript" src="js/ajax.js"></script>
<title>Insert title here</title>
    <script type="text/javascript">
        function check_adminCode() {
            //step1.获得ajax对象
            var xhr = getXhr();
            //step2.发送请求
            var uri = 'check_admin.do?adminCode='+$F('adminCode') ;
　　　　　　　　//encodeURI  处理乱码问题
            xhr.open('get',encodeURI(uri),true);
            xhr.onreadystatechange = function(){
                //step4.处理服务器返回的数据
                if(xhr.readyState == 4 && xhr.status == 200){
                    //获得服务器返回的数据
                    var txt = xhr.responseText;
                    //更新页面
                    $('adminCode_msg').innerHTML = txt;
                }
            };
            xhr.send(null);
        }
        
        
    </script>
</head>
<body style="font-size: 30px;">
    <form action="" method="post">
        账号：<input id="adminCode" name="adminCode" οnblur="check_adminCode();"/>
        <span id="adminCode_msg"></span>
        <br/>
        密码：<input type="password" name="pwd"/><br/>
        <input type="submit" value="确定"/>
    </form>
</body>
</html>

POST请求：

<%@ page 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>
<script type="text/javascript" src="js/ajax.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
    function check_adminCode(){
        //step1.获得ajax对象
        var xhr = getXhr();
        //step2.发送请求
        xhr.open('post','check_admin.do',true);
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.onreadystatechange = function(){
            //step4.处理服务器返回的数据
            if(xhr.readyState == 4 && xhr.status == 200){
                var txt  = xhr.responseText;
                $('adminCode_msg').innerHTML = txt;
            }
        }
        xhr.send('adminCode='+$F('adminCode'));
        
        
    }
</script>
        

</head>
<body style="font-size: 30px;">
    <form action="" method="post">
        账号：<input id="adminCode" name="adminCode" οnblur="check_adminCode();"/>
        <span id="adminCode_msg"></span>
        <br/>
        密码：<input type="password" name="pwd"/><br/>
        <input type="submit" value="确定"/>
    </form>
</body>
</html>

package web;

import java.io.IOException;
import java.io.PrintWriter;

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

public class ActionServlet extends HttpServlet{
    public void service(HttpServletRequest req,HttpServletResponse res) throws ServletException,IOException{
        System.out.println("service()");
        //获取请求资源路径
        //http://ip:prot/ajax-day01/check.do
        String uri = req.getRequestURI();
        System.out.println("uri:"+uri);
        //分析请求资源路径
        String action = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
        System.out.println("action:"+action);
        res.setContentType("text/html;charset=utf-8");
        PrintWriter out = res.getWriter();
        //依据分析的结果，进行不同的处理。
        if("/check_admin".equals(action)){
            String adminCode = req.getParameter("adminCode");
            System.out.println("adminCode:"+adminCode);
            if("King".equals(adminCode)){
                out.println("账号已经存在");
            }else{
                out.println("可以使用");
            }
        }
        
        //检查单机查看幸运数字
        if("/click".equals(action)){
            System.out.println("action:"+action);
            int num = (int)(Math.random()*10000);
            System.out.println(num);
            out.println(num);
        }
        
    }
}