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 相关文章推荐
通用javascript脚本函数库 方便开发
Oct 13 Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
Vue使用v-viewer实现图片预览
Oct 21 Javascript
JavaScript获取URL参数的方法分享
Apr 07 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目录操作函数之获取目录与文件的类型
2010/12/29 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
简单的js分页脚本
2009/05/21 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
python中列表元素连接方法join用法实例
2015/04/07 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
python搜索包的路径的实现方法
2019/07/19 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
如何清空python的变量
2020/07/05 Python
python自动生成sql语句的脚本
2021/02/24 Python
Europcar意大利:汽车租赁
2019/07/07 全球购物
代办社保委托书范文
2014/10/06 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
windows系统安装配置nginx环境
2022/06/28 Servers