JS学习日记--ajax

最新推荐文章于 2022-10-12 15:12:29 发布

风华正茂呀

最新推荐文章于 2022-10-12 15:12:29 发布

阅读量180

点赞数

分类专栏： JS学习日记文章标签： js javascript ajax

本文链接：https://blog.csdn.net/weixin_42149770/article/details/104181364

版权

JS学习日记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、Ajax及其使用

1、什么是Ajax

Ajax全称：Asynchronnuw JavaScript And XML
是一种异步加载数据的技术
可以通过使用Ajax实现页面的局部刷新
说白了就是可以不用刷新页面就可以从服务器取得数据并局部更新页面的技术，可以使页面更灵活

2、Ajax的使用

Ajax的核心对象：XMLHttpRequest
GET 目的：从服务器取得数据。特点：数据放在url中
POST 目的：向服务器发送数据。特点：数据放在请求体中
其他的区别都是由这两个特点延伸出来的

get实例

目的：打开一个txt并把其中的文本输出到页面上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ajax_get</title>
		<script type="text/javascript">
			window.onload=function()
			{
				//1.创建Ajax对象
				var xhr =new XMLHttpRequest();
				//4.监听请求
				xhr.onreadystatechange=function()
				{
					//xhr对象的readystate属性发生了改变，这个事件会触发
					//readystate
					//0==>xhr对象已经创建但是还没有初始化
					//1==>xhr对象已将调用了open
					//2==>xhr已经发送了ajax请求
					//3==>返回了部分数据
					//4==>返回了全部数据
					
					if(xhr.readyState!=4)
					{
						return;
					}
					if(xhr.status>=200&&xhr.status<=300)
					{
						//数据存在xhr.responseText属性中(string)
						document.getElementsByTagName('h1')[0].innerText=xhr.responseText;
						
					}else{
						console.error("请求失败");
					}
				}
				//2.打开这个对象
				xhr.open('get','get.txt',true)
				//3.发送请求
				xhr.send();
			}
		</script>
	</head>
	<body>
		<h1 ></h1>
	</body>
</html>

【注】：监听要在发送请求之前，否则很有可能发生你的发送请求已经返回了而你的监听请求还没有绑定这个情况
然后是其中一些函数的解释：

XMLHttpRequest():其实就是创建一个ajax对象，没什么好解释的
onreadystatechange():执行一些基于响应的任务时可以选择每当redayState改变，就会触发这个事件，也就是监听功能
open():三个参数：

第一个是方法，有get、post两个取值；
第二个是链接，也就是要打开的东西；
第三个参数是bolean值：为true时服务器异步进行也就是脚本执行send（）方法后不等待服务器的执行结果，而是继续执行脚本代码；
当该boolean值为false时，服务器请求是同步进行的，也就是脚本执行send（）方法后等待服务器的执行结果的返回，若在等待过程中超时，则不再等待，继续执行后面的脚本代码

POST实例

提交用户名和密码给服务器，相同的登陆成功，不同则登陆失败

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>post_json</title>
	</head>
	<body>
		<script type="text/javascript">
		//1、 创建一个xhr对象
			var xhr=new XMLHttpRequest();
		//5、监听数据返回
		xhr.onreadystatechange=function()
		{
			if(xhr.readyState!=4)
			{
				return;
			}
			console.log(xhr.responseText);
			if(xhr.status>=200&&xhr.status<=300)
			{
			var resp=JSON.parse(xhr.responseText);
			if(resp.result)
			{
				alert('登陆成功');
			}else{
				alert('登陆失败');
			}
				
			}else{
				console.error("请求失败");
			}
		}
		//2、配置这个对象
		xhr.open('POST','login.php',true);
		//3、设置请求头指定body中的数据是什么格式
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		//4、发送数据
		xhr.send('user=gap&password=123456')
		</script>
	</body>
</html>

<?php
	$user=$_POST['user'];
	$password=$_POST['password'];
	
	if($user=='gap' && $password=='123456'){
		echo'{"result":true}';
	}else{
		echo'{"result":false}';
	}
	
?>

函数：

setRequestHeader()说明我们传的参数是什么类型，具体参数可以查找W3C

二、异步与回调和promise

回调地狱：由于ajax是异步的，所以当我们想用一个函数的结果当另一个函数的参数的时候，就要使用回调来保证他们的执行顺序
关于异步与同步：我的理解这个跟进程差不多，同步执行就是顺序执行，而异步就是随机执行，可能是后写的函数先执行
而当有很多个这样的函数存在的时候，不断的回调就会产生很恐怖的层级结构，不利于代码的阅读和维护，具体写一个例子就知道了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>case</title>
		<script type="text/javascript">
			x=getDate();
			y=getMoreData(x);
			z=getMoreData(y);
			//回调地狱
			getDate(function(x){
				getMoreData(x,function(y){
					getMoreData(y,function(z))
				})
			})
			
		</script>
	</head>
	<body>
	</body>
</html>

上面就是一个简单的例子，伪代码
还有之前网上看到的一个图挺有意思
在这里插入图片描述
这么多的函数套函数看起来还是很恐怖的，而es6提供了一个很棒的方法叫promise，用来解决这个问题。
下面是一个小例子：
先调用随机函数，如果是偶数输出resolve，如果是奇数输出reject

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>promise</title>
		<script type="text/javascript">
			/*通过promise这个构造函数，来创建一个对象，这个promise对象
			有三种状态：pending、fulfill、reject状态
			promise构造函数有一个参数，这个参数是一个回调，这个回调接收两个参数，第一个参数可以使
			promise状态从pending=>fulfill,第二个pending=>reject*/
			
			var promise=new Promise(function(resolve,reject){
				setTimeout(function(){
					var num=Math.floor(Math.random()*100);
					if(num%2===0){
						resolve(num);
					}else{
						reject(num);
					}
				},2000)
			});
			promise.then(function(num){
				console.log('resolve'+num);
			}).catch(function(num){
				console.log('reject'+num);
			})
		</script>
	</head>
	<body>
		
	</body>
</html>

【注】写一些个人理解，promise首先有一个回调函数，如果返回了你想要的值，可以调用resolve函数；反之可以调用reject函数，注意这里的resolve和reject都是形参，名字可以自己设置，函数中也可以传参数。
【注】之后promise的返回值其实是一个promise对象，有两个方法：.then方法就是你调用resolve的时候的方法.catch是reject，这两个方法内函数的参数就是在promise函数中传给resolve或reject的参数。

如果不够清楚，接下来还有一个例子：promise的链式运算

实现功能按顺序链接四个文本内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>链式运算</title>
		<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//发送四个ajax分别取01020304并按顺序链接
			window.onload=function()
			{
				var artical='';
				$.get('./01.txt',function(p1){
					artical+=p1+'<br>';
					$.get('./02.txt',function(p2){
						artical+=p2+'<br>';
						$.get('./03.txt',function(p3){
							artical+=p3+'<br>';
							$.get('./04.txt',function(p4){
								artical+=p4+'<br>';
								$('p').html(artical);
							})
						})
					})
				})
			}
		</script>
	</head>
	<body>
		<p></p>
	</body>
</html>

以上是回调写法，接下来看看promise写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>promise</title>
		<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function getPara1()
			{
				return new Promise(function(resolve,reject)
				{
					$.get('./01.txt',function(p1){
						resolve(p1);
						
					})
				})
			}
			function getPara2()
			{
				return new Promise(function(resolve,reject)
				{
					$.get('./02.txt',function(p2){
						resolve(p2);
					
					})
				})
			}
			function getPara3()
			{
				return new Promise(function(resolve,reject)
				{
					$.get('./03.txt',function(p3){
						resolve(p3);
						
					})
				})
			}
			function getPara4()
			{
				return new Promise(function(resolve,reject)
				{
					$.get('./04.txt',function(p4){
						
						resolve(p4);
					
						
					})
				})
			}
			var article='';
			getPara1()
			.then(function(p1){
				article+=p1+'<br>';
				return getPara2();
			}).then(function(p2){
				article+=p2+'<br>';	
				return getPara3();
			}).then(function(p3){
				article+=p3+'<br>';	
				return getPara4();
			}).then(function(p4){
				article+=p4+'<br>';	
				$('p').html(article);
			})
			
		</script>
	</head>
	<body>
		<p></p>
	</body>
</html>

【注】：每一个then函数需要一个返回值作为下一个then函数的参数，否则那个参数为undefined
【注】：resolve中的参数其实就是下一个then中的参数，我的理解可以相当于调用then时当前promise函数的返回值

差不多就这些还有解决跨域问题等过几天更新了JQuery之后写…

风华正茂呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习日记--ajax

一、Ajax及其使用1、什么是AjaxAjax全称：Asynchronnuw JavaScript And XML是一种异步加载数据的技术可以通过使用Ajax实现页面的局部刷新说白了就是可以不用刷新页面就可以从服务器取得数据并局部更新页面的技术，可以使页面更灵活2、Ajax的使用Ajax的核心对象：XMLHttpRequestGET 目的：从服务器取得数据。特点：数据放在ur...
复制链接

扫一扫