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");