JAVAScript——AJAX异步更新

最新推荐文章于 2023-11-15 14:15:00 发布
最新推荐文章于 2023-11-15 14:15:00 发布
阅读量595 收藏
点赞数 1
分类专栏： Java前端 文章标签： ajax java JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45673367/article/details/109201447
版权

什么是AJAX?

  • 简称：ASynchronous JavaScript And XML —— 异步的JavaScript 和 XML
  • AJAX 是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的艺术。

AJAX = 异步 JavaScript 和 XML。

  • AJAX 是一种用于创建快速动态网页的技术——通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
  • 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
同步和异步的区别

异步和同步：客户端和服务器端相互通信的基础上

  • 同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
  • 异步客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
<script type="text/javascript">
	var age01 = 20;
	var age02 = 40
	var str01 = "小明今年"+age01+"岁了，小明爸爸今年"+age02+"岁了";
	// alert(str01)
	var str02 = `小明今年${age01}岁，小明爸爸今年${age02}岁`
	alert(str02)
</script>

AJAX的实现

  1. 创建Ajax对象：XMLHttpRequest 对象 —— 用于在后台与服务器交换数据。
  2. 请求后台：向服务器发送请求
    如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
    3.接收后台返回的JSON数据：服务器响应
    如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>天气预报</h1>
		<button type="button" onclick="sendMes()">明日天气</button>
	</body>
</html>
<script type="text/javascript">
	// 1. 创建AJAX对象
	var xmlhttp = new XMLHttpRequest()
	// 2. 发送请求
	function sendMes() {
		xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city=西安", true);
		xmlhttp.send();
		// 3. 接收服务端传回的JSON数据
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				var jsonstr = xmlhttp.responseText;
				var jsonobj = JSON.parse(jsonstr)
				alert(jsonobj.desc)
			}
		}
	}
</script>
AJAX之get请求
  1. 创建对象
  2. 打开后台接口
  3. 发送请求
  4. 接收传回的json信息
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="getJoke()">点击获得一个笑话</button>
	</body>
</html>
<script type="text/javascript">
	function getJoke() {
		// 1. 创建对象
		var xmlhttp = new XMLHttpRequest
		// 2. 打开后台接口
		xmlhttp.open("GET", "https://autumnfish.cn/api/joke/list?num=1", true)
		// 3. 发送请求
		xmlhttp.send()
		// 4. 接收传回的json数据
		xmlhttp.onreadystatechange = function() {
			//判断readyState就绪状态是否为4，判断status响应状态码是否为200
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//获取服务器的响应结果
				var responseText = xmlhttp.responseText;
				//alert(responseText);
				var obj = JSON.parse(responseText);
				var text = obj.jokes[0]
				var bo = document.body
				bo.innerText = text
			}
		}
	}
</script>

简写

<script src="../JQuery/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$('button').click(function() {
		// $.ajax({
		// 	type:'get'
		// 	url: 'https://autumnfish.cn/api/joke/list?'
		// 	data:{
		// 		'num':'2'
		// 	}
		// 	success:function(res){
		// 		// JQuery已经把获取的json字符串转换为json对象
		// 		alert(res.msg)
		// 		alert(res.jokes[0])
		// 		alert(res.jokes[1])
		// 	},
		// 	error:function(error){
		// 		alert("请求失败了")
		// 		console.log(error);
		// 	},
		// 	dataType:'json'   // 接收后台传回的数据类型
		// })
		
		// 简写
		// $.get(url, [data], [callback], [type])
		$.get('https://autumnfish.cn/api/joke/list?num=1', function(res) {
			alert(res.msg);alert(res.jokes[0]);
		}, "json");
	})
</script>
AJAX之post请求
  1. 创建ajax对象
  2. 打开后台接口
  3. 设置请求头信息
  4. 发送请求
  5. 接收传回的json数据
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="Post()">点击获得post请求，来自后台</button>
	</body>
</html>
<script type="text/javascript">
	function Post() {
		// 1. 创建对象
		var xmlhttp = new XMLHttpRequest
		// 2. 打开后台接口
		xmlhttp.open("POST", "http://localhost:8080/login", true)
		// 3.设置请求头信息
		xmlhttp.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
		// 4. 发送请求
		xmlhttp.send("username=Tom&password=111111")
		// 5. 接收传回的json数据
		xmlhttp.onreadystatechange = function() {
			//判断readyState就绪状态是否为4，判断status响应状态码是否为200
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//获取服务器的响应结果
				var responseText = xmlhttp.responseText;
				alert(responseText)
			}
		}
	}
</script>

直接请求json数据

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$('button').click(function() {
		/* 		$.getJSON(url, [data], [callback])
		 					* url：请求路径
		 					* data：请求参数
		 					* callback：回调函数
		 */
		$.getJSON('https://autumnfish.cn/api/joke/list?num=1',function(res){
			alert(res.msg);
		});
	})
</script>
追JAVA的小菜鸟
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端网络——Ajax使用
01-08
ajax(Asynchronous javaScript and XML 异步的javascript和xml)可实现异步，局部的获取数据 Ajax咋刚开始一看还有点稀里糊涂的，怎么去理解呢？ 这是开发者已经订好的规则，我们只要记住固定的代码，就可以使用，...
原生js与ajax应用
Sapphire521的博客
01-02 94
要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤: (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. (3)设置响应HTTP请求状态变化的函数. (4)发送HTTP请求. (5)获取异步调用返回的数据. (6)使用JavaScript和DOM实现局部刷新 1.创建XMLHttpRequest对象 在IE
实现网页的异步通信与实时更新的AJAX 请求
最新发布
2301_80100415的博客
11-15 363
AJAX 请求通常使用 XMLHttpRequest 对象或 fetch 函数发送，可以向服务器发送 GET 或 POST 请求，并接收服务器返回的数据。通过 XMLHttpRequest 对象或 fetch 函数发送 AJAX 请求，可以实现前端与后端的通信，提高网页的响应速度和用户体验。为了提高网页的交互性和实时性，前端技术不断发展，其中 AJAX 请求是一种非常常用的技术。通过 AJAX 请求，前端可以异步地向服务器发送数据请求，并实时地更新页面内容，从而提高用户体验和应用程序的响应速度。
【JavaScript】多种方式解决在for循环中调用ajax，并等待返回结果后才进行下一次循环
weixin_45489731的博客
12-24 7897
方式一 递归 let arr = []; (function loop(index) { if (index >= 0) { setTimeout(() => { arr.push(index * 1000); loop(--index); }, index * 1000); } else { console.log(arr); } })(3) 测试结果
异步请求，局部更新页面------Ajax
m0_73557631的博客
05-10 503
.XHLHttpRequest是异步发送，在服务端没有响应前，浏览器不需要等待，用户可以完成其他操作。1.请求把数据全部提交给服务端，数据大，没有意义。3.通过http响应，把数据返回给浏览器。
Ajax用法详细解析, 实现异步更新页面, 以及'post'和'get'请求属性介绍
翾的博客
02-22 6930
AjaxAJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情
学习ajax的文档——ajax基础文档
08-23
1.ajax简介 2.使用javascript和ajax发出异步请求 3.ajax中的高级请求和响应 4.利用dom进行web响应
分享5个顶级的JavaScript Ajax组件库
01-19
AJAX即Asynchronous JavaScript and XML（异步JavaScript和XML）。AJAX曾是web开发界的一个常见名称，许多流行的JavaScript小部件都是使用AJAX构建的。例如，有些特定的用户交互（如按下按钮）会异步调用到服务器，...
SUN的《AJAX与J2EE》全文译了
01-21
开玩笑、原文出处：http://java.sun.com/developer/technicalArticles/J2EE/AJAX/   中英文对照如下、全是我自己译的、水平有限（6级考... ——《异步JavaScript+XML技术与J2EE》   By Greg Murray, June 9, 
littlejs::grinning_face:自己写的一个Javascript基础库——littlejs，Little and basic
05-29
littlejs -- Little and basic【重构开发中】本项目是基于环境重构littlejs, 工具式JavaScript库，类似于loadsh。功能功能库： 运动框架; 用ajax实现前后端分离； 设置、获取或者删除cookie； 支持异步方法之一...
[WEB] 详解Ajax实现网页数据异步更新并实时自动刷新
...
09-04 1万+
本周在做STC大作业的时候，采集了开发板上的光照和温度数据传到了腾讯云服务器上（实现可以参考我的另外一篇文章 ： socket实现服务器和客户端双向通信），由于开发板采集的数据是时实更新的，故网页的数据也需要实时更新，故学习并记录Ajax数据更新方法，当然还需要结合之前做H5游戏开发多子弹线程的经验，使用setInterval() 方法实现函数的循环定时回调，以实现数据不断刷新的效果 Aja...
JavaScript之Ajax（一篇入门Ajax就够了）
热门推荐
weixin_50602266的博客
12-20 6万+
Ajax入门一篇就够
JavaScript中的Ajax
weixin_43466575的博客
04-10 6068
（1）什么是AjaxAjax：Asynchronous JavaScript And XML，异步JavaScript和XML技术。描述：不是一门新的语言或技术，是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。功能：用于实现与服务器进行异步交互的功能。用js来实现页面的局部刷新。（2）Ajax工作流程。
ajax更新局部js,Ajax局部更新导致JS事件重复触发问题的解决方法
weixin_35342111的博客
08-05 199
Ajax局部更新导致JS事件重复触发问题的解决方法如果在页面中包含一个ajax更新的列表，那么需要小心非动态更新部分的事件处理。以带有公共工具栏的列表界面为例：| Menu1 | Menu2----------------------------------------------------------------------------ID TITLE DESCRIPTION OPERATIO...
【JavaScript】Ajax
南栀的博客
12-17 3569
Ajax
JS实现Ajax异步刷新
while(True): print('adorable')
03-02 589
用JS实现post和get两种方式异步刷新 1，Ajax是个啥玩意？ Ajax 即"Asynchronous JavaScript And XML", 指一种创建交互式，快速动态网页应用的网页开发技术，无需加载整个网页的情况下，能够更新部分网页的技术。 2，异步刷新？是个啥玩意？ 用js里面的XMLHttpRequest对象来和servlet交互，来实现数据的交换，这里只讲js的实现方式。 ...
php+异步刷新封装,Ajax的实现异步刷新详解
weixin_33602515的博客
03-12 141
这次给大家带来Ajax的实现异步刷新详解，Ajax实现异步刷新的注意事项有哪些，下面就是实战案例，一起来看一下。所谓的异步刷新，就是不刷新整个网页进行更新数据。只有通过js才能实现Ajax，进而实行异步刷新表单提交数据和Ajax提交数据的区别：表单提交是提交的整个页面中的数据，提交数据之后会抛弃之前的页面(刷新页面)；ajax是在当前页面提取某些数据并提交出去，并能接收返回来的数据，处理之后进而显...
js细节（一个简单的js方法调用Ajax异步刷新）
josnow的博客
06-01 1203
xtcs.jsp      js方法再调用Ajax方法 var spaceSz = {   //新建一个对象         type : 'post',         url : '${ctx}/settings/xtcs/save',         dataType : 'json',         showRemindMsg:true     } function
用ajax异步请求 ajax异步请求
07-25
当使用Ajax进行异步请求时，你需要创建一个XMLHttpRequest对象，并使用它来发送HTTP请求。以下是一个使用Ajax进行异步请求的示例： ```javascript // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求的方法和URL xhr.open('GET', 'https://api.example.com/data', true); // 设置请求头（可选） xhr.setRequestHeader('Content-Type', 'application/json'); // 监听请求状态的变化 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求成功，处理返回的数据 var response = JSON.parse(xhr.responseText); console.log(response); } else if (xhr.readyState === 4 && xhr.status !== 200) { // 请求失败，处理错误信息 console.error('Error:', xhr.status); } }; // 发送请求 xhr.send(); ``` 在这个示例中，我们创建了一个GET请求，并指定了请求的URL。你可以根据你的需求来设置请求方法（GET、POST等）和URL。然后，我们可以通过设置请求头来传递额外的信息。在`onreadystatechange`事件处理程序中，我们检查请求的状态和响应的状态码，根据情况处理返回的数据或错误信息。 请注意，示例中的URL是一个示意的API地址，你需要根据你的实际需求来设置正确的URL。 希望这个示例对你有帮助！如果你还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值