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 相关文章推荐
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 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获取文件名称和扩展名的方法
2017/02/07 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
angular动态表单制作
2018/02/23 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
Python中关键字is与==的区别简述
2014/07/31 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Python文件读写常见用法总结
2019/02/22 Python
详解Python做一个名片管理系统
2019/03/14 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
python跳出双层for循环的解决方法
2019/06/24 Python
python实现简单井字棋游戏
2020/03/04 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
如何用Python徒手写线性回归
2021/01/25 Python
印度网上药店:1mg
2017/10/13 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
应届毕业生求职信范例分享
2013/12/17 职场文书
五一家具促销方案
2014/01/10 职场文书
护士进修自我鉴定
2014/02/07 职场文书
大型会议策划方案
2014/05/17 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
给朋友的道歉短信
2015/05/12 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers