AJAX跨域請求資料方法歸納(實戰講解)

這次帶給大家AJAX跨域請求資料方法歸納(實戰講解)，AJAX跨域請求資料的注意事項有哪些，下面就是實戰案例，一起來看一下。

由於瀏覽器的同源策略ajax請求不可以接收到請求回應回來的資料 

#請求資料需要呼叫瀏覽器的內建建構子 XMLHttpRequest() 進行實例物件

var xhr = new XMLHttpRequest();

注意點在IE8之前支援的ActiveXobject("Microsoft.XMLHTTP");  記得要進行相容處理喔  在這裡我就不寫了

透過該物件進行取得

取得資料的四個狀態  xhr.readyState 此屬性保存著要求資料的幾種狀態

1.xhr.open(請求方式，請求位址，設定同/非同步);

2.xhr.send(null);//傳送請求  如果是post請求 那麼參數需要在send中傳遞

#3.會一直偵測資料是否回傳

4.資料回傳那麼xhr.readyState的值是4  說明資料回傳成功

#那麼我們需要進行跨域請求如何做呢

方案一：

利用script標籤的src屬性請求資料  src屬性請求的資料瀏覽器是不會進行攔截的

#這樣我們是可以請求到資料的  但是這樣有一些缺點

1.我們無法控制何時發送請求的  頁面載入到這裡就是發送請求的

2.這樣的方式  請求方式是同步的請求需要請求到資料才會執行下一步的程式碼  這樣頁面載入時間可能延長

#3.所以建議不要使用這樣的方式不推薦

方案二：

在js中動態建立script標籤指定請求的介面

var script = document.createELement("script");

//將script追加到head標籤中

document.getElementsTagName( "head")[0].appendChild(script);

優點：我們可以控制請求的時機  並且這樣請求的方式是異步的不會延長頁面加載的時間

重要點：我們可以在請求資料中呼叫請求頁面中的函數  使用函數的形參接收請求回來的資料

方案三：

在請求的後端介面設定一個請求頭即可

Access-Control-Allow-Origin

含有這個請求頭前端頁面跨域請求的資料就不會被瀏覽器進行攔截啦

方案四：

#使用

該方式在ajax未出現  就是使用該標籤實現請求數據的

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Ajax+php怎麼進行資料互動與局部頁面的刷新

Ajax方法實作Form表單提交的方法

以上是AJAX跨域請求資料方法歸納(實戰講解)的詳細內容。更多資訊請關注PHP中文網其他相關文章！