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 面向对象全新理练之继承与多态
Dec 03 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 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
Cygwin中安装PHP方法步骤
2015/07/04 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
python递归计算N!的方法
2015/05/05 Python
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
python实现随机漫步算法
2018/08/27 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
python异步Web框架sanic的实现
2020/04/27 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
内部类的定义、种类以及优点
2013/10/16 面试题
竞选演讲稿范文
2013/12/28 职场文书
品质口号大全
2014/06/17 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
家长会感言
2015/08/01 职场文书
《学会看病》教学反思
2016/02/17 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
如何自己动手写SQL执行引擎
2021/06/02 MySQL
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL