使用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" οnblur="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" οnblur="check_adminCode();"/> <span id="admin_span" style="color:red;"></span><br/> 密码:<input type="password" name="pwd"/><br/> <input type="submit" value="确定"/> </form> </body> </html>