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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
angular中的post请求处理示例详解
Jun 30 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之第二天
2006/10/09 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
JS Array对象入门分析
2008/10/30 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
详解JS函数防抖
2020/06/05 Javascript
Python深入学习之闭包
2014/08/31 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
分析Python读取文件时的路径问题
2018/02/11 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
python getpass模块用法及实例详解
2019/10/07 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
深入了解Python 变量作用域
2020/07/24 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
英文求职信结束语大全
2013/10/26 职场文书
简短证婚人证婚词
2014/01/09 职场文书
运输服务质量承诺书
2014/03/27 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
学生检讨书怎么写
2014/10/09 职场文书
2015年工程师工作总结
2015/04/30 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript