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 timers计时器简单应用说明
Oct 28 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
node.js处理前端提交的GET请求
Aug 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
基于mysql的论坛(1)
2006/10/09 PHP
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
python发腾讯微博代码分享
2014/01/10 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
python使用turtle绘制分形树
2018/06/22 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
货代行业个人求职简历的自我评价
2013/10/22 职场文书
实习生评语
2014/04/26 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL