zoukankan      html  css  js  c++  java
  • 非常适合新手的jq/zepto源码分析08---ajax的封装

    1.现在看看对JSONP的封装

            $.ajaxJSONP = function(options, deferred){
                if (!('type' in options)) return $.ajax(options)   //不存在type 直接调用$.ajax
    
                var _callbackName = options.jsonpCallback,    //回调函数名称
                    callbackName = ($.isFunction(_callbackName) ?
                            _callbackName() : _callbackName) || ('Zepto' + (jsonpID++)),
                    script = document.createElement('script'),  //创建一个script标签
                    originalCallback = window[callbackName],
                    responseData,
              //绑定一个错误函数 abort = function(errorType) {
                //触发script的 error 时间 $(script).triggerHandler('error', errorType || 'abort') }, xhr = { abort: abort }, abortTimeout if (deferred) deferred.promise(xhr)          $(script).on('load error', function(e, errorType){ clearTimeout(abortTimeout) $(script).off().remove() //删除所有事件,并移除 if (e.type == 'error' || !responseData) { ajaxError(null, errorType || 'error', xhr, options, deferred) //报错 } else {
                 //传入参数执行函数  ajaxSuccess(responseData[0], xhr, options, deferred) //成功 } window[callbackName] = originalCallback
               if (responseData && $.isFunction(originalCallback)) originalCallback(responseData[0])           //清除字段 originalCallback = responseData = undefined })         //执行开始函数,返回false 则停止 if (ajaxBeforeSend(xhr, options) === false) { abort('abort') return xhr } window[callbackName] = function(){
              //回调函数,这个函数会在后端执行,并传入数据,我们传递给responseDate字段,然后就会去执行 script 加载完成 responseData = arguments }         //设置请求的地址并且加上回调函数名称 script.src = options.url.replace(/?(.+)=?/, '?$1=' + callbackName) document.head.appendChild(script)         //设置超时处理 if (options.timeout > 0) abortTimeout = setTimeout(function(){ abort('timeout') }, options.timeout) return xhr }

      

     function parseArguments(url, data, success, dataType) {
                if ($.isFunction(data)) dataType = success, success = data, data = undefined
                if (!$.isFunction(success)) dataType = success, success = undefined
                return {
                    url: url
                    , data: data
                    , success: success
                    , dataType: dataType
                }
            }
    
            $.get = function(/* url, data, success, dataType */){
                return $.ajax(parseArguments.apply(null, arguments))
            }
    
            $.post = function(/* url, data, success, dataType */){
                var options = parseArguments.apply(null, arguments)
                options.type = 'POST'
                return $.ajax(options)
            }
    
            $.getJSON = function(/* url, data, success */)
    

      

    get / post / getJson 在 ajax的基础上封装了再次封装了。

    zepto基本差不多完成了,

    看了之后,不难发现,zepto也就有几大模块: 选择器 , 一些js原生方法的封装 , 事件模型模块 , 再就是 ajax 的封装 。

    代码仅供参考,具体功能可以自己扩展。

    http://www.cnblogs.com/jiebba/p/6529854.html 

    http://www.cnblogs.com/jiebba    我的博客,来看吧!

    如果有错误,请留言修改下 哦!

  • 相关阅读:
    leetcode Ch2-Dynamic Programming I
    leetcode Ch3-DFS & Backtracking II
    关于尾递归
    leetcode BFS
    linux各文件夹的作用
    auto_ptr与shared_ptr ZZ
    漏洞分析中常用的堆调试支持
    【读书笔记】Android平台的漏洞挖掘和分析
    关于Fuzz——peach的学习
    如何验证一个地址可否使用—— MmIsAddressValid函数分析
  • 原文地址:https://www.cnblogs.com/jiebba/p/6542932.html
Copyright © 2011-2022 走看看