非常适合新手的jq/zepto源码分析08---ajax的封装

简介: 1.现在看看对JSONP的封装 $.ajaxJSONP = function(options, deferred){ if (!('type' in options)) return $.

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    我的博客,来看吧!

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

相关文章
|
5月前
jq+ajax上传图片信息
jq+ajax上传图片信息
25 1
|
6月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
6月前
|
前端开发 API
用promise封装ajax
用promise封装ajax
45 0
|
12月前
|
前端开发 JavaScript API
Promise封装Ajax请求
Promise封装Ajax请求
53 0
|
前端开发 JavaScript
js - 封装ajax
简单封装/使用promise封装ajax/封装:$.ajax()
|
XML 前端开发 JavaScript
Ajax介绍以及工作原理和实现详解(JS实现Ajax 和 JQ实现Ajax)
Ajax介绍以及工作原理和实现详解(JS实现Ajax 和 JQ实现Ajax)
189 0
|
小程序 前端开发
N..
|
6月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
64 1
|
6月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
65 0
|
5月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
44 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]