zepto源码学习-05 ajax

学习zeptoajax之前需要先脑补下，强烈推荐此文http://www.cnblogs.com/heyuquan/archive/2013/05/13/js-jquery-ajax.html

还有Aaron 的jquery源码分析系列，讲jquery的ajax的部分，当然其他也可以看，很值得学习。

zepto ajax部分的设计相对简单，毕竟zepto就是轻量级的库，没有jqeury那样复杂，jquery ajax是依赖于Deferred模块的，整个代码一千多行。而zepto只有几百行，整体设计相对简单，ajax部分可以不依赖于Deferred模块，独立运行。zepto ajax的使用相见地址，先看懂使用然后再分析具体实现。

先看一个demo

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Ajax</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style type="text/css" media="screen">
        button{
            width:150px;
            height:100px;
            line-height:100px;
            margin:5px;
        }
    </style>
</head>
<body>
    <button type="" id="btnTest">testajax</button>
    <script type="text/javascript" src="../zepto-full-1.1.6.js"></script>
    <script>
        // 全局事件
        $(document).on('ajaxStart',function (e) {
                log('触发ajaxStart回调函数');
        }).on('ajaxSend',function (e) {
                log('触发ajaxSend回调函数');
        }).on('ajaxBeforeSend',function (e) {
                log('触发ajaxBeforeSend回调函数');
        }).on('ajaxSuccess',function (e, jqXHR, s, data) {
                log('触发ajaxSuccess回调函数');
        }).on('ajaxError',function (e, jqXHR, s, errorData) {
                log('触发ajaxError回调函数');
        }).on('ajaxComplete',function (e, jqXHR, s) {
                log('触发ajaxComplete回调函数');
        }).on('ajaxStop',function (e) {
                log('触发ajaxStop回调函数');
        });

        $('#btnTest').on('click',bindLocalEvent);
        // 局部事件
        function bindLocalEvent(e) {
                var textareaid ='txt_event';             
                $.ajax({
                //跨域地址http://192.168.11.198:8080/myTest/test/ajax-page.php
                //ajax.php
                url:'ajax.php',//ajax.php
                            type: 'get',
                            dataType: 'json',//text、json、jsonp
                data:{
                    msg:'testtest',
                    error:3
                },
                        //global: true,
                        //cache: false,
                //jsonpCallback:log2,
                        beforeSend: function (jqXHR, s) {
                            log('触发beforeSend回调函数');
                        },
                //zepto 不支持
                        dataFilter: function (data, dataType) {
                            log('触发dataFilter回调函数');
                    return data;
                        },
                        success: function (data, statusText, jqXHR) {
                                log('触发success回调函数');
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                                log('触发error回调函数');
                        },
                        complete: function (jqXHR, textStatus) {
                                log('触发complete回调函数');
                        }}).done(function(){
                    console.log('触发ajax done',this,[].slice.call(arguments));
                });
        }

        function log(txt) {
            console.log(txt);
        }
        function log2(txt) {
            console.log('------------jsonpCallback------------------');
            //return function name
            return 'log3';
        }
        function log3(txt) {
            console.log('------------jsonpCallback done------------------');
        }
    </script>
</body>
</html>

ajax demo