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 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
json 实例详细说明教程
Oct 31 Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
小程序自动化测试的示例代码
Aug 11 Javascript
vue实现图书管理系统
Dec 29 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
预防网页挂马的方法总结
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中MD5函数使用实例代码
2008/06/07 PHP
php模板中出现空行解决方法
2011/03/08 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
python实现简单温度转换的方法
2015/03/13 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
英语自荐信常用语句
2013/12/13 职场文书
杠杆的科学教学反思
2014/01/10 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
实操Python爬取觅知网素材图片示例
2021/11/27 Python
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android