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代码加载优化方法
Jan 30 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
Vue中keep-alive组件作用详解
Feb 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中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
Prototype Template对象 学习
2009/07/19 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python的三目运算符和not in运算符使用示例
2014/03/03 Python
python开发之thread线程基础实例入门
2015/11/11 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
数控专业毕业生求职信范文
2013/09/21 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
大一学生个人总结
2015/02/15 职场文书
MySQL自定义函数及触发器
2022/08/05 MySQL