Ajax跨域訪問

標籤：style   blog   http   color   java   os   使用   io   strong   

從域的概念上來區分HTTP請求，大致可以分為兩種，同域的HTTP請求、非同域的HTTP請求。

    HTTP請求的發起，可以是背景程式，也可以是瀏覽器。Java程式都是通過URLConnection來完成。瀏覽器端的請求的發起，依靠瀏覽器的內部實現了。

在HTML文檔中能夠發起HTTP請求的元素有：

 

1. <link> 請求CSS樣式檔案
2. <script>請求JavaScript指令檔
3. <iframe>、<frame>請求HTML文檔檔案
4. <img>請求影像檔
5. <a>
6. <form>請求（get/post）
7. <object>請求其他資源檔，音頻視頻，外掛程式
8. <source>用於音頻視頻等

 

如果從域的概念來講，HTML中的這些元素，都是可以跨域請求資源的。這些請求都是傳統的HTTP請求。還有一種請求，是ajax 請求。它與傳統請求是有區別的。別的不說，但講request header中Ajax請求就多了：X-Requested-With:XMLHttpRequest。傳統請求是沒有這個的。

 

HTTP請求實現跨域是沒有問題的，那麼Ajax跨域呢？

 

 

下面提出一個情境：通過Ajax請求另外一個域下的Servlet擷取到JSON資料，然後做一些處理。

建立項目test1，

 

 

 

建立項目test2，在index.jsp下使用iframe和Ajax方法來擷取test1中的那個請求。

 

 

測試：

在地址欄輸入http://localhost:8081/test2

 

 

這個就是我們看到的介面，頁面中iframe中訪問：

http://localhost:8080/test1/DomainServlet 的結果。

 

接下來，使用Ajax來擷取資料,點擊按鈕後：

 

 

很顯然，是不能成功訪問的。

 

那想要通過Ajax請求擷取資料該怎麼辦呢？

 

1）採用<script>的跨域訪問資源的特性來解決

 

把上面代碼中的getDomainResp改為：

function aa(data){      console.log(data);   }  function getDomainResp(){      var script=document.createElement("script");      script.type="text/javascript";     script.src="http://localhost:8080/test1/DomainServlet?callback=aa";      document.getElementsByTagName("head")[0].appendChild(script);  }

 就是在動態添加一個<script>，通過這個來擷取資料。傳遞的參數是aa,也就是擷取資料後的回呼函數的名字。

將Servlet稍作調整：

 

 

這樣就可以了。

控制台資訊：

 

通過控制台訊息，也可以知道，瀏覽器本來是要通過請求Script資源的，但是被攔截下來，該用text/html方式去請求資源。

使用調試工具就可以看到<script>的請求內容是：

 

這樣就完成了跨域訪問。

 

2）JQuery 也提供了對跨域訪問的支援。

 

對上面的JS代碼稍作調整，改用jQuery的ajax請求，使用JSONP的返回資料類型：

function aa(data){      console.log(data);   }   /*   function getDomainResp(){      var script=document.createElement("script");      script.type="text/javascript";     script.src="http://localhost:8080/test1/DomainServlet?callback=aa";      document.getElementsByTagName("head")[0].appendChild(script);  }  */  function getDomainResp(){      $.ajax({         url:‘http://localhost:8080/test1/DomainServlet‘,         crossDomain:true,         dataType:‘jsonp‘,         type:‘post‘,         data:{            jsonp:‘callback‘         },         jsonpCallback:‘aa‘      });  } 

而後台代碼不變。也就是仍然是： 

 

同樣也會得到正確的結果。

 

通過查看請求資訊：

 

可以知道，其實jQuery也是發送<script src=””>請求。設定ajax的幾個參數的作用：

 

1)是否跨域crossDomain，和傳回值類型jsonp,其實就是告訴jQuery，這是一個跨域請求，也就是說告訴jQuery，要使用<script src=””>的方式去發送請求。

2)jsonp:’callback’，就是說發送的請求參數中，有一個參數名是callback。

3)jsonpCallback，就是佈建要求參數callback的值是aa。

 

也就是說JQuery的跨域訪問，其實就是使用上面<script>方式來訪問的。

再深入點想想，利用<script>的跨域請求資源的特性可以完成跨域訪問，其實就是利用瀏覽器發起的傳統HTTP請求呀。

那麼<iframe>也具有跨域訪問的特性，能否利用<iframe>來跨域訪問呢，畢竟都是瀏覽器發起的傳統HTTP請求呀？

同時可以再想想，利用瀏覽器端發起HTTP請求可以完成跨域訪問，那麼利用背景程式，例如Java中的的URLConnection，能否發起跨域訪問請求呢？

 

Ajax跨域訪問