首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

详解自定义ajax支持跨域组件封装

Posted in Javascript onFebruary 08, 2018

Class.create()分析

仿prototype创建类继承

var Class = {
  create: function () {
    var c = function () {
      this.request.apply(this, arguments);
    }
    for (var i = 0, il = arguments.length, it; i < il; i++) {
      it = arguments[i];
      if (it == null) continue;
      Object.extend(c.prototype, it);
    }
    return c;
  }
};
Object.extend = function (tObj, sObj) { 
  for (var o in sObj) {
    tObj[o] = sObj[o];
  }
  return tObj;
};

ajax定义：ZIP_Ajax=Class.create();

其中create方法返回的是一个构造函数request，这里相当于var ZIP_Ajax= function(){ this.request.apply(this, arguments); }; 用对象冒充的方式在函数内部执行了一次构造的过程，相当于把构造函数任务交给了request方法，这里的this.request是ZIP_Ajax的实例的方法，而this指向的就是ZIP_Ajax的实例，apply后面的this指向的是ZIP_Ajax，最后根据new关键字将this才真正指向ZIP_Ajax类。有了类ZIP_Ajax的定义，接下来就可以定义其方法：

XMLHttpRequest详解：

XMLHttpRequest不是一项技术而是一个内置于主流浏览器内的一个可以完全访问http协议的对象。传统的http请求大部分都是基于form提交请求http，然后返回一个form。XMLHttpRequest支持同步请求的同时最大的优点就是支持异步传输接受数据，新建一个ajax请求实际就是实例化一个XMLHttpRequest对象。简单介绍一下主要事件及方法：

readystatechange事件：

当XMLHttpRequest发送一个http请求之后就会激发一个readystatechange事件，事件返回有五个值，0,1,2分别代表创建XMLHttpRequest、初始化完成XMLHttpRequest、发送了请求，3代表响应没结束（即只接收到响应头数据）4才是真正获得完整响应。

返回的status状态表示服务器返回的状态码：

常用的有200表示成功返回数据，301永久重定向，302为临时重定向（不安全）304读取的缓存数据400表示请求出现语法错误，403表示服务器拒绝请求，404表示请求网页资源不存在，405找不到指定位置服务器，408表示请求超时，500服务器内部错误，505表示服务器不支持请求的http协议版本。

200-300表示成功，300-400表示重定向，400-500表示请求内容或者格式或者请求体过大导致错误，500+表示服务器内部错误

open方法：

open接收三个参数分别是请求类型（get,post,head等）、url、同步或者异步

send方法：

当请求就绪后会触发send方法，发送的内容就是请求的数据（如果是get请求则参数为null；

请求成功之后会执行success自定义方法，其参数为返回数据；

ajax跨域：

什么是跨域？

如果两个站点www.a.com想向www.b.com请求数据就出现了因为域名不一致导致的跨域问题。即使是域名相同，如果端口不同的话也是会存在跨域问题（这种原因js是只能袖手旁观了）。判断是否跨域仅仅是通过window.location.protocol+window.location.host来判断例如http://www.baidu.com.

js解决跨域问题几种方案？

1、document.domain+iframe

对于主域相同而子域不同的请求可以使用域名+iframe作为解决办法。具体思想是假如有两个域名下的不同ab文件www.a.com/a.html

以及hi.a.com/b.html,我们可以在两个html文件中加上document.domain="a.com",之后通过在a文件中创建一个iframe去控制iframe的contentDocument，这样两个文件就可以对话了。举例如下：

www.a.com上的a.html文件中

document.domain="a.com";
  var selfFrame=document.createElement("iframe");
  selfFrame.src="http://hi.a.com/b.html";
  selfFrame.style.display="none";
  document.body.appendChild(selfFrame);
  selfFrame.onload=function(){
    var doc=selfFrame.contentDocument||selfFrame.contentWindow.document;//得到操作b.html权限
    alert(doc.getElementById("ok_b").innerHTML());//具体操作b文件中元素
  }

hi.a.com上的b.html文件中

document.domain="a.com";

问题：

1、安全性，当一个站点（hi.a.com）被攻击后，另一个站点（www.a.com）会引起安全漏洞。2、如果一个页面中引入多个iframe，要想能够操作所有iframe，必须都得设置相同domain。

2、动态创建script（传说中jsonp方式）

浏览器默认禁止跨域访问，但不禁止在页面中引用其他域名的js文件，并且可以执行引入js文件中的方法等，根据这点我们可以通过创建script节点方法来实现完全跨域的通信。实现步骤为：

a.在请求发起方页面动态加载一个script，script的url指向接收方的后台，该地址返回的javascript方法会被发起方执行，url可以传参并仅支持get提交参数。

b.加载script脚本时候调用跨域的js方法进行回调处理(jsonp)。

举例如下：

发起方

function uploadScript(options){
  var head=document.getElementsByTagName("head")[0];
  var script=document.createElement("script");
  script.type="text/javasctipt";
  options.src += '?callback=' + options.callback;
  script.src=options.src;
  head.insertBefore(script,head.firstChild);
}
function callback(data){}
window.onload=function(){//调用
  uploadScript({src:"http://e.com/xxx/main.ashx",callback:callback})
}

接收方：

接收方只需要返回一个执行函数，该执行函数就是请求中的callback并赋参数。

3、使用html5的postMessage：

