javascript跨域请求包装函数与用法示例


Posted in Javascript onNovember 03, 2016

本文实例讲述了javascript跨域请求包装函数与用法。分享给大家供大家参考,具体如下:

一、源码

// 定义AJAX跨域请求的JSON
(function(){
  if(typeof window.$JSON== 'undefined'){
    window.$JSON= {};
  };
  $JSON._ajax = function(config){
    config = config[0] || {};
    this.url = config.url || '';
    this.type = config.type || 'xhr';
    this.method = (this.type == 'json') ? 'GET' : config.method.toUpperCase() || 'GET';
    this.param = config.param || null;
    this.callback = config.callback || {};
    this.XHR = null;
    if(typeof window._$JSON_callback == 'undefined'){
      window._$JSON_callback = {};
    }
    this._createRequest();
  };
  $JSON._ajax.prototype = {
    // 缓存XHR请求,再次再调用时不再进行判断
    _createXHR : function(){
      var methods = [
        function(){ return new XMLHttpRequest(); },
        function(){ return new ActiveXObject('Msxml2.XMLHTTP'); },
        function(){ return new ActiveXObject('Microsoft.XMLHTTP'); }
      ];
      for(var i = 0, l = methods.length; i < l; i++){
        try{
          methods[i]();
        }catch(e){
          continue;
        }
        this._createXHR = methods[i];
        return methods[i]();
      }
    },
    // 建立XHR请求
    _createRequest : function(){
      return (this.type == 'json') ? this._setJSONRequest() : this._setXHRRequest();
    },
    _setXHRRequest : function(){
      var _this = this;
      var param = '';
      for(var i in this.param){
        if(param == ''){
          param = i+'='+this.param[i];
        }else{
          param+= '&'+i+'='+this.param[i];
        }
      }
      this.XHR = this._createXHR();
      this.XHR.onreadystatechange = function(){
        if(_this.XHR.readyState == 4 && _this.XHR.status == 200){
          _this.callback.success(_this.XHR.responseText);
        }else{
          _this.callback.failure('重新操作');
        }
      };
      this.XHR.open(this.method, this.url, true);
      this.XHR.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8");
      this.XHR.send(param);
    },
    // 建立JSON请求
    _setJSONRequest : function(){
      var head = document.getElementsByTagName('head')[0];
      var script = document.createElement('script');
      var fun = this._setRandomFun();
      var _this = this;
      var param = '';
      for(var i in this.param){
        if(param == ''){
          param = i+'='+this.param[i];
        }else{
          param+= '&'+i+'='+this.param[i];
        }
      }
      script.type = 'text/javascript';
      script.charset = 'utf-8';
      if(head){
        head.appendChild(script);
      }else{
        document.body.appendChild(script);
      }
      // data:为回调函数所需要传入的参数
      // 定义页面中的回调函数,如例子中的"jsonpCallback()"方法
      window._$JSON_callback[fun.id] = function(data){
        _this.callback.success(data);
        setTimeout(function(){
          delete window._$JSON_callback[fun.id];
          script.parentNode.removeChild(script);
        }, 100);
      };
      script.src = this.url+'?callback='+fun.name+'&'+param;
    },
    // 生成随机JSON回调函数
    _setRandomFun : function(){
      var id = '';
      do{
        id = '$JSON'+Math.floor(Math.random()*10000);
      }while(window._$JSON_callback[id])
      return{
        id : id,
        name : 'window._$JSON_callback.'+id
      }
    }
  };
  window.$JSON.ajax = function(){
    return new $JSON._ajax(arguments);
  }
})();

二、调用方式

//调用方式
var ajax = new $JSON.ajax({
  url : 'http://www.sina.com/api',
  type : 'json',
  method : 'get',
  param: {
    bar: true
  },
  callback : {
    success : function(data){
      console.log( '55668',data);
    },
    failure : function(error){
      alert(errow);
    }
  }
});

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
js实现延迟加载的方法
Jun 24 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
js的Object.assign用法示例分析
Mar 05 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
预防网页挂马的方法总结
Nov 03 #Javascript
网页挂马方式整理及详细介绍
Nov 03 #Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 #Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 #Javascript
基于vuejs+webpack的日期选择插件
May 21 #Javascript
Vue.js创建Calendar日历效果
Nov 03 #Javascript
AngularJS中transclude用法详解
Nov 03 #Javascript
You might like
实例分析10个PHP常见安全问题
2019/07/09 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
python判断设备是否联网的方法
2018/06/29 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
基于python图像处理API的使用示例
2020/04/03 Python
pandas DataFrame运算的实现
2020/06/14 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
建龙钢铁面试总结
2014/04/15 面试题
机械工程师的岗位职责
2013/11/17 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
《乡愁》教学反思
2014/02/18 职场文书
求职面试个人自我评价
2014/02/28 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
社区灵活就业证明
2014/11/03 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle