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 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
论JavaScript模块化编程
Mar 07 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
微信小程序页面间值传递的两种方法
Nov 26 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
PHP SQLite类
2009/05/07 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
王纯业的Python学习笔记 下载
2007/02/10 Python
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
用python处理MS Word的实例讲解
2018/05/08 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
后勤工作职责
2013/12/22 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
作弊检讨书范文
2015/05/06 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python