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 相关文章推荐
对table和ul实现js分页示例分享
Feb 24 Javascript
Augularjs-起步详解
Jul 08 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
ES6学习教程之Promise用法详解
Nov 22 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
JS实现php的伪分页
2008/05/25 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
Python list操作用法总结
2015/11/10 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
用Python解数独的方法示例
2019/10/24 Python
浅析Django中关于session的使用
2019/12/30 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
python实现计算图形面积
2021/02/22 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
个人找工作的自我评价
2013/10/17 职场文书
优秀医生事迹材料
2014/02/12 职场文书
代领毕业证委托书
2014/08/02 职场文书
毕业生个人总结
2015/02/28 职场文书
学校中秋节活动总结
2015/03/23 职场文书
电影复兴之路观后感
2015/06/02 职场文书
千手观音观后感
2015/06/03 职场文书
导游词之张家口
2019/12/13 职场文书
Python编写冷笑话生成器
2022/04/20 Python