AJAX入门基础——请求后台数据

最新推荐文章于 2022-12-12 11:19:06 发布

bug_终结者_

最新推荐文章于 2022-12-12 11:19:06 发布

阅读量256

点赞数 1

分类专栏：基础ajax 文章标签： html ajax

本文链接：https://blog.csdn.net/weixin_44250329/article/details/100062458

版权

基础ajax 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

我使用的是HBuilder软件，先准备好一个文件夹

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<a href="dom1.html">跳转</a> -->
		<br><br>
		<button onclick="loadData()">加载数据</button>
		<span id="msg"></span>
		<script>
			//请求后台
			function loadData(){
				//创建XMLHttpRequest对象 (JS中唯一的一个能够跟后台（服务器）交互的对象)
				var xhr = new XMLHttpRequest();
				//IE低版本
				// var xhr = new ActiveXObject('Microsoft.XMLHTTP');
				//打开一个连接(同源策略)参数P1:请求方式 参数p2:服务端地址 参数p3:是否异步请求
				xhr.open('GET','data/data.json',true)
				//当准备状态发生改变是触发回调函数
				xhr.onreadystatechange=function(){
					//判断请求是否完成
					if(xhr.readyState == 4){
						//判断响应状态是否成功(200)
						if(xhr.status == 200){
							//接受服务端响应回来的数据
							var data = xhr.responseText;
							//将字符串类型的JSON数据转换为js对象
							data = JSON.parse(data);
							
							for (var i = 0; i < data.length; i++) {
								var m = data[i]
								console.info(m.name);
							}
							//document.getElementById('msg').innerText=data;
							
							
						}
					}
				}
				//发送请求 get获得不用给参数,post提交需要给提交的数据
				xhr.send();
			}
		</script>
		
	</body>
</html>

有几个地方需要特别注意：

请求的路径，一定要确保能够使用，如果 json文件里面的代码格式不对，会导致运行报错，基本的步骤上面注释都有说明。

总结就是一下几个步骤：

1.创建XMLHttpRequest对象 (JS中唯一的一个能够跟后台（服务器）交互的对象)

2.打开一个连接(同源策略)参数P1:请求方式参数p2:服务端地址参数p3:是否异步请求

3.当准备状态发生改变是触发回调函数

4.判断请求是否完成

5.判断响应状态是否成功(200)

6.接受服务端响应回来的数据

7.将字符串类型的JSON数据转换为js对象

如果需要输出就遍历集合

bug_终结者_

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AJAX入门基础——请求后台数据

我使用的是HBuilder软件，先准备好一个文件夹代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> ...
复制链接

扫一扫