当前位置：Gxlcms > JavaScript > 自定义ajax支持跨域组件封装详解

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

时间：2021-07-01 10:21:17 帮助过：54人阅读

本文主要给大家详细分析了自定义ajax支持跨域组件封装相关的知识点，对此有兴趣的朋友参考学习下希望能帮助到大家。

Class.create()分析

仿prototype创建类继承

  1. var Class = {
  2.   create: function () {
  3.     var c = function () {
  4.       this.request.apply(this, arguments);
  5.     }
  6.     for (var i = 0, il = arguments.length, it; i < il; i++) {
  7.       it = arguments[i];
  8.       if (it == null) continue;
  9.       Object.extend(c.prototype, it);
  10.     }
  11.     return c;
  12.   }
  13. };
  14. Object.extend = function (tObj, sObj) { 
  15.   for (var o in sObj) {
  16.     tObj[o] = sObj[o];
  17.   }
  18.   return tObj;
  19. };

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文件中

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

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)。

举例如下：

发起方

  1. function uploadScript(options){
  2.   var head=document.getElementsByTagName("head")[0];
  3.   var script=document.createElement("script");
  4.   script.type="text/javasctipt";
  5.   options.src += '?callback=' + options.callback;
  6.   script.src=options.src;
  7.   head.insertBefore(script,head.firstChild);
  8. }
  9. function callback(data){}
  10. window.onload=function(){//调用
  11.   uploadScript({src:"http://e.com/xxx/main.ashx",callback:callback})
  12. }

接收方：

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

3、使用html5的postMessage：

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

举例如下：

父页面：

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

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

ajax方法封装code：

  1. ZIP_Ajax.prototype={
  2.   request:function(url options){
  3.     this.options=options;
  4.     if(options.method=="jsonp"){//跨域请求
  5.       return this.jsonp();
  6.     }
  7.     var httpRequest=this.http();
  8.     options=Object.extend({method: 'get',
  9.       async: true},options||{});
  10.     
  11.     if(options.method=="get"){
  12.       url+=(url.indexOf('?')==-1?'?':'&')+options.data;
  13.       options.data=null;
  14.     }
  15.     httpRequest.open(options.method,url,options.async);
  16.     if (options.method == 'post') {
  17.       httpRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
  18.     }
  19.     httpRequest.onreadystatechange = this._onStateChange.bind(this, httpRequest, url, options);
  20.     httpRequest.send(options.data || null);//get请求情况下data为null
  21.     return httpRequest;
  22.   },
  23.   jsonp:function(){
  24.     jsonp_str = 'jsonp_' + new Date().getTime();
  25.     eval(jsonp_str + ' = ' + this.options.callback + ';');    
  26.     this.options.url += '?callback=' + jsonp_str;
  27.     for(var i in this.options.data) {
  28.       this.options.url += '&' + i + '=' + this.options.data[i];
  29.     } 
  30.     var doc_head = document.getElementsByTagName("head")[0],
  31.       doc_js = document.createElement("script"),
  32.       doc_js.src = this.options.url;
  33.     doc_js.onload = doc_js.onreadystatechange = function(){
  34.        if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete"){
  35.          //清除JS
  36.          doc_head.removeChild(doc_js);      
  37.         }
  38.       }   
  39.       doc_head.appendChild(doc_js);
  40.   },
  41.   http:function(){//判断是否支持xmlHttp
  42.     if(window.XMLHttpRequest){
  43.       return new XMLHttpRequest();
  44.     }
  45.     else{
  46.       try{
  47.         return new ActiveXObject('Msxml2.XMLHTTP')
  48.       }
  49.       catch(e){
  50.         try {
  51.           return new ActiveXObject('Microsoft.XMLHTTP');
  52.         } catch (e) {
  53.           return false;
  54.         }
  55.       }
  56.     }
  57.   },
  58.   _onStateChange:function(http,url,options){
  59.     if(http.readyState==4){
  60.       http.onreadystatechange=function(){};//重置事件为空
  61.       var s=http.status;
  62.       if(typeof(s)=='number'&&s>200&&s<300){
  63.         if(typeof(options.success)!='function')return;
  64.         var format=http;
  65.         if(typeof(options.format)=='string'){//判断请求数据格式
  66.           switch(options.format){
  67.             case 'text':
  68.               format=http.responseText;
  69.               break;
  70.             case 'json':
  71.               try{
  72.                 format=eval('('+http.responseText+')');
  73.               }
  74.               catch (e) {
  75.                 if (window.console && console.error) console.error(e);
  76.               }
  77.               break;
  78.             case 'xml':
  79.               format=http.responseXML;
  80.               break;
  81.           }
  82.         }
  83.       options.success(format);//成功回调
  84.       }
  85.       else {//请求出问题后处理
  86.         if (window.closed) return;
  87.         if (typeof (options.failure) == 'function') {
  88.           var error = {
  89.             status: http.status,
  90.             statusText: http.statusText
  91.           }
  92.           //  判断是否是网络断线或者根本就请求不到服务器
  93.           if (http.readyState == 4 && (http.status == 0 || http.status == 12030)) {
  94.             //  是
  95.             error.status = -1;
  96.           }
  97.           options.failure(error);
  98.         }
  99.       }
  100.     } 
  101.   }
  102. };

使用方法：

ajax调用举例：

  1. var myAjax=new ZIP_Ajax("http://www.a.com/you.php",{
  2.   method:"get",
  3.   data:"key=123456&name=yuchao",
  4.   format:"json",
  5.   success:function(data){
  6.     ......
  7.   }
  8. })
  9. 跨域请求调用举例：
  10. var jsonp=new ZIP_Ajax("http://www.a.com/you.php",{
  11.   method:"jsonp",
  12.   data:{key:"123456",name:"yuchao"},
  13.   callback:function(data){
  14.     ......
  15.   }
  16. })

相关推荐：

JS组件系列--组件封装深入：使用jquery data()和html 5 data-*属性初始化组件_html/css_WEB-ITnose

Ajax跨域的完美解决方案实例分享

最全ajax跨域解决方案

以上就是自定义ajax支持跨域组件封装详解的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！