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 中介者模式实例
Dec 16 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
vue backtop组件的实现完整代码
Apr 07 Vue.js
用JS实现飞机大战小游戏
Jun 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 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
smarty简单入门实例
2014/11/28 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
document.compatMode介绍
2009/05/21 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
Python实现购物程序思路及代码
2017/07/24 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
Python算法中的时间复杂度问题
2019/11/19 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
tensorboard显示空白的解决
2020/02/15 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
程序集与命名空间有什么不同
2014/07/25 面试题
企业管理标语
2014/06/10 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers