Ajax跨域訪問

Ajax如何跨域訪問數據

       最近在作項目的過程當中遇到的問題，一個網站須要訪問另一個網站的數據，而且是經過腳本的方式，而因爲同源策略的限制，開發人員不能再與外部服務器進行通訊的時候使用XMLHttpRequest。而JSONP是一種能夠繞過同源策略的方法，即經過使用JSON與<script>標記相結合的方法，從服務器端直接返回可執行的JavaScript函數或者JavaScript對象。目前JSONP已成爲大部分公司的Web應用程序跨域首選，儘管JSONP是一個非官方的協議，關於JSONP的介紹，網上一大把；如今開始介紹如何跨域訪問數據。

　　開發環境：Visual Studio 2008 + jQuery

　　前端代碼（調用方）：

　　var baseUrl = "http://localhost:59334/";

　　$.ajax({
            url: baseUrl + "Account/ValidateCode?validateCode=" + code + "&jsoncallback=?",
            type: 'GET',
            dataType: 'JSON',
            success: function(data) {
            　　console.log(data.Content);
            },
            error: function() {
                  console.log(arguments);
            }
      });

　　後臺代碼（被調用方，C#）：

　　public String ValidateCode(String validateCode)
        {
            String callback = Request["jsoncallback"];
            String result = "";
            if (Session["CaptchaCode"] != null)
            {
                if (Session["CaptchaCode"].ToString().ToLower() != validateCode.ToLower())
                {
                    result = "0";
                    if (!String.IsNullOrEmpty(callback))
                    {
                        result = callback + "({Success:'True',Content:'0'})";
                    }
                }
                else
                {
                    tick = 0;
                    emailValiCodeExpired = false;
                    result = "1";
                    if (!String.IsNullOrEmpty(callback))
                    {
                        result = callback + "({Success:'True',Content:'1'})";
                    }
                }
            }
            if (String.IsNullOrEmpty(result))
            {
                if (!String.IsNullOrEmpty(callback))
                {
                    result = callback + "({Success:'True',Content:'0'})";
                }
                else
                {
                    result = "0";
                }
            }
            return result;
        }

　　調用方和被調用方是兩個Web應用程序；

　　關於"jsoncallback=?"，在發送ajax請求時，jQuery自動把jsoncallback後面的 "?" 替換爲正確的函數名（回調函數）

　　(通常長這個樣："jQuery1830798391871119546_1449898179923")，以執行回調函數，因此在C#返回的字符串應該這樣寫：

　　String result = callback + "({Success:'True',Content:'1'})";

　　其實返回的是形以下方的一段jQuery腳本:

　　"jQuery1830798391871119546_1449898179923({Success:'True',Content:'1'})"

　　注意紅色字部分，這是一段json格式的數據，由於，發送ajax請求時要求返回的數據格式是JSON

　　切不可將result寫成這樣：return Json(result, JsonRequestBehavior.AllowGet);寫成這樣的話，回調函數就被序列化了，最終也無法執行；

　　常見的錯誤： 1 jQuery1830798391871119546_1449898179923 was not called

　　　　　　　　 2 parsererror

　　　　　　　　 3 已阻止跨源請求：同源策略禁止讀取位於 http://localhost:59334/Account/ValidateCode?validateCode=rucr 的遠程資源。（緣由：CORS 頭缺乏 　　　　　　　　　　　 'Access-Control-Allow-Origin'）。

　　第一個錯誤多是因爲發送ajax請求時未加入"jsoncallback=?"這一句

　　若是dataType寫的是"JSONP"，那麼請求的url裏面能夠不帶"jsoncallback=?"，服務器端須要用Request["callback"]來獲取回調函數，也就是形以下方代碼：

　　前端代碼：

　　$.ajax({
            url: baseUrl + "Account/ValidateCode?validateCode=" + code,
            type: 'GET',
            dataType: 'JSONP',
            success: function(data) {
            　　console.log(data.Content);
            },
            error: function() {
                  console.log(arguments);
            }
      });

　　後臺代碼（簡寫）：

　　String callback = Request["callback"];
      String result = callback + "({Success:'True',Content:'1'})";
      return result;

　　通常錯誤2會和錯誤1一塊兒出現，多是返回的結果中{Success:'True',Content:'1'}這部分代有誤，形成回調函數無法解析JSON數據；

　　至於錯誤3則是跨域失敗，在發送ajax請求時就有問題，多是請求的url沒加"jsoncallback=?"也多是dataType沒指定爲"JSONP"格式，注意：

　　在URL裏面加jsoncallback=?和dataType指定爲"JSONP"，二選一便可；若是dataType是"JSONP"，那麼發送請求時，jQuery會自動在url裏面加上 　　　　　　　　　　　　callback=jQuery1830798391871119546_1449898179923這句，上面有說明，再也不贅述；

　　OK說明完畢！