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 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 Javascript
预防网页挂马的方法总结
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
php中var_export与var_dump的区别分析
2010/08/21 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
js 操作符实例代码
2009/10/24 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
python中requests库session对象的妙用详解
2017/10/30 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
送给他或她的礼物:FUN.com
2018/08/17 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
运动会广播稿500字
2014/01/28 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
2014年党务工作总结
2014/11/25 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python
vue3获取当前路由地址
2022/02/18 Vue.js