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编程起步(第二课)
Feb 27 Javascript
ajax 文件上传应用简单实现
Mar 03 Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
javascript表单正则应用
Feb 04 Javascript
webpack 模块热替换原理
Apr 09 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
js实现二级导航功能
2017/03/03 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
vue实现分页组件
2020/06/16 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
python显示生日是星期几的方法
2015/05/27 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
大专应届生个人的自我评价
2013/11/21 职场文书
秋天的雨教学反思
2014/04/27 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python