Ajax的底层实现--使用Ajax实现无刷新登录实例--解决ajax中URl参数带中文的乱码问题

1.jsp代码

第一部分（html代码）：前端页面

<div id="login">
    用户名： <input type="text" id="userName"/>    　　　　　　　　　　　 <!--用户名-->
    密码：   <input type="password"  id="psw"/>   　　　　　　　　　　　　<!--密码-->
            <input type="submit" value="登录" onclick="check()"/>　　　<!--登录-->
            <div id="tip"></div>    　　　　　　　　　　　 <!--用于输出提示信息-->

</div>

第二部分（js代码）：将前端用户输入的“用户名”和“密码”两项数据，通过指定的servlet路径，传送给servlet，并根据servlet反馈回的结果，改变页面局部内容；

<script>


    //检测用户名和密码是否为空
    function check(){
        var userName = document.getElementById("userName").value;
        var password = document.getElementById("psw").value;
        var tip = document.getElementById("tip");

        if(userName==""){
            tip.innerHTML="用户名不能为空！";
        }else if(password==""){
            tip.innerHTML="密码不能为空！";
        }else{
            doAjax();
        }
    }

    var xmlHttp;
    function doAjax(){
        //即将使用XMLHttpRequest发送请求，需要先创建XMLHttpRequest对象
        if(window.XMLHttpRequest){   //其他浏览器返回的是XMLHttpRequest实例对象
            xmlHttp = new XMLHttpRequest();
        }else if(window.ActiveXObject){  //IE返回的是ActiveXObject实例对象
            xmlHttp = new ActiveXObject("Microsoft XMLHTTP");
        }

        if(xmlHttp!=null){
            var userName = document.getElementById("userName").value;  //获取输入的用户名的值
            var password = document.getElementById("psw").value;      //获取输入的密码的值
            //指定接收数据的服务器端的url
            var url = "<%=path%>/servlet/LoginServlet?userName="+userName+"&password="+password;
            url = encodeURI(encodeURI(url));   //对url进行二次编码，否则中文会乱码
            xmlHttp.open("post",url,true);  //通过Post的方式，打开服务器响应地址的连接，true表示异步刷新，false表示同步刷新
            xmlHttp.onreadystatechange= processRequest;   //指定回调函数，即当服务器反馈回结果时，处理结果的函数
            xmlHttp.send(null);  //发送请求，无参数在IE中正常，null是兼容火狐浏览器所必需的
        }else{
            alert("无法创建XMLHTTPRequest对象！")
        }
    }

    function processRequest(){
        if(xmlHttp.readyState==4){    //服务器端的响应已被xmlHttp接收完毕
            if(xmlHttp.status==200){  //Http状态码，200：服务器响应正常 ；
                var str = xmlHttp.responseText;  //接收服务器反馈回的字符串数据
                if(str!=0){                      //用户名和密码比对正确
                    document.getElementById("login").innerHTML="欢迎<b>"+str+"</b>登录！"
                }else{                           //用户名和密码比对错误
                    var tip = document.getElementById("tip");
                    tip.innerHTML="用户名或密码错误！";
                }
            }else{
                alert(xmlHttp.status);
//                400：无法找到请求的资源，一般是url解码错误
//                404：访问资源不存在，一般是路径设置错误
//                403：没有访问权限
//                500：服务器内部错误

            }
        }
    }
</script>

2.servlet代码

作用：接收前端用户数据，并进行用户名和密码的比对，如果比对正确，返回用户名，如果错误，返回0（零）

在项目中创建一个 LoginServelt 的Servlet文件，doPost()方法代码如下：

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//接收ajax数据

String userName = request.getParameter("userName");
String password = request.getParameter("password");

//对数据进行解码，避免中文乱码问题
userName = URLDecoder.decode(userName, "UTF-8");
password = URLDecoder.decode(password, "UTF-8");

response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

if (userName.equals("王磊")&&password.equals("123")) {
　　out.print(userName);
}else{
　　out.print(0);
}
}

难点：

解决ajax中url参数带中文的问题！

在js中对url进行二次编码：

String url = "<%=path%>/servlet/LoginServlet?userName="+userName+"&password="+password;

url=encodeURI(encodeURI(url));

在java的LoginServlet中对数据进行解码：

userName = request.getParameter("userName");

password = request.getParameter("password");

userName = URLDecoder.decode(userName,"UTF-8");

password= URLDecoder.decode(password,"UTF-8");