详解AJAX技术

Arion-ren

已于 2022-05-24 11:24:31 修改

阅读量4.3k

点赞数 1

文章标签： ajax 前端 javascript

于 2022-05-24 11:19:11 首次发布

本文链接：https://blog.csdn.net/a1782519342/article/details/124942436

版权

1.为什么要用？

在对接支付宝支付的时候需要在初始化的时候设置一个地址值，这个就是用于支付成功后跳转的地址值。

aliPayConfig.setReturnUrl("http://127.0.0.1");

但是，在对接微信Native支付方式的时候，当扫码付款完成以后客户端并不会跳转，这时候需要AJAX技术来实现异步的刷新网页，在前端不断的发送请求，请求后端的api，通过订单好查询数据库中的支付状态，如果成功支付则跳转。

2.什么是AJAX技术？

AJAX的全称是Asynchronous JavaScript and XML，意思就是异步的JavaScript和XML，用于快速创建动态的网页技术，该技术实现了服务器和客户端少量数据交换条件下实现网页的动态更新，意味着无需重新加载整个网页。

3.XMLHttpRequest

AJAX是基于XMLHttpRequest技术实现的，通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。使用XMLHttpRequest时必须先实例化一个对象。

var xmlhttprequest = new XMLHttpRequest();

4.实际使用

4.1 在JavaScript中嵌入AJAX

其中open方法只能在JavaScript中使用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			// 在这里使用 javaScript 语言发起 Ajax 请求，访问服务器 AjaxServlet 中 javaScriptAjax
			function ajaxRequest() {
				// 1 、我们首先要创建 XMLHttpRequest
				var xmlhttprequest = new XMLHttpRequest();
				// 2 、调用 open 方法设置请求参数
				xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true)
				// 4 、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
				xmlhttprequest.onreadystatechange = function(){
					if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
						var jsonObj = JSON.parse(xmlhttprequest.responseText);
						// 把响应的数据显示在页面上
						document.getElementById("div01").innerHTML = " 编号：" + jsonObj.id + " , 姓名：" + jsonObj.name;
					}
				}
			// 3 、调用 send 方法发送请求
			xmlhttprequest.send();
			}
	</script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>

4.2在jQuery中使用

jQuery中集成了很多的JavaScript类库。

$("#ajaxBtn").click(function(){
	$.ajax({
		url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
		// data:"action=jQueryAjax",
		data:{action:"jQueryAjax"},
		type:"GET",
		success:function (data) {
			// alert(" 服务器返回的数据是： " + data);
			// var jsonObj = JSON.parse(data);
			$("#msg").html(" 编号：" + data.id + " , 姓名：" + data.name);
		},
		dataType : "json"
	});
});

// ajax--get 请求
$("#getBtn").click(function(){
	$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function 	(data) {
		$("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
	},"json");
});
// ajax--post 请求
$("#postBtn").click(function(){
	$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function 	  (data){
		$("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
	},"json");
});

Arion-ren

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
详解AJAX技术

1.为什么要用？在对接支付宝支付的时候需要在初始化的时候设置一个地址值，这个就是用于支付成功后跳转的地址值。aliPayConfig.setReturnUrl("http://127.0.0.1");但是，在对接微信Native支付方式的时候，当扫码付款完成以后客户端并不会跳转，这时候需要AJAX技术来实现异步的刷新网页2.什么是AJAX技术？AJAX的全称是Asynchronous JavaScript and XML，意思就是异步的JavaScript和XML，用于快速创建动态的网
复制链接

扫一扫