ajax入门级demo

最新推荐文章于 2021-08-05 17:11:49 发布

sunnyboysix

最新推荐文章于 2021-08-05 17:11:49 发布

阅读量859

点赞数

分类专栏：前端开发文章标签：前端 ajax json

本文链接：https://blog.csdn.net/sunnyboysix/article/details/80513380

版权

前端开发专栏收录该内容

47 篇文章 1 订阅

订阅专栏

一个正在自学路上的的小菜鸟，今天看了一些资料然后写了demo，然后分享一下。

*readystate状态码
* 0：请求未初始化
* 1：服务器连接已建立
* 2：请求已接收
* 3：请求处理中
* 4：请求已完成
*
* http状态码
* 200---服务器成功返回网页
* 404---请求的网页不存在

* 503---服务器暂时不可用

先要了解以上的内容，可以使用console.log()在控制台查看。使用以下代码时候在项目文件内新建一个simple.txt文本文件，里面内容可以自己编辑。

请求方式：onload

<html>
	<head>
		<meta charset="utf-8" />
		<title>index</title>
	</head>
	<body>
		<button id="btn">请求文本</button>
		<p id="text"></p>
		<script>
			document.getElementById('btn').addEventListener("click",loadText);
			function loadText(){
				//创建XMLHttpRequest对象
				var xhr=new XMLHttpRequest();
				xhr.open('GET','simple.txt',true);
				//console.log("READYSTATE:",xhr.readyState);//请求状态码1 服务器连接已建立1
				//onprogress
				//xhr.οnprοgress=function(){
				//	console.log("测试READYSTATE:",xhr.readyState);
				//}  测试状态码3 请求处理中
				//两种方式请求 onload /onreadystattechange
				xhr.οnlοad=function(){
                              // console.log("READYSTATE:",xhr.readyState);
                             //console.log(this.responseText);控制台显示文本信息
                             document.getElementById('text').innerHTML=this.responseText;
				}
				xhr.send();//发送请求
			}
			
		</script>
	</body>
</html>

请求方式：onreadystattechange

<html>
	<head>
		<meta charset="utf-8" />
		<title>index</title>
	</head>
	<body>
		<button id="btn">请求文本</button>
		<script>
			document.getElementById('btn').addEventListener("click",loadText);//点击事件
			function loadText(){
				//创建XMLHttpRequest对象
				var xhr=new XMLHttpRequest();
				xhr.open('GET','simple.txt',true);
				//console.log("READYSTATE:",xhr.readyState);//1：服务器连接已建立
				//两种方式请求 onload /onreadystattechange
				xhr.onreadystatechange=function(){
				//console.log("READYSTATE:",xhr.readyState);
				if(this.status==200&&this.readyState==4){
				  console.log(this.responseText);
				}else if(this.status==404){
					console.log("请求的网页不存在");
				}
				}
				xhr.send();//发送请求
			}
			
		</script>
	</body>
</html>

...............................................................................................................................

ajax获取json数据，自己在本地项目文件中新建user.json users.json,先理解上面的demo这个例子还是很好理解的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn1">请求单个用户</button>
		<button id="btn2">请求多个用户</button>
<h1>单个用户</h1>
<div id="user"></div>


<h1>所有用户</h1>
<div id="users"></div>

<script>
	document.getElementById('btn1').addEventListener('click',loadUser);
	document.getElementById('btn2').addEventListener('click',loadUsers);

	function loadUser(){
		var xhr=new XMLHttpRequest();
		xhr.open("GET","user.json",true);
		xhr.οnlοad=function(){
			if(this.status==200){
				var user =JSON.parse(this.responseText);
				var output='';
				output +=`
				  <ul>
				  <li>${user.id}</li>
				  <li>${user.name}</li>
				  <li>${user.email}</li>
				  </ul>
				`;
			document.getElementById('user').innerHTML=output;
			}
		}
		xhr.send();
	}


		function loadUsers(){
		var xhr=new XMLHttpRequest();
		xhr.open("GET","users.json",true);
		xhr.οnlοad=function(){
			if(this.status==200){
				var users =JSON.parse(this.responseText);
				var output='';

				//遍历数组
				for(var i in users){
				output +=`
				  <ul>
				  <li>${users[i].id}</li>
				  <li>${users[i].name}</li>
				  <li>${users[i].email}</li>
				  </ul>
				`;//注意``这个不是单引号，这里写法我没有采用拼接写法，感兴趣可以自己百度
				document.getElementById('users').innerHTML=output;
				}
			}
		}
		xhr.send();
	}


</script>
</body>
</html>

以前稍微有点懒了，其实还是比较好理解的，在学习的过程中多写多思考，把前端的知识融会贯通。

sunnyboysix

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
ajax入门级demo

一个正在自学路上的的小菜鸟，今天看了一些资料然后写了demo，然后分享一下。 *readystate状态码 * 0：请求未初始化 * 1：服务器连接已建立 * 2：请求已接收 * 3：请求处理中 * 4：请求已完成 * * http状态码 * 200---服务器成功返回网页 * 404---请求的网页不存在 * 503---服务器暂...
复制链接

扫一扫

专栏目录