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 相关文章推荐
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 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不允许用户提交空表单(php空值判断)
2013/11/12 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
PHP中比较时间大小实例
2014/08/21 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
JS实现多选框的操作
2020/06/24 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
Python编码时应该注意的几个情况
2013/03/04 Python
Python使用chardet判断字符编码
2015/05/09 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
房地产还款计划书
2014/01/10 职场文书
物流合作计划书
2014/01/10 职场文书
狼和鹿教学反思
2014/02/05 职场文书
文字自荐书范文
2014/02/10 职场文书
中国好声音华少广告词
2014/03/17 职场文书
员工培训协议书
2014/09/15 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书