Ajax的回调函数

一，为什么要使用回调函数？

首先我们应该明白我们为什么要用回调函数？我们用它能解决什么样的问题。

<script type="text/javascript">
        function d(){}
        (function(){
            (function(){
                var temp ="this is a test";
            })();
        })();
    </script>

(1) 在以上函数d中我们怎样拿到temp的值？
我们应该知道在JS中或者很多语言中，我们每次用一个变量或者函数时，当执行时都会向上找。如下图。

<script type="text/javascript">
        var test = "123";
        function a(){
            alert(test);
        }
    </script>

(2)当我们在函数a中要用到变量test中，我们发现函数内部并没有调用 ,所以我们会去函数外边招。一级一级找，当找到window对象时如果发现还没有找到，则会出现变量未定义的错误。
(3)下面回到我们一开始讨论的问题，怎样在d函数中拿到temp的值呢?看下面方法。

<script type="text/javascript">
            function d(temp){
                alert(temp);
            }
            (function(){
                (function(){
                    var temp = "this is a test";
                    d(temp);
                })();
            })();
</script>

(4)我们采取的方法在匿名函数中调用了d函数并且传了一个temp变量，而在d函数加了一个参数用来接手。
然后拿到值之后，我们就可以为所欲为了。
(5)其实上边拿到函数内部值的过程就是回滚的意思。
(6)而回调函数就是为了解决拿到函数内部的值而产生的。

二、在ajax中我们是怎样应用回调函数的呢？

举一个比较使用的例子。
最终实现目标：在注册表单时判断用户名是否占用。
步骤如下：
(1)在HTML页面中设立一个表单，这个表单包括一个input. 我们想要实现的是在我们光标离开了输入框之后，就会判断该用户名是否可用。如下图

<form>
    <input type="text" id="username" name="username" value=""></input>
    <span id="message"></span>
</form>

(2) 我们封装一个ajax的文件。在这个文件中主要实现两个功能
第一个功能是：通过ID获取DOM对象
第二个功能是：实现通过GET方式的ajax异步传输。
我们这里先写第一个功能。

(function(){
    var $= function(id) //一个能通过id拿到对象的函数
    {
        return document.getElementById(id);
     }
        window.$ = $
})();

(3) 现在我们回到我们的HTML页面中，我们给表单中的input绑定一个onblur事件（也就是失去焦点事件）;

<script type="text/javascript" src="ajax.js"></script>
    <script type="text/javascript">
        $('username').onblur= function(){
            alert("123");
         }
</script>

(4) 接下来我们要通过JS拿到我们所输入的值传递给Ajax对象，然后通过拿到的值让Ajax对象去请求连接PHP。让PHP去比对下有没有我们所输入的值。然后给我们返回结果。我将这个过程再分解成几小步。

[1]在ajax.js中添加一个函数，并且赋给$.

ajax.png

[2]上面写到了callback参数，并且我们又给了他一个参数。这能够说明我们的callback其实就是一个函数传递过来了。那么为什么要使用callback回滚函数呢？

三个字：作用域。我们在一开始的例子里就说了我们的函数或者变量都会向它们的上一级去寻找，而不会向下寻找。但是在这里我们把$.get放在了一个自调用的匿名函数里边。而我们所获取到的responseText内容又在最外层的自调用匿名函数的里层。我们怎样才能拿到数据呢？

这时我们就会想到回调函数，而很多项目也的确是这样用的。

下面我们就写callback函数。

[3]回到静态页面,html中，我们把输入的内容发送到ajax中。

  $('username').onblur=function(){
                var v = $('username').value;
                $.gets("test.php?username="+V,function(message){//拿着内容去请求php，我们假如已经请求成功。    
                    if(message == 1){  //假定已经在成功的状态下，如果用户名已经有了,我们在PHP中会 echo 1;
                        $('span1').innerHTML="很遗憾，已经被占用";
                    }else{   //假定已经在成功的状态下，如果用户名没有,我们在PHP中会 echo 0;
                        $('span1').innerHTML="恭喜您，可以使用";
                    }
                    
                },"text");
            }

[4]我们在上面说了假定用户名有了，我们在PHP中会echo 1;

如果没有则输出0。下面就来实现这个功能。

php.png

[5]PHP服务器的实现。（这里我们就不连接数据库等操作了，模拟下操作）

（5） 现在我们已经全部完成了，大家可以测试了。

三、总结

所谓回调函数其实就是函数调用，只不过在函数里边调用函数外边的函数而已。