ajax 回调函数(模板测试链接)

最新推荐文章于 2024-07-26 00:40:59 发布

spfLinux

最新推荐文章于 2024-07-26 00:40:59 发布

阅读量310

点赞数

分类专栏： ajax js 文章标签： ajax 回调函数

本文链接：https://blog.csdn.net/spfLinux/article/details/79287122

版权

js 同时被 2 个专栏收录

137 篇文章 3 订阅

订阅专栏

ajax

10 篇文章 0 订阅

订阅专栏

昨天有人问我回调函数以及ajax中onreadystatechange中的回调函数，有些懵逼

首先，要搞清楚回调函数：回调函数是一种以参数形式传递给另一个函数的函数。简单来说，函数中形参有一个是函数，那个这个形参就是回调函数。

我见的比较多的ajax是这样子的：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		var xhr = new XMLHttpRequest();
		xhr.open("get","http://jsonplaceholder.typicode.com/users",true);
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4&&xhr.status==200){
				console.log(xhr.responseText);
			}
		}
		xhr.send(null);
	</script>
</body>
</html>

我找了半圈，都没有找到回调函数的影子。

后面我在菜鸟教程上看到了这样一种写法：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		var xhr;
		function loadXMLData(url,cfunc){
			if(window.XMLHttpRequest){
				xhr=new XMLHttpRequest();
			}else{
				xhr=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xhr.onreadystatechange=cfunc;
			xhr.open("GET",url,true);
			xhr.send(null);
		}

		function myFunction(){
			loadXMLData("http://jsonplaceholder.typicode.com/users",function(){
					if(xhr.readyState==4&&xhr.status==200){
						console.log(xhr.responseText);
					}
			});
		}
	</script>

	<button οnclick="myFunction()">获取</button>
</body>
</html>

可以很清楚的看到，myFunction函数中，调用的loadXMLData函数的第二个参数就是一个匿名函数，那么这个匿名函数就是一个回调函数，然后把这个函数赋值给xhr.onreadystatechange，那么这个就是回调函数了。

参考网址：点击打开链接