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实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
Javascript复制实例详解
Jan 28 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
Vue学习之常用指令实例详解
Jan 06 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数组无限分级数据的层级化处理代码
2012/12/29 PHP
php除数取整示例
2014/04/24 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
php自定义分页类完整实例
2015/12/25 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python进阶篇之字典操作总结
2016/11/16 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
用python实现百度翻译的示例代码
2018/03/09 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
NumPy 数组使用大全
2019/04/25 Python
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
酒店总经理工作职责
2013/12/13 职场文书
优秀员工表扬信
2014/01/17 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
昆虫记读书笔记
2015/06/26 职场文书
Spring中的@Transactional的工作原理
2022/06/05 Java/Android