美文网首页
自定义jsonp方法

自定义jsonp方法

作者: 木利 | 来源:发表于2018-08-15 13:52 被阅读0次
/**
 * 自定义封装jsonp方法
 * @param options
 */
jsonp = function(options) {
  options = options || {};
  if (!options.url || !options.callback) {
    throw new Error("参数不合法");
  }
  //创建 script 标签并加入到页面中
  var callbackName = ('jsonp_' + Math.random()).replace(".", "");
  var oHead = document.getElementsByTagName('head')[0];
  options.data[options.callback] = callbackName;
  var params = formatParams(options.data);
  var oS = document.createElement('script');
  oHead.appendChild(oS);
  //创建jsonp回调函数
  window[callbackName] = function(json) {
    oHead.removeChild(oS);
    clearTimeout(oS.timer);
    window[callbackName] = null;
    options.success && options.success(json);
  };
  //发送请求
  oS.src = options.url + '?' + params;
  //超时处理
  if (options.time) {
    oS.timer = setTimeout(function() {
      window[callbackName] = null;
      oHead.removeChild(oS);
      options.fail && options.fail({
        message: "超时"
      });
    },
    time);
  }
};
/**
 * 格式化参数
 * @param data
 * @returns {string}
 */
formatParams = function(data) {
  var arr = [];
  for (var name in data) {
    arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
  }
  return arr.join('&');
}

相关文章

  • 自定义jsonp方法

  • 跨域的几种解决方案

    方法一:JSONP 原理 JSONP(JSON with padding),padding有填补的意思,所以JSO...

  • Vue请求数据的几种方法例子

    jsonp请求方法: this.$http.jsonp(this.getUrl,{//getUrl是我放在data...

  • 用JSONP抓取数据

    jsonp,vue,前端很多网站都是用jsonp传输数据的,可以抓取这些数据。提供一个封装好的jsonp方法。首先...

  • 跨域

    本文介绍跨域的八种方法: JSONP只要说到跨域,就必须聊到 JSONP,JSONP全称为:JSON with P...

  • ajax 设置Access-Control-Allow-Orig

    ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种...

  • vue-resource怎么解决跨域

    ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种...

  • vue-resource怎么解决跨域

    ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种...

  • 跨域

    解决跨域方法:jsonp,代理,cors jsonp实现原理:动态创建script标签 ,因为script中的sr...

  • 就算你懂了JSONP,那你又懂AJAX吗?

    上篇文章我们说到了什么是JSONP以及JSONP的用法,但说到底,JSONP终究只是一种以脚本的形式来运行的方法,...

网友评论

      本文标题:自定义jsonp方法

      本文链接:https://www.haomeiwen.com/subject/iofwbftx.html