ajax简单登录说明 GET请求
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" onblur="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" onblur="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); } } }