html5新功能有一个就是跨文档消息传输，如今大部分浏览器都已经支持并使用(包括ie8+)，其支持基于web的实时消息传递并且不存在跨域问题。postMessage一般会跟iframe一起使用。

举例如下：

父页面：

<iframe id="myPost" src="http//www.a.com/main.html"></iframe>
window.onload=function(){
  document.getElementById("myPost").contentWindow.postMessage("显示我","http://www.a.com")
  //第二个参数表示确保数据发送给适合域名的文档
}
a.com/main.html页面：
window.addEventListener("message",function(event){
  if(event.origin.indexOf("a.com")>-1){
    document.getElementById("textArea").innerHTML=event.data;
  }
},false)
<body>
  <div>
    <span id="textArea"></span>
  </div>
</body>

这样在父页面加载完成后main.html页面的textArea部分就会显示"显示我"三个字

ajax方法封装code：

ZIP_Ajax.prototype={
  request:function(url options){
    this.options=options;
    if(options.method=="jsonp"){//跨域请求
      return this.jsonp();
    }
    var httpRequest=this.http();
    options=Object.extend({method: 'get',
      async: true},options||{});
    
    if(options.method=="get"){
      url+=(url.indexOf('?')==-1?'?':'&')+options.data;
      options.data=null;
    }
    httpRequest.open(options.method,url,options.async);
    if (options.method == 'post') {
      httpRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
    }
    httpRequest.onreadystatechange = this._onStateChange.bind(this, httpRequest, url, options);
    httpRequest.send(options.data || null);//get请求情况下data为null
    return httpRequest;
  },
  jsonp:function(){
    jsonp_str = 'jsonp_' + new Date().getTime();
    eval(jsonp_str + ' = ' + this.options.callback + ';');    
    this.options.url += '?callback=' + jsonp_str;
    for(var i in this.options.data) {
      this.options.url += '&' + i + '=' + this.options.data[i];
    } 
    var doc_head = document.getElementsByTagName("head")[0],
      doc_js = document.createElement("script"),
      doc_js.src = this.options.url;
    doc_js.onload = doc_js.onreadystatechange = function(){
       if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete"){
         //清除JS
         doc_head.removeChild(doc_js);      
        }
      }   
      doc_head.appendChild(doc_js);
  },
  http:function(){//判断是否支持xmlHttp
    if(window.XMLHttpRequest){
      return new XMLHttpRequest();
    }
    else{
      try{
        return new ActiveXObject('Msxml2.XMLHTTP')
      }
      catch(e){
        try {
          return new ActiveXObject('Microsoft.XMLHTTP');
        } catch (e) {
          return false;
        }
      }
    }
  },
  _onStateChange:function(http,url,options){
    if(http.readyState==4){
      http.onreadystatechange=function(){};//重置事件为空
      var s=http.status;
      if(typeof(s)=='number'&&s>200&&s<300){
        if(typeof(options.success)!='function')return;
        var format=http;
        if(typeof(options.format)=='string'){//判断请求数据格式
          switch(options.format){
            case 'text':
              format=http.responseText;
              break;
            case 'json':
              try{
                format=eval('('+http.responseText+')');
              }
              catch (e) {
                if (window.console && console.error) console.error(e);
              }
              break;
            case 'xml':
              format=http.responseXML;
              break;
          }
        }
      options.success(format);//成功回调
      }
      else {//请求出问题后处理
        if (window.closed) return;
        if (typeof (options.failure) == 'function') {
          var error = {
            status: http.status,
            statusText: http.statusText
          }
          //  判断是否是网络断线或者根本就请求不到服务器
          if (http.readyState == 4 && (http.status == 0 || http.status == 12030)) {
            //  是
            error.status = -1;
          }
          options.failure(error);
        }
      }
    } 
  }
};

使用方法：

ajax调用举例：

var myAjax=new ZIP_Ajax("http://www.a.com/you.php",{
  method:"get",
  data:"key=123456&name=yuchao",
  format:"json",
  success:function(data){
    ......
  }
})
跨域请求调用举例：
var jsonp=new ZIP_Ajax("http://www.a.com/you.php",{
  method:"jsonp",
  data:{key:"123456",name:"yuchao"},
  callback:function(data){
    ......
  }
})

 

详解自定义ajax支持跨域组件封装

- Author -

laozhang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
RequireJS使用注意细节
May 15 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
Vue+ElementUI table实现表格分页
Dec 14 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
微信小程序实现验证码获取倒计时效果
Feb 08 #Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 #Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 #Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 #Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 #Javascript
使用veloticy-ui生成文字动画效果
Feb 08 #Javascript
js中let和var定义变量的区别
Feb 08 #Javascript
element-china-area-data(1) Navigator(1) Flutter(2) uniapp(4) self(1) 数据重复(1) tabBar(1) Apache(17) capture(1) Hudi(1)
You might like
ajax在joomla中的原生态应用代码
2012/07/19 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
vue单页应用加百度统计代码（亲测有效）
2018/01/31 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
python实现进程间通信简单实例
2014/07/23 Python
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
python 实现多维数组转向量
2019/11/30 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
英国旅行箱包和行李箱购物网站：Travel Luggage & Cabin Bags
2019/08/26 全球购物
绿化先进工作者事迹材料
2014/01/30 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
三年级小学生评语
2014/04/22 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
参加招聘会后的感想
2015/08/10 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
学生检讨书范文
2019/06/24 职场文书
python xlwt模块的使用解析
2021/04/13 Python