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 相关文章推荐
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
很棒的vue弹窗组件
May 24 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 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获取后台Job管理的实现代码
2011/06/10 PHP
php把session写入数据库示例
2014/02/26 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
jquery tools之tooltip
2009/07/25 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
Python 连连看连接算法
2008/11/22 Python
跟老齐学Python之模块的加载
2014/10/24 Python
Python中的异常处理学习笔记
2015/01/28 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
Django rest framework实现分页的示例
2018/05/24 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
Python list与NumPy array 区分详解
2019/11/06 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
运动会稿件100字
2014/09/24 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
会议主持词结束语
2015/07/03 职场文书