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

古城微笑少年丶 2022-05-31 05:14 174阅读 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，那么这个就是回调函数了。

参考网址：[点击打开链接][Link 1]

[Link 1]: http://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html