Ajax跨域的完美解決方案

公司要做一個(gè)活動(dòng)頁(yè)面，在其過(guò)程中發(fā)現(xiàn)所有的接口，ajax請(qǐng)求跨域。這里對(duì)跨域做個(gè)簡(jiǎn)單介紹以及提供幾種解決辦法。

　　由于瀏覽器實(shí)現(xiàn)的同源策略的限制，XmlHttpRequest只允許請(qǐng)求當(dāng)前源（域名、協(xié)議、端口）的資源，所以AJAX是不允許跨域的。這里提供自己常用的三種方法：

1、jsonp訪問(wèn)

　　JSONP(JSON with Padding)是一個(gè)非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過(guò)javascript callback的形式實(shí)現(xiàn)跨域訪問(wèn)；

實(shí)現(xiàn)方式

　　1）

script type="text/javascript"> 
  $.ajax({ 
    url:url, 
    dataType:'jsonp', 
    data:'', 
    jsonp:'callback', 
    success:function(result) { 
    }, 
  }); 
/script> 

　　2）

$.getJSON(url+"?callback=?", 
  function(result) { 
  });

注：1】 jsonp只能用get請(qǐng)求，哪怕你用了post請(qǐng)求，也會(huì)自動(dòng)給你轉(zhuǎn)換成post;

　　2】 jsonp 不僅可以用來(lái)獲取數(shù)據(jù)，也可以用來(lái)提交數(shù)據(jù)。

2、damain 方法

　　在主域相同，子域不同的情況下可以用這種方法，修改域名指向，讓他們指向同一域名，這種辦法也只能解決主域相同而二級(jí)域名不同的情況，兩個(gè)毫無(wú)關(guān)系的網(wǎng)址是不可以用這種方法的；

document.domain = 'a.com'

注：在實(shí)際開發(fā)中，很多人會(huì)在本地調(diào)試接口，localhost的域名和公司的域名完全不一樣，所有用了domain這種辦法也無(wú)法產(chǎn)生效果，解決辦法是修改c盤里的host文件，把本地地址localhost修改成公司域名或者公司二級(jí)域名，然后這種方法就可以使用了。

下面是修改的域名指向：

#127.0.0.1  localhost
127.0.0.1   公司.com

3、postMessage

　　postMessage是h5的一個(gè)新功能之一，由于我們是一家做h5游戲的公司，不可避免的要嵌套iframe，方便數(shù)據(jù)提交等。

　　這里假設(shè)，iframe的Id為 ‘iframe'；

　　在iframe里面的js里要寫上

var message = 'date';br>if (parent.document.getElementById(‘iframe‘)) {
          //捕獲iframe
          var iframe = parent.document.getElementById(‘iframe').contentWindow;
          //發(fā)送消息
          parent.postMessage(message, "*");
        }

　　在iframe外面的js里要寫上

window.addEventListener('message',function(e){
      },false);

　　然后就可以拿到message的數(shù)據(jù)了。

以上所述是小編給大家介紹的Ajax跨域的完美解決方案，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！