JSP用JS实现Ajax（笔记）

最新推荐文章于 2024-08-12 12:09:40 发布

yjx23332

最新推荐文章于 2024-08-12 12:09:40 发布

阅读量1.2k

点赞数 3

分类专栏： JavaWeb（笔记）文章标签： ajax javascript

本文链接：https://blog.csdn.net/weixin_46949627/article/details/120091887

版权

JavaWeb（笔记）专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了Ajax的核心概念，展示了如何使用XMLHttpRequest进行异步请求，并通过一个实际示例（Java Servlet）演示了如何在页面注册功能中应用Ajax。重点讲解了POST请求设置及响应处理。

摘要由CSDN通过智能技术生成

一、Ajax（Asynchronous JavaScript and XML）

Ajax核心为异步刷新。JSP中通常为重定向或者请求转发的方式全局刷新。异步刷新使得只需要修改的部分被刷新。将JS与XML进行了组合。

本文以用JS实现。如果以Jquery实现会更简单。

Jquery为JS的进一步封装。

axios为Ajax的进一步封装。

二、XMLHttpRequest对象

方法部分

a. open(方法名称（get/post）,服务器地址,true)：与服务器建立连接

b. send()：

使用get：send(null)

使用post:send(参数值)

c. setRequestHeader(header,value):

get:不需要设置此方法。

post:需要设置。

若请求元素包含了文件上传：

setRequestHeader("Content-Type","multipart/form-data");

若请求元素不包含文件上传：

setRequestHeader（"Content-Type","application/x-www-form-urlencoded")

属性部分

d. readyState：请求状态

状态值	简介
0	XMLHttpRequest对象未被初始化
1	XMLHttpRequest对象已开始发送请求，已执行了open()方法及相关准备
2	XMLHttpRequest对象已将请求发送完毕，已经执行了send()方法，但并未收到响应
3	XMLHttpRequest对象已开始读取响应信息，已收到HTTP响应的头部信息，但是还没有将响应体接收完毕
4	XMLHttpRequest对象已将响应信息全部读取完毕

e. status:响应状态

状态码	含义
200	服务器正常响应
400	无法找到请求资源
403	无访问权限
404	访问资源不存在
500	服务器内部错误

f. onreadystatechange：通过该方法设置回调函数

g. responseText：相应格式为String

h. responseXML: 相应格式为XML

三、实现

servlet部分

package webtest;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class MobileServlet
 */
@WebServlet("/MobileServlet")
public class MobileServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public MobileServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=UTF-8");
		String mobile = request.getParameter("mobile");
		PrintWriter out = response.getWriter();
		//判断该手机号是否存在
		if("18181818181".equals(mobile)) {
			out.write("true");
		}
		else{
			out.write("false");
		}
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

页面部分

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script tpype="text/javascript">
	function register(){
		var mobile = document.getElementById("mobile").value;
		xmlHttpRequest = new XMLHttpRequest();//全局变量
		//设置xmlHttpRequest对象的回调函数
		xmlHttpRequest.onreadystatechange = callBack;
		//通过ajax异步方式请求服务器		
		xmlHttpRequest.open("post","MobileServlet",true);
		//xmlHttpRequest.open("get","MobileServlet?mobile="+mobile,true);//get方式
		//同时send(null)
		//设置post方式的头信息		
		xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xmlHttpRequest.send("mobile="+mobile);//key=value
		//xmlHttpRequest.send();
	}
	//定义回调函数（接收服务端的返回值）
	function callBack(){
		if(xmlHttpRequest.readyState == 4 &&xmlHttpRequest.status == 200){
			//接收服务端返回数据
			var data = xmlHttpRequest.responseText;//字符串格式接收
			if(data=="true"){
				alert("号码存在！");
			}
			else{
				alert("成功注册");
			}
		}
	}
</script>
</head>
<body>
手机:<input id="mobile"/>
<br/>
<input type="button" value="注册" onclick="register()"/>
</body>
</html>