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 24 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 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 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
浅析PHP绘图技术
2013/07/03 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
javascript基础知识讲解
2017/01/11 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
Ajax的优点和缺点
2014/11/21 面试题
大学毕业感言一句话
2014/02/06 职场文书
党员承诺践诺书
2014/05/20 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
车辆管理制度范本
2015/08/05 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
V Rising 服务器搭建图文教程
2022/06/16 Servers