AJAX跨域的示例分析

小編給大家分享一下AJAX跨域的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

AJAX 的跨域問題，常用的解決方法有兩種，簡單記錄下，詳細內容查看參考資料。以下示例自建兩個域名測試，www.test.com、www.example.com。

同源策略

同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用于隔離潛在惡意文件的關鍵的安全機制。

兩個頁面，如果域名、協議、端口都相同，即是同源，其間的交互不存在問題。同源策略是很重要的安全機制，但是有些時候需要突破這種機制，這就需要跨域。

JSONP

JSONP 是很常用的方法，它是利用 <script> 標簽沒有跨域限制的原理實現。以下是在 www.test.com 中使用 JQuery 示例

$.ajax( {    
    url:'//www.example.com',
    data:{name:'tom'},    
    type:'get',    
    dataType:'jsonp',
    jsonp: "callback",    
    success:function(data) {    
          console.log(data)  
     }
})

以下是 www.example.com 的 PHP 處理

<?php
$callback = $_GET['callback'];
$name = $_GET['name'];

// 處理數據
$data = md5($name);

echo $callback . '(' . json_encode($data) . ')';

CORS

CORS (Cross-origin resource sharing)，跨域資源共享標準允許 Web 應用服務器進行跨域訪問控制。相對于 JSONP 只支持 GET ，CORS 支持更多的 HTTP 請求，同時更簡單、安全。不過 CORS 可能會存在兼容問題。
以下是在 www.test.com 中發送 AJAX 請求

$.ajax( {    
    url:'//www.example.com',
    data:{name:'tom'},    
    type:'post',    
    dataType:'json',  
    success:function(data) {    
          console.log(data)  
     }
});

www.example.com 的 PHP 處理

<?php
header("Access-Control-Allow-Origin: http://www.test.com");

$name = $_POST['name'];

// 處理數據
$data = md5($name);

echo json_encode($data);

以上是“AJAX跨域的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！