利用Ajax发送请求（二）

最新推荐文章于 2023-09-03 03:56:47 发布

荒--

最新推荐文章于 2023-09-03 03:56:47 发布

阅读量277

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/wangqing84411433/article/details/73909826

版权

ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用get和post请求分别实现登录验证：

服务器端代码：

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{

	private static final long serialVersionUID = 1L;

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse res)
			throws ServletException, IOException {
		System.out.println("==========接受请求==========");
		//获取请求资源路径(端口号之后 例如：/ajax-day01/check.do)
		//http://ip:port/ajax-day01/check.do
		String uri = req.getRequestURI();
		System.out.println("uri:"+uri);
		//分析请求资源路径   /check
		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("可以使用");
			}
		}else if("/num".equals(action)){
			//获取随机数
			Random r = new Random();
			int num = r.nextInt(100);
			out.println(num);
		}
	}
	

}

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;
}

（一）使用get请求：

<%@ 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>
	<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;
					$("adminCode_msg").innerHTML = text;
				}
			};
			xhr.send(null);
		}
	</script>
</head>
<body style="font-size: 30px">
	<form action="" method="post">
		账号：<input type="text" id="adminCode" name="adminCode" onblur="check_adminCode();"/>
		<span id="adminCode_msg"></span>
		<br/>
		密码：<input type="password" name="password"/><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>
	<script type="text/javascript">
		function check_adminCode(){
			//获得ajax对象
			var xhr = getXhr();
			//发送请求
			xhr.open("post","check_admin.do?",true);
			xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
			//绑定事件处理函数
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4 && xhr.status == 200){
					var text = xhr.responseText;
					$("adminCode_msg").innerHTML = text;
				}
			};
			xhr.send("adminCode=" + $F("adminCode"));
		}
	</script>
</head>
<body style="font-size: 30px">
	<form action="" method="post">
		账号：<input type="text" id="adminCode" name="adminCode" onblur="check_adminCode();"/>
		<span id="adminCode_msg"></span>
		<br/>
		密码：<input type="password" name="password"/><br/>
		<input type="submit" value="注册"/>
	</form>
</body>
</html>