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 相关文章推荐
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
Vue父子传递实例讲解
Feb 14 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 Javascript
Vue详细的入门笔记
May 10 Vue.js
基于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小偷的核心程序
2007/04/09 PHP
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
php 文本文件的读取效率
2012/02/10 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
js的对象与函数详解
2019/01/21 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
django实现分页的方法
2015/05/26 Python
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Python实现图片拼接的代码
2018/07/02 Python
关于python 跨域处理方式详解
2020/03/28 Python
python如何建立全零数组
2020/07/19 Python
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
机械设计及其自动化求职推荐信
2014/02/17 职场文书
班组建设经验交流材料
2014/05/12 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书