JavaScript中模拟实现jsonp


Posted in Javascript onJune 19, 2015
function prescript(s) {
    if (s.cache === undefined) {
      s.cache = false;
    }
    if (s.crossDomain) {
      s.type = "GET";
    }
  }


  function prejsonp(s, originalSettings, jqXHR) {
    // 给回调函数命名
    var callbackName = s.jsonpCallback
    s.url += (/(?:)/.test(s.url) ? "&" : "?") + s.jsonp + "=" + callbackName;
    // 脚本执行后使用数据转换器来检索json
    // 提供给代码获取服务器的是据
    s.getData = function() {
      if (!responseContainer) {
        jQuery.error(callbackName + " was not called");
      }
      return responseContainer[0];
    };
    //修改处理机制
    s.dataTypes[0] = "json";
    // 创建一个全局函数
    overwritten = window[callbackName];
    //用来收集服务器给的数据
    window[callbackName] = function() {
      responseContainer = arguments;
    };

    return "script";
  }

  /**
   * jsonp的预先处理
   */
  function inspectPrefiltersOrTransportsA(options, originalOptions, jqXHR) {
    //预处理jsonp
    var dataTypeOrTransport = prejsonp(options, originalOptions, jqXHR)
    //扩充dataTypes
    options.dataTypes.unshift(dataTypeOrTransport);
    //预处理script类型
    prescript(options)
  }


  /**
   * 分发器
   * @return {[type]} [description]
   */
  function inspectPrefiltersOrTransportsB(s, originalOptions, jqXHR) {
    return {
      send: function(_, complete) {
        var script = jQuery("<script>").prop({
          async: true,
          charset: s.scriptCharset,
          src: s.url
        }).on(
          "load error",
          callback = function(evt) {
            script.remove();
            callback = null;
            if (evt) {
              complete()
            }
          }
        );
        //<script async="" src="http://192.168.1.113:8080/github/jQuery/jsonp.php
        document.head.appendChild(script[0]);
      }
    }
  }

  /**
   * 模拟ajax的 jsonp请求
   * @param {[type]} options [description]
   * @return {[type]}     [description]
   */
  function createAjax(options) {

    if (typeof url === "object") {
      options = url;
      url = undefined;
    }

    options = options || {};

    /**
     * 参数
     * jQuery.ajaxSetup 是默认参数
     * @type {[type]}
     */
    var s = jQuery.ajaxSetup({}, options);

    // Deferreds
    // 异步机制
    var deferred = jQuery.Deferred();
    var completeDeferred = jQuery.Callbacks("once memory");

    /**
     * 实际返回的ajax对象
     * @type {Object}
     */
    var jqXHR = {}

    // 把jqXHR对象转化promise对象,?占尤?omplete、success、error方法
    deferred.promise(jqXHR).complete = completeDeferred.add;
    //别名
    jqXHR.success = jqXHR.done;
    jqXHR.error = jqXHR.fail;

    s.dataTypes = jQuery.trim(s.dataType || "*").toLowerCase().match(/(?:)/) || [""];

    //预处理
    inspectPrefiltersOrTransportsA(s, options, jqXHR);

    for (i in {
      success: 1,
      error: 1,
      complete: 1
    }) {
      jqXHR[i](s[i]);
    }

    /**
     * 分发器
     */
    transport = inspectPrefiltersOrTransportsB(s, options, jqXHR);

    function done(status, nativeStatusText, responses, headers) {
      console.log(s,s.getData())
    }

    //发送请求
    transport.send(s, done);

    return jqXHR;
  }


  function show(data){
    $('body').append('<li>'+ data +'</li>');
  }

  /**
   * 数据回调接收
   * @return {[type]} [description]
   */
  function flightHandler(){

  }

  $("#test").click(function(){
    //执行一个异步的HTTP(Ajax)的请求。
    var ajax = createAjax({
      url: 'http://192.168.1.113:8080/github/jQuery/jsonp.php',
      data: {
        'action': 'aaron'
      }, // 预传参的数组
      dataType: 'jsonp', // 数据类型
      jsonp: 'callback', // 指定回调函数名,与服务器端接收的一致,并回传回来
      jsonpCallback:flightHandler,
      success: function() {
        show('局部事件success')
      }
    })
  })
Javascript 相关文章推荐
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
javascript 出生日期和身份证判断大全
Nov 13 Javascript
JavaScript执行效率与性能提升方案
Dec 21 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 #Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 #Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 #Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 #Javascript
javascript格式化日期时间方法汇总
Jun 19 #Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 #Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 #Javascript
You might like
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
使用python遍历指定城市的一周气温
2017/03/31 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
python写一个随机点名软件的实例
2019/11/28 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
自荐信怎么写好
2013/11/11 职场文书
室内设计专业个人的自我评价
2013/12/18 职场文书
家具促销活动方案
2014/02/16 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
售后服务承诺函格式
2015/01/21 职场文书
会计入职心得体会
2016/01/22 职场文书
详解jQuery的核心函数和事件处理
2022/02/18 jQuery
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android
Go语言怎么使用变长参数函数
2022/07/15 Golang