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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
微信JS接口大全
Aug 25 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
详解a++和++a的区别
Aug 30 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
微信小程序版本自动更新的方法
Jun 14 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 has encountered an Access Violation
2007/01/15 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
一个实用的php验证码类
2017/07/06 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
文字幻灯片
2006/06/26 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
使用Vue构建可重用的分页组件
2018/03/26 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
使用Python对Access读写操作
2017/03/30 Python
Python实现调度算法代码详解
2017/12/01 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
千元咖啡店的创业计划书范文
2013/12/29 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
Python Pandas常用函数方法总结
2021/06/15 Python