今天在封装ajax的时候遇到了回调函数，好好的思考了一番，结果如下：
封装后的ajax.js文件中的代码片段如下
- function ajax(method, url, data, success) {
- var xhr = null;
- try {
- xhr = new XMLHttpRequest();
- } catch (e) {
- xhr = new ActiveXObject('Microsoft.XMLHTTP');
- }
- if (method == 'get' && data) {
- url += '?' + data;
- }
- xhr.open(method,url,true);
- if (method == 'get') {
- xhr.send();
- } else {
- xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
- xhr.send(data);
- }
- xhr.onreadystatechange = function() {
- if ( xhr.readyState == 4 ) {
- if ( xhr.status == 200 ) {
- success && success(xhr.responseText);
- } else {
- alert('出错了,Err：' + xhr.status);
- }
- }
- }
- }
而在另一个需要调用ajax.js的html文件中的代码片段如下
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>无标题文档</title>
- <script src="ajax.js"></script>
- <script>
- window.onload = function() {
- var oBtn = document.getElementById('btn');
- oBtn.onclick = function() {
- /*ajax({
- url : 'getNews.php',
- success : function(data) {
- //...
- }
- });*/
- ajax('get','getNews.php','',function(data) {
- var data = JSON.parse( data );
- var oUl = document.getElementById('ul1');
- var html = '';
- for (var i=0; i<data.length; i++) {
- html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
- }
- oUl.innerHTML = html;
- });
- }
- }
- </script>
- </head>
- <body>
- <input type="button" value="按钮" id="btn" />
- <ul id="ul1"></ul>
- </body>
分析：
红色部分调用了ajax()函数，先分析ajax函数，其中参数列表里的success就是回调函数，当此函数执行到某一步骤之后就会判断success函数是否存在，换句话说success本身而言是一个形参，而真正要执行的应该是调用该函数时传递进来的函数，在这里是一个html文件中的匿名函数（绿色部分）。用一句话来说，即你先调用我，我回头还要调用你，在这里html文件先调用了ajax()函数并且将要处理的逻辑代码封装成了匿名函数作为回调函数传递给了ajax()，那么就会先执行ajax()函数(html先调用了ajax()函数)，当ajax()函数执行到某一阶段（一般是在函数的结尾）ajax()函数就会去调用html中的的回调函数（绿色部分）并且有时候还会将某些执行结果作为参数(蓝色部分)传递给该回调函数（我回头还要调用你）。