前言

ajax，用蒼白的話贊揚：很好。

我們可以使用ajax實現異步獲取數據，減少服務器運算時間，大大地改善用戶體驗；我們可以使用ajax實現小系統組合大系統；我們還可以使用ajax實現前端的優化。（好一個排比）

雖然ajax很好，但在使用起來也會有一定的限制，出于安全考慮，不允許跨域通信。如果嘗試從不同的域請求數據，會出現安全錯誤。（下面例子1可以直觀看出）

同源策略限制

同源策略阻止從一個域上加載的腳本獲取或操作另一個域上的文檔屬性。也就是說，受到請求的 URL 的域必須與當前 Web 頁面的域相同。這意味著瀏覽器隔離來自不同源的內容，以防止它們之間的操作。這個瀏覽器策略很舊，從 Netscape Navigator 2.0 版本開始就存在?！詃eveloperWorks
所謂同源是指，域名，協議，端口相同。

平地一聲吼

本文講解的是怎么利用ajax實現跨域請求，那么知道“同源策略”，就可以解決很多疑問：“為毛我的ajax加載不了數據！”“為毛瀏覽器控制臺會對我如此漂亮的代碼報錯！”

例子1
先上一個錯誤示范

客戶端代碼：

代碼如下:
<script>
    // 客戶端使用getJSON方法請求另一臺機子上的腳本
    $.getJSON("http://172.22.22.120/new/ajax.php",function(json){
        alert(json.website);
    });
</script>

服務端PHP腳本代碼：

代碼如下:
<?php
    // ajax.php
    header('Content-type: application/json');

    echo json_encode(array('website'=>'hcoding'));
?>

firefox下的錯誤提示：

根據同源策略的概念，localhost和172.22.22.120是出于不同的域名下的，所以跨域請求理所當然地被瀏覽器拒絕了。

JSONP

JSONP（JSON with Padding）是資料格式 JSON 的一種“使用模式”，可以讓網頁從別的網域要資料。另一個解決這個問題的新方法是跨來源資源共享。由于同源策略，一般來說位于 server1.example.com 的網頁無法與不是 server1.example.com 的服務器溝通，而 HTML 的 <script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是任意的 JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析?！跃S基百科
這話該怎么理解呢！我個人是這樣認為的，用<script>跨域的請求數據，跨域的服務器返回一段【JavaScript代碼】，是 的，你沒看錯，不是json格式數據，是JavaScript代碼，這樣，這段代碼就由JavaScript 直譯器執行。上例子更直觀：