jsonp封装浅析

原创 2017年11月14日 19:48:58

jsonp封装浅析

   前几天写项目,在获取数据时候,不想再去手写一遍jsonp,于是就上git上找了找,安装了下来,还算好用吧。今天抽出时间,看着源码也不长,就把源码给分析分析,毕竟分析好的源码是进阶的必要。

先贴上官方源码

/**
 * Module dependencies
 */

var debug = require('debug')('jsonp');

/**
 * Module exports.
 */

module.exports = jsonp;

/**
 * Callback index.
 */

var count = 0;

/**
 * Noop function.
 */

function noop(){}

/**
 * JSONP handler
 *
 * Options:
 *  - param {String} qs parameter (`callback`)
 *  - prefix {String} qs parameter (`__jp`)
 *  - name {String} qs parameter (`prefix` + incr)
 *  - timeout {Number} how long after a timeout error is emitted (`60000`)
 *
 * @param {String} url
 * @param {Object|Function} optional options / callback
 * @param {Function} optional callback
 */

function jsonp(url, opts, fn){
  if ('function' == typeof opts) {
    fn = opts;
    opts = {};
  }
  if (!opts) opts = {};

  var prefix = opts.prefix || '__jp';

  // use the callback name that was passed if one was provided.
  // otherwise generate a unique name by incrementing our counter.
  var id = opts.name || (prefix + (count++));

  var param = opts.param || 'callback';
  var timeout = null != opts.timeout ? opts.timeout : 60000;
  var enc = encodeURIComponent;
  var target = document.getElementsByTagName('script')[0] || document.head;
  var script;
  var timer;


  if (timeout) {
    timer = setTimeout(function(){
      cleanup();
      if (fn) fn(new Error('Timeout'));
    }, timeout);
  }

  function cleanup(){
    if (script.parentNode) script.parentNode.removeChild(script);
    window[id] = noop;
    if (timer) clearTimeout(timer);
  }

  function cancel(){
    if (window[id]) {
      cleanup();
    }
  }

  window[id] = function(data){
    debug('jsonp got', data);
    cleanup();
    if (fn) fn(null, data);
  };

  // add qs component
  url += (~url.indexOf('?') ? '&' : '?') + param + '=' + enc(id);
  url = url.replace('?&', '?');

  debug('jsonp req "%s"', url);

  // create script
  script = document.createElement('script');
  script.src = url;
  target.parentNode.insertBefore(script, target);

  return cancel;
}

md文件,支持npm等多种安装安装方式。

 mudule.export = jsonp//将jsonp函数导出去,供其他模块调用

安装node.js的debug模块

var debug = require('debug')('jsonp');
//当般在nodejs需要进行调试的时候,可以使用console.log()方法来将调试信息输出到控制台,当发布到生产环境的时候,需要将这些调试信息都注释掉,为了方便切换而不需要改动程序代码,可以使用nodejs的debug模块,简单来说就是用来向控制台抛出错误信息的。
eg:
        debug('jsonp got', data);

关键函数jsonp函数

   接受三个参数,分别是url,opts,fn.
   url:请求地址的url,eg:http://freegeoip.net/json/?callback=handleResponse
   opts:有如下四个可选参数
     * params  与后端约定请求的字段名称,默认是callback
     * timeout  指定请求响应时间,过多长时间之后显示请求超时
     * prefix   指定回调函数params的回调句柄前缀,默认为__jp,一般都是默认的,基本用不到
     * name 指定回调函数的句柄,默认为’_jp${number++}’,一般都是默认的,基本用不到
   fn 请求事件的回调函数,负责接受data响应数据和请求失败的err信息。

初始化参数

