Ajax详解

风起携月归

已于 2024-08-08 11:25:30 修改

阅读量366

点赞数 10

分类专栏： java JavaEE 文章标签： ajax okhttp 前端

于 2024-08-08 11:16:24 首次发布

本文链接：https://blog.csdn.net/yjp1240201821/article/details/141021976

版权

JavaEE 同时被 2 个专栏收录

54 篇文章 0 订阅

订阅专栏

java

48 篇文章 0 订阅

订阅专栏

Ajax详解

文章目录

Ajax详解

一、定义

1、概念：
Ajax（Asynchronous JavaScript and XML）是一种创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下更新部分内容。

2、核心概念：

异步：与服务器的通信是在后台进行的，而不会干扰用户的操作。
JavaScript：用于发送请求和处理响应。
XML/JSON：数据格式，虽然最初是用XML，现在更多使用JSON，因为它更轻量级。

理解：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML，Ajax指的是刷新局部页面的技术。

3、应用场景：

搜索
地图
校验
获取数据

4、交互模型：

4.1 经典的交互模型与Ajax交互模型

在这里插入图片描述

4.2 传统的Web交互方式

在这里插入图片描述

4.3 Ajax交互方式
在这里插入图片描述

二、Ajax使用详解

2.1 XMLHttpRequest对象

XMLHttpRequest 是 Ajax 技术的核心，它允许在后台与服务器进行数据交换，而无需重新加载整个网页。意味着可以在不重新加载整个网页的情况下，对网页的进行局部更新。XMLHttpRequest 提供了一套完整的 API，可以进行各种类型的 HTTP 请求并处理响应。

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）

//获取XMLHttpRequest对象
function getXMLHttpRequest() {
	var xmlHttp;
	if (window.XMLHttpRequest) {// 新浏览器
		xmlHttp = new XMLHttpRequest();
	}else if (window. ActiveXObject) {// IE6及以下浏览器
		xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP");
	}
	return xmlHttp;
}

2.2 与服务器交换数据 open/send

在使用 Ajax 技术与服务器交换数据时，XMLHttpRequest 对象提供了 open 和 send 方法，这两个方法是发起和执行 HTTP 请求的关键。

open 方法

open 方法用于初始化一个请求，它定义了请求的类型、目标 URL 以及是否异步。

xhr.open(method, url, async, user, password);

open参数理解：

method: 请求的方法，例如 “GET”, “POST”, “PUT”, “DELETE” 等。
url: 请求的目标 URL。
async: 一个布尔值，表示是否异步进行请求。true 表示异步，false 表示同步（一般情况下应该设置为 true）。

send方法

send 方法用于发送请求，可以在请求体中包含数据（例如在 POST 请求中）。

xhr.send(body);

send参数理解

body: 请求体内容。在 GET 请求中通常为空，在 POST 请求中则包含数据（如字符串或 FormData 对象）

示例：

//发送异步的Post请求
function sendAjaxPost() {
	var xmlHttp = getXMLHttpRequest();
	//初始化请求参数
	xmlHttp.open("POST","MyServlet",true);
	//post需要设置请求头
    xmlHttp.setRequestHeader(
        "Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
	//发送请求，携带数据
	xmlHttp.send("username=abc&password=123");
} 

//发送异步的Get请求
function sendAjaxGet() {
	var xmlHttp = getXMLHttpRequest();
	//初始化请求参数
	xmlHttp.open("GET","MyServlet?username=abc&password=123",true);
	//发送请求，携带数据
	xmlHttp.send();
}

2.3 onreadystatechange事件

onreadystatechange 事件是 XMLHttpRequest 对象中用于监控请求状态变化的事件。通过设置 onreadystatechange 事件处理程序，可以在请求状态变化时执行相应的操作。

理解：每当 readyState 属性改变时，就会调用该函数。

属性	描述
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化: 0 - 请求未初始化服务器 1 - 连接已建立 2 - 请求已接收 3 - 请求处理中 4 - 请求已完成，且响应已就绪
status	存有响应的状态。 200 - OK 404 - 未找到页面

示例：

//发送异步的Post请求
function sendAjaxPost() {
	
	var xmlHttp = getXMLHttpRequest();
	
	//每当readyState改变时，就会触发 onreadystatechange事件
	xmlHttp.onreadystatechange = function() {
		console.log(xmlHttp.readyState);//打印XMLHttpRequest的状态
		console.log(xmlHttp.status + "xx");//打印响应的状态
	}
	xmlHttp.open("POST","MyServlet",true);
    xmlHttp.setRequestHeader(
        "Content-Type","application/x-www-form-urlencoded;charset-UTF-8");
	xmlHttp.send("username=abc&password=123");
}

三、案例

验证用户名的是否可以注册

<body>

	<h1>注册页面</h1>
	<form action="RegisterServlet" method="post">
		账号：<input name="username" type="text" placeholder="请输入账号..." 			
                  onblur="validateUsername(this)"/><font></font><br/>
		密码：<input name="password" type="password" placeholder="请输入密码..."/><br/>
		<input type="submit" value="注册"/>
	</form>
	<script type="text/javascript">
		var font = document.getElementsByTagName("font")[0];
		function validateUsername(obj) {	
			var xmlHttp = getXMLHttpRequest();
			xmlHttp.onreadystatechange = function() {
				if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
					//获取来自响应的信息
					var text = xmlHttp.responseText;
					if(text == "1"){
						font.color = "red";
						font.innerText = "抱歉，账号已被注册";
					}else if(text == "0"){
						font.color = "green";
						font.innerText = "恭喜，账号可用";
					}
				}
			}
			xmlHttp.open("POST","MyServlet",true);
		    xmlHttp.setRequestHeader(
                "Content-Type","application/x-www-form-urlencoded;charset-UTF-8");
			xmlHttp.send("username="+obj.value);
		} 
		function getXMLHttpRequest() {
			var xmlHttp;
			if (window.XMLHttpRequest) {// 新浏览器
				xmlHttp = new XMLHttpRequest();
			}else if (window. ActiveXObject) {// IE6及以下浏览器
				xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP");
			}
			return xmlHttp;
		}
	</script>
</body>

public class MyServlet extends HttpServlet{
	private static final long serialVersionUID = 1L;
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		
		String username = request.getParameter("username");
		
		if(username.equals("hhy")){//已有此用户名
			response.getWriter().write("1");
		}else{//未有此用户名
			response.getWriter().write("0");
		}
	}
}