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 相关文章推荐
js 表格隔行颜色
Dec 02 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
js实现盒子滚动动画效果
Aug 09 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/11/16 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
js读取配置文件自写
2014/02/11 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
Javascript实现字数统计
2015/07/03 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
Python 爬虫多线程详解及实例代码
2016/10/08 Python
Python之re操作方法(详解)
2017/06/14 Python
快速了解python leveldb
2018/01/18 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
pandas分批读取大数据集教程
2020/06/06 Python
Python常用类型转换实现代码实例
2020/07/28 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
如何撰写岗位职责
2014/02/01 职场文书
集体备课反思
2014/02/12 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
党小组意见范文
2015/06/08 职场文书
用Python实现Newton插值法
2021/04/17 Python
Golang 链表的学习和使用
2022/04/19 Golang