对ajax回调函数的研究
假如你现在还在为自己的技术担忧，假如你现在想提升自己的工资，假如你想在职场上获得更多的话语权，假如你想顺利的度过35岁这个魔咒，假如你想体验BAT的工作环境，那么现在请我们一起开启提升技术之旅吧，详情请点击http://106.12.206.16:8080/qingruihappy/index.html
1.1开发中遇到的问题
最近开发中我和同事都碰到这样的问题，我们使用jQuery的ajax方法做服务端的校验，在success方法里将验证结果存储到一个js的公共变量或者是页面里的隐藏域，接下来的代码我们会根据这个公共的js变量或者是这个隐藏域里的值判断下一步的操作，但是这样做的结果很让人失望，我们发现js公共变量的值或者是隐藏域的值并没有改变，从而导致我们下面的代码无法正常运行。下面我模拟这个问题产生的代码，代码如下：
callback.js:
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>回调函数 CallBack Function Study</title>
7 </head>
8 <script type="text/javascript" src="jquery-1.7.1.js"></script>
9 <body>
10 <form>
11 <label for="txt">
12 文本框：
13 </label>
14 <input type="text" id="txt" name="txt" size="32"/>
15
16 <input type="button" id='btn01' name='btn01' value='BUTTON01'/>
17 </form>
18 </body>
19 </html>
20 <script type="text/javascript">
21 var outerdata = '00';
22 $(document).ready(function(){
23 $('#txt').val('000000');//给文本框初始值
24 $('#btn01').bind('click',function(){
25 $.ajax({
26 type: "POST",
27 url: "<%=request.getContextPath() %>/vumssmer/vmerservice!studyCallBack.do",
28 data:'',
29 success:function(msg){
30 console.log('msg.vflag:' + msg.vflag);
31 console.log('msg.vmsg:' + msg.vmsg);
32 $('#txt').val(msg.vflag);
33 outerdata = msg.vflag;
34 }
35 });
36 if (outerdata == 'true'){
37 console.log('文本框内容是:' + $('#txt').val());
38 console.log('公共变量的值是:' + outerdata);
39 console.log('yes');
40 }else{
41 console.log('文本框内容是:' + $('#txt').val());
42 console.log('公共变量的值是:' + outerdata);
43 console.log('no');
44 }
45 });
46 });
47
48 </script>java 代码
1 public String studyCallBack() throws Exception{
2 this.vflag = "true";
3 this.vmsg = "Number:9999999";
4 return "validateServerBack";
5 }注意：console.log方法只有在firebug里使用才有效】
执行结果是，如图1-1：
图1-1
服务端我设定的返回值vflag：true，vmsg：Number：9999999，success方法打印的结果是正确，但是接下来的代码却执行错误了。
以上就是我们在开发过程中遇到的问题，下面我会从这个现象一步步研究，希望最终的结论与正确的答案一致。
1.2研究“开发中遇到问题”的过程
我首先把btn01的click事件拆分为两个独立的按钮事件，大家看callback.jsp的代码：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>回调函数 CallBack Function Study</title>
7 </head>
8 <script type="text/javascript" src="jquery-1.7.1.js"></script>
9 <body>
10 <form>
11 <label for="txt">
12 文本框：
13 </label>
14 <input type="text" id="txt" name="txt" size="32"/>
15
16 <input type="button" id='btn01' name='btn01' value='BUTTON01'/>
17
18 <input type="button" id='btn02' name='btn02' value='BUTTON02'"/>
19
20 <input type="button" id='btn03' name='btn03' value='BUTTON03'/>
21 </form>
22 </body>
23 </html>
24 <script type="text/javascript">
25 var outerdata = '00';
26 $(document).ready(function(){
27 $('#txt').val('000000');
28 $('#btn01').bind('click',function(){
29 $.ajax({
30 type: "POST",
31 url: "<%=request.getContextPath() %>/vumssmer/vmerservice!studyCallBack.do",
32 data:'',
33 success:function(msg){
34 console.log('msg.vflag:' + msg.vflag);
35 console.log('msg.vmsg:' + msg.vmsg);
36 $('#txt').val(msg.vflag);
37 outerdata = msg.vflag;
38 }
39 });
40 if (outerdata == 'true'){
41 console.log('文本框内容是:' + $('#txt').val());
42 console.log('公共变量的值是:' + outerdata);
43 console.log('yes');
44 }else{
45 console.log('文本框内容是:' + $('#txt').val());
46 console.log('公共变量的值是:' + outerdata);
47 console.log('no');
48 }
49 });
50 $('#btn02').bind('click',function(){
51 $.ajax({
52 type: "POST",
53 url: "<%=request.getContextPath() %>/vumssmer/vmerservice!studyCallBack.do",
54 data:'',
55 success:function(msg){
56 console.log('msg.vflag:' + msg.vflag);
57 console.log('msg.vmsg:' + msg.vmsg);
58 $('#txt').val(msg.vflag);
59 outerdata = msg.vflag;
60 }
61 });
62 });
63 $('#btn03').bind('click',function(){
64 if (outerdata == 'true'){
65 console.log('文本框内容是:' + $('#txt').val());
66 console.log('公共变量的值是:' + outerdata);
67 console.log('yes');
68 }else{
69 console.log('文本框内容是:' + $('#txt').val());
70 console.log('公共变量的值是:' + outerdata);
71 console.log('no');
72 }
73 });
74 });
75 </script>页面的效果是，如图2-1：
图2-1
我们先点击BUTTON2按钮，再点击BUTTON3按钮，结果如下，如图2-2：
图2-2
这时的结果是正确的。
这到底是怎么回事了？？？
我们仔细看看两次代码的区别了，btn01的代码都在一个函数里，而btn02和btn03的代码分属在不同的function里，我们再看看图1-1里显示的结果，打印出来的结果并没有按照代码的顺序，if里的打印代码先打印，而ajax的success方法里的代码后打印的。这说明如果代码在一个function里，if代码会先于success里的代码被执行，代码并不是按我们书写代码的顺序执行的。
对ajax熟悉的人都应该知道，我们处理ajax请求回来的结果都要定义一个回调函数，那么产生上面现象是不是因为回调函数都会在包含它的函数里滞后执行了。为了解开这个疑问，我做了如下的测试，大家看下面的callback.jsp代码：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>回调函数 CallBack Function Study</title>
7 </head>
8 <body>
9 <form>
10 <label for="txt">
11 文本框：
12 </label>
13 <input type="text" id="txt" name="txt" size="32"/>
14 <input type="button" id='btn' name='btn' value='BUTTON' οnclick="btnclick()"/>
15 </form>
16 </body>
17 </html>
18 <script type="text/javascript">
19 var $ = function(){
20 return document.getElementById(arguments[0]);
21 }
22
23 window.onload = function(){
24 $('txt').value = '11111';
25 }
26
27 var staticnum = '000';
28
29 function btnclick(){
30 usedftn('true',callback);
31 }
32
33 function usedftn(flag,cbftn){
34 cbftn(flag);
35 if (staticnum == 'true'){
36 console.log('公共变量的值是:' + staticnum);
37 console.log('文本框内容是:' + $('txt').value);
38 console.log('yes');
39 }else{
40 console.log('公共变量的值是:' + staticnum);
41 console.log('文本框内容是:' + $('txt').value);
42 console.log('no');
43 }
44 }
45
46 function callback(){
47 if (arguments[0] != null && arguments[0] != ''){
48 staticnum = arguments[0];
49 $('txt').value = arguments[0];
50 console.log('回调函数公共变量的值是:' + staticnum);
51 console.log('回调函数文本框内容是:' + $('txt').value);
52 }
53 }
54 </script>执行的结果如下：
图2-3
执行的结果是函数是按代码顺序执行。这和jQuery的ajax执行结果不同，那是不是因为jQuery代码的写法所导致的呢？ jQuery代码是通过匿名函数设计的，里面的jQuery对象是按照json的格式定义的，如是我把代码更改成这样的，代码如下：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>回调函数 CallBack Function Study</title>
7 </head>
8 <body>
9 <form>
10 <label for="txt">
11 文本框：
12 </label>
13 <input type="text" id="txt" name="txt" size="32"/>
14 <input type="button" id='btn' name='btn' value='BUTTON'/>
15 </form>
16 </body>
17 </html>
18 <script type="text/javascript">
19 window.onload = function(){
20 document.getElementById('txt').value = '11111';
21 }
22 var staticnum = '000';
23
24 (function(window,undefined){
25 var document = window.document,navigator = window.navigator,location = window.location,
26 $ = function(){
27 return document.getElementById(arguments[0]);
28 };
29 var xQuery = {
30 xnum:'111',
31 usedftn:function(flag,cbftn){
32 cbftn(flag);
33 if (staticnum == 'true'){
34 console.log('公共变量的值是:' + staticnum);
35 console.log('文本框内容是:' + $('txt').value);
36 console.log('xQuery内部的xnum值是:' + xQuery.xnum);
37 console.log('yes');
38 }else{
39 console.log('公共变量的值是:' + staticnum);
40 console.log('文本框内容是:' + $('txt').value);
41 console.log('xQuery内部的xnum值是:' + xQuery.xnum);
42 console.log('no');
43 }
44
45 if (xQuery.xnum == 'true'){
46 console.log('xQuery 公共变量的值是:' + staticnum);
47 console.log('xQuery 文本框内容是:' + $('txt').value);
48 console.log('xQuery xQuery内部的xnum值是:' + xQuery.xnum);
49 console.log('xQuery yes');
50 }else{
51 console.log('xQuery 公共变量的值是:' + staticnum);
52 console.log('xQuery 文本框内容是:' + $('txt').value);
53 console.log('xQuery xQuery内部的xnum值是:' + xQuery.xnum);
54 console.log('xQuery no');
55 }
56 },
57 callback:function(){
58 if (arguments[0] != null && arguments[0] != ''){
59 staticnum = arguments[0];
60 $('txt').value = arguments[0];
61 xQuery.xnum = arguments[0];
62 console.log('回调函数公共变量的值是:' + staticnum);
63 console.log('回调函数文本框内容是:' + $('txt').value);
64 }
65 },
66 xAttachBtnEvt:function(){
67 if (arguments[0] != null && arguments[0] != ''){
68 $(arguments[0]).onclick = function(){
69 //this.usedftn('true',this.callback);改代码会出错，因为绑定按钮事件后this的指向变为了window了，而不是xQuery
70 xQuery.usedftn('true',xQuery.callback);
71 };
72 }
73 }
74 };
75
76 window.xQuery = window.$$ = xQuery;
77 })(window);
78
79 $$.xAttachBtnEvt('btn');//为按钮绑定click事件
80 </script>执行结果如下，如图2-4：
图2-4
结果是按代码书写顺序执行的，看来不是javascript回调函数引起的上面的问题。
如果不是回调函数那么就应该是ajax本身了。
这里我还是按照jQuery的结构来写实例代码，ajax使用原生态的方式编写，这样会让我们探讨的问题更加清晰，代码如下：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>回调函数 CallBack Function Study</title>
7 </head>
8 <body>
9 <form>
10 <label for="txt">
11 文本框：
12 </label>
13 <input type="text" id="txt" name="txt" size="32"/>
14 <input type="button" id='btn' name='btn' value='BUTTON'/>
15 </form>
16 </body>
17 </html>
18 <script type="text/javascript">
19 window.onload = function(){
20 document.getElementById('txt').value = '11111';
21 }
22 var staticnum = '000';
23
24 (function(window,undefined){
25 var document = window.document,navigator = window.navigator,location = window.location,
26 $ = function(){
27 return document.getElementById(arguments[0]);
28 };
29 var xQuery = {
30 xnum:'1111',
31 type:'GET',
32 url:'wwww.baidu.com',
33 xmlHttp:'',
34 createXMLHttpRequest:function(){
35 if (window.XMLHttpRequest){
36 // IE7+, Firefox, Chrome, Opera, Safari
37 this.xmlHttp = new XMLHttpRequest();
38 }else{
39 // IE6, IE5
40 this.xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
41 }
42 },
43 ajaxftn:function(ajaxdata){
44 this.type = ajaxdata.type;
45 this.url = ajaxdata.url;
46 this.createXMLHttpRequest();
47 this.xmlHttp.open(this.type,this.url,true);
48 this.xmlHttp.onreadystatechange = this.jsonCallBack;
49 this.xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");//使用POST传递信息时候用到的
50 this.xmlHttp.send(null);
51 if (staticnum == 'true'){
52 console.log('公共变量的值是:' + staticnum);
53 console.log('文本框内容是:' + $('txt').value);
54 console.log('xQuery内部的xnum值是:' + this.xnum);
55 console.log('yes');
56 }else{
57 console.log('公共变量的值是:' + staticnum);
58 console.log('文本框内容是:' + $('txt').value);
59 console.log('xQuery内部的xnum值是:' + this.xnum);
60 console.log('no');
61 }
62
63 if (this.xnum == 'true'){
64 console.log('xQuery 公共变量的值是:' + staticnum);
65 console.log('xQuery 文本框内容是:' + $('txt').value);
66 console.log('xQuery xQuery内部的xnum值是:' + this.xnum);
67 console.log('xQuery yes');
68 }else{
69 console.log('xQuery 公共变量的值是:' + staticnum);
70 console.log('xQuery 文本框内容是:' + $('txt').value);
71 console.log('xQuery xQuery内部的xnum值是:' + this.xnum);
72 console.log('xQuery no');
73 }
74 },
75 jsonCallBack:function(){
76 if (xQuery.xmlHttp.readyState == 4){
77 if (xQuery.xmlHttp.status == 200){
78 xQuery.parseResults();
79 }
80 }
81 },
82 parseResults:function(){
83 var retval = eval('('+ xQuery.xmlHttp.responseText +')');
84 console.log('服务端返回的vflag值：' + retval.vflag);
85 console.log('服务端返回的vmsg值：' + retval.vmsg);
86 $('txt').value = retval.vflag;
87 staticnum = retval.vflag;
88 xQuery.xnum = retval.vflag;
89 },
90 xAttachBtnEvt:function(){
91 if (arguments[0] != null && arguments[0] != ''){
92 $(arguments[0]).onclick = function(){
93 xQuery.ajaxftn({'type':'POST','url':'<%=request.getContextPath() %>/vumssmer/vmerservice!studyCallBack.do'});
94 };
95 }
96 }
97 };
98
99 window.xQuery = window.$$ = xQuery;
100 })(window);
101
102 $$.xAttachBtnEvt('btn');//为按钮绑定click事件
103 </script>结果如图2-5所示：
图2-6
这个结果就和我们调用jQuery的ajax方法的结果一样了。
我的研究过程就是这样了，下面就是我的分析结果了。
1.3我的分析结果
首先我要讲讲javascript里回调函数到底是怎么回事。回调函数在编程语言里很普遍，java里面也有，百度百科里有对回调函数的定义：
回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数，当这个指针被用为调用它所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。
详情可以参见：
http://baike.baidu.com/view/414773.htm
我们这里不讲回调函数实际运用的场景，从编码角度，回调函数和调用回调函数的函数是一个统一的整体，他们在执行上是按照代码编写的顺序至上而下的。
我在学习ajax时候，我看的书籍上都写到onreadystatechange要赋一个回调函数，那么按照上面的结论我们在“开发问题中”写的代码应该能正常运行，但是结果却恰恰相反。
难道ajax的onreadystatechange存储的不是我们通常理解的回调函数吗？或者是ajax有自己特别的回调机制吗？
我的回答是onreadystatechange存储的是回调函数也没有什么特别的回调机制，但它不是被执行在我们所写的调用ajax方法内的回调函数，而是浏览器执行XMLHttpRequest请求里面的回调函数，我们书写的我们写的：
this.xmlHttp.onreadystatechange = this.jsonCallBack;
只是在为onreadystatechange做赋值操作。因此我们在执行我们自己编写的ajax函数时候onreadystatechange存储的函数是不会被调用的，因为这只是一个赋值操作。
那什么时候执行onreadystatechange存储的回调函数呢？当我们的ajax请求被成功的返回值以后，调用到了onreadystatechange存储的回调函数，回调函数就被执行了，这就是我们看到success函数里的代码会滞后于我们编写的ajax调用方法的原因所在。
在我写的代码里，ajax里的onreadystatechange存储回调函数我都是用xQuery.xnum、xQuery.xmlHttp调用xQuery里的方法，而不是this，大家可以试试把代码改成用this调用，最后firebug结果会表现为this.xmlHttp没有定义之类的提示，这个也反向说明了回调函数调用的时候已经脱离了原来方法而变成了一个独立的方法，因此我们存储的回调函数所使用的变量一定要在一个公共作用域里，因此使用了xQuery来存储变量。
以上的结论我们可以纠正对ajax调用几个错误的理解：
1. ajax里面的回调函数的调用机制是一种特别的机制，它与javascript普通回调函数的使用不一样；
2. ajax回调函数的作用域和ajax调用函数作用域的不同而引起的代码不能正常运行。
正确的理解应该是：
Ajax里的回调函数只是我们赋值给XMLHttpRequest对象的回调函数，它的执行和我们所写的调用ajax函数无关。
实际运用中如果我们想在执行完ajax请求后，根据请求结果执行相关的逻辑，那么请把逻辑写在ajax的回调函数里，只有这样才能让代码按业务逻辑正常运行。
对ajax回调函数的研究相关推荐
- java如何构造ajax回调参数,jQuery实现ajax回调函数带入参数的方法示例
本文实例讲述了jQuery实现ajax回调函数带入参数的方法.分享给大家供大家参考,具体如下: 不带参数的写法: function pass(htmlId,auditingFlag){ var url ...
- ajax回调函数有时成功有时失败,javascript - Ajax 回调函数行为随机。我做错了什么？...
我有以下行为随机的 ajax 函数.有时会显示警报 success finally.在其他情况下,第二个警报是 显示 Failure: my status is 500. promptId 从调用函数 ...
- 解决ajax回调函数无返回值得问题
解决ajax回调函数无返回值得问题 参考文章: (1)解决ajax回调函数无返回值得问题 (2)https://www.cnblogs.com/lzxlfly/p/5879167.html (3)ht ...
- jQuery AJAX回调函数this指向问题
了解JavaScript的人都知道JavaScript的this不总是指向当前对象,函数或类中的this指向与调用这个函数的对象以及上下文环境是息息相关的.如在全局作用域调用一个含this的对象,此时 ...
- Ajax回调函数无反应及进erro问题记录。
一:问题描述 ajax回调函数,明明后台返回成功了,前端一直进Erro 二:问题反思 1.前端知识体系认知的不够完善.一直做后端的我,总感觉ajax套用模版就好,普通的模版,只有success,没写e ...
- spring返回数据使用ajax,【spring 后台跳转前台】使用ajax访问的后台，后台正常执行，返回数据，但是不能进入前台的ajax回调函数中...
问题1: 使用ajax访问的后台,后台正常执行,并且正常返回数据,但是不能进入前台的ajax回调函数中 问题展示: 问题解决: 最后发现是因为后台的方法并未加注解:@ResponseBody,导致方法 ...
- ajax回调函数的返回值,使用ajax和回调函数向函数传递/返回值
我试图读p_info函数返回从函数getproductInfo包含ajax调用,但我得到未定义的值.我使用回调函数来实现这一点,但仍然无法正常工作.我错在哪里?使用ajax和回调函数向函数传递/返回值 ...
- asp.net ajax回调函数
javascript 调用后台类(webservice)的语法: 类名.方法名(参数1,参数2,--,参数n,回调函数) 调用上有两个差别:一是不需要使用变量接收返回值,二是要在所有参数后面加一个参数 ...
- ajax回调函数 异步延迟
回调函数有延迟.加上 async:false之后解决问题. 不加的话.先return,然后才执行回调函数. /** 检测是否有导出权限 */function isExpExcelAdmin(){var ...
最新文章
- 【自然框架】分享 n级联动下拉列表框
- Vue.js：监听属性
- 无关技术，关于香港对我的影响
- activemq jdbc mysql_activeMQ JDBC Master Slave
- Maven之pom.xml常用标签解析及镜像配置
- Android UI-实现底部切换标签（fragment)
- python 自动加载_【python】命令行下自动加载模块和tab补全功能
- nvm 下载node 下载不下来_音乐下载 黄子韬爸妈可以不走吗
- iconfont阿里巴巴矢量图标引入方法
- 个人软件定制开发多少钱，怎么核算
- 计算机基础知识面试题集合（包含计网OSI、TCP/IP、HTTP、TCP、UDP、三次握手、四次挥手、OS进程线程、死锁，常见数据结构及排序，Linux常用命令、数据库基础等。）
- Robot Framework installation not found. To run tests, you need to install Robot Framework separately
- 学者该如何快速入门Python？内附十年Python程序员详细学习攻略
- 5款移动开发轻量jQuery的替代品
- 必收藏的实用网站（一）
- 外贸客户来源的渠道有哪些?
- caffe学习笔记2：net forward与backward
- 软件测试怎么做？靠谱第三方软件测评公司有哪些？
- SpriteKit:模拟器中播放效果音有延时的解决办法
- 从 DP 到 DDP 到 apex
热门文章
- jquery 使用小技巧
- jstatd，VisualVM使用和报错解决：Could not create remote object--java.security.AccessControlException
- LeetCode 122. Best Time to Buy and Sell Stock II--贪心--Java,C++,Python解法
- 华为鸿蒙概念机990,华为5G概念新机：鸿蒙OS系统+麒麟990+石墨烯 安卓机皇来势汹汹...
- ios 位置服务器,iOS 14 隐私保护：管理和控制共享的位置信息
- Core Graphics
- 台达asda-b2伺服驱动器说明书_REXROTH力士乐DKC系列伺服放大器LED灯都
- 大佬来告诉你在遇到B站崩了，如何防止类似事故的出现？
- linux编程取消wait函数,Linux编程基础之进程等待(wait()函数).pdf
- 运维企业专题（1）HTTP加速器——Varnish缓存机制前篇