function jsonp(url, opts, fn){
  // 对于两个参数,若不写opts,内部会将函数继续赋给fn
  if ('function' == typeof opts) {
    fn = opts;
    opts = {};
  } 

  // 判断opts是否存在,若不存在,将opts设置空对象
  if (!opts) opts = {}; 

  // 默认回调函数句柄为__jp
  var prefix = opts.prefix || '__jp'; 

  // 默认回调函数的句柄为__jp+数字  count默认为0
  var id = opts.name || (prefix + (count++)); 

  // 设定和函数的key:value,默认为'callback:__jp01'
  var param = opts.param || 'callback'; 

  // 设定请求响应时间,若没有设置,则默认为6秒
  var timeout = null != opts.timeout ? opts.timeout : 60000; 
  var enc = encodeURIComponent; 

  // 捕获dom元素
  var target = document.getElementsByTagName('script')[0] || document.head; 

  // 声明script和timer,script是后面document.createElement出来的,timer是定时器
  var script = null;
  var timer = null;

url字符串拼接和script脚本dom操作

  // 检测是url是否有参数,如果有参数的话,也有传进来的param参数的话,那就把参拼接到url后面,而后面的enc(id)值就是key:value索要解析到的值,服务端进行**params.opts.param**进行解析调用下面这句id的方法
  url += (~url.indexOf('?') ? '&' : '?') + param + '=' + enc(id);

  // 防止拼接错误出现"?&",然后进行替换
  url = url.replace('?&', '?');

  // 方便调试,这个可以将url console.log()到控制台上
  debug('jsonp req "%s"', url);

  // 创建<script>标签,不受限制的从其它域加载资源
  script = document.createElement('script'); 
  script.src = url; 

  // 插入到head节点或者第一个<script>节点的前面
  target.parentNode.insertBefore(script, target);

  return cancel;

方法的调用和事件释放

// 进行超时设置,如果超时,那么清除掉原有创建的<script>标签,并且将window[id]=noop(空对象),终止timer定时器,再之后抛出错误
  if (timeout) {
    timer = setTimeout(function(){
      cleanup();
      if (fn) fn(new Error('Timeout'));
    }, timeout);
  }


  function cleanup(){
    if (script.parentNode) script.parentNode.removeChild(script);
    window[id] = noop;
    if (timer) clearTimeout(timer);
  }
// 在引入jsonp模块后,取消对jsonp的调用,但引用模块值外就得这样写 eg:jsonp(yrl,opts,fn)()
  function cancel(){
    if (window[id]) {
      cleanup();
    }
  }

  // 服务端解析params.param进行调用函数
  window[id] = function(data){
    debug('jsonp got', data);
    // 恢复初始值
    cleanup();
    //返回数据
    if (fn) fn(null, data);
  };

个人角度总结

  • 无污染,无公害,用完即走
  • 支持多种安装方式
  • 可以结合promise进行使用

如有错误,敬请指出,共同进步。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

浅析php中jsonp的跨域实例

本篇文章是对php中jsonp的跨域实例进行了详细的分析介绍,需要的朋友参考下 我们现在www.test.com这个域名下面有这么个html文件testjsonp.html: ...

ajax.jsonp封装 myAjax.post('PHP/do2.php',{'name':'李四','age':22},function(err,data){ if (err) {

get/post请求接口如下: myAjax.post('PHP/do2.php',{'name':'李四','age':22},function(err,data){ if (err) { /...
  • MrFano
  • MrFano
  • 2017年05月11日 14:50
  • 189

JS封装Ajax插件(同域&&jsonp跨域)

一、Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个Act...

ajax 、jsonp 、Promise 封装

一、JS原生Ajaxajax:一种请求数据的方式,不需要刷新整个页面; ajax的技术核心是 XMLHttpRequest 对象; ajax 请求过程:创建 XMLHttpRequest 对象、连...

工作中jsonp 与ajax的封装

ajaxJsonp: function(opts) { var opts = opts || {}, //url参数,必填 ...

ajax和jsonp的原生封装

最近在学ajax和跨域,于是就自己封装了一个,虽然有点粗糙但还是可以用的。其实jsonp的本质就是:动态创建script标签,然后通过src属性发送跨域请求,然后服务器端响应的数据格式为【函数调用(f...

使用原生js封装的ajax(兼容jsonp)

/* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url ...

自己封装的JSONP跨域函数

尝试封装了一个JSONP的函数。用来进行跨域操作。调用方式类似jQuery的ajax方式。 主要实现功能: 1.参数拼装。 2.给每个回调函数唯一命名。 3.在回调成功或请求失败之后删除创建的java...

封装自己的jsonp、元素Ajax

在封装自己的JSONP 服务之前,我们要先明白,什么是同源?为什么要跨越? 首先我们要明白,同源策略是浏览器的一种安全策略,所谓同源是指,域名、协议、端口完全相同。 为什么要跨越?在开始前简单介绍...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jsonp封装浅析
举报原因:
原因补充:

(最多只允许输入30个字)