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中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
使用Typescript开发微信小程序的步骤详解
Jan 12 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 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
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
Laravel5中contracts详解
2015/03/02 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
js setTimeout opener的用法示例详解
2013/10/23 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
Python之循环结构
2019/01/15 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
全国税务系统先进集体事迹材料
2014/05/19 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers