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 相关文章推荐
javascript 命名空间以提高代码重用性
Nov 13 Javascript
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 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 引用(&amp;)详解
2009/11/20 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
PHP 第二节 数据类型之数值型
2012/04/28 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
python广度优先搜索得到两点间最短路径
2019/01/17 Python
Django实现学员管理系统
2019/02/26 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
python实现实时视频流播放代码实例
2020/01/11 Python
详解python itertools功能
2020/02/07 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
如何基于Python按行合并两个txt
2020/11/03 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
军训心得体会
2013/12/31 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
员工安全生产承诺书
2014/05/22 职场文书
世界读书日的活动方案
2014/08/20 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
Python中如何处理常见报错
2022/01/18 Python
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL