javascript ajax 腳本跨域調用全解析

時間 2019-11-09

標籤 javascript ajax 腳本調用解析欄目 JavaScript 简体版

原文原文鏈接

今天終於有點時間研究了一下javsscript ajax 腳本跨域調用的問題，先在網上隨便搜了一下找到一些解決的辦法，可是都比較複雜。由是轉到jquery.chm用戶手冊當中找到一些代碼片斷關於ajax跨域調用的問題。代碼片斷以下：javascript

crossDomain mapV1.5html

默認：同域請求爲falsejava

跨域請求爲true若是你想強制跨域請求（如JSONP形式）同一域，設置crossDomain爲true。這使得例如，服務器端重定向到另外一個域。node

這裏強調如是ajax的跨域調用，dataType必定要是jsonp的格式。（什麼是jsonp這裏不作解釋，能夠google一下。） python

令外還有一些代碼片斷：以下所示：jquery

dataType Stringajax

預期服務器返回的數據類型。若是不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷，好比XML MIME類型就被識別爲XML。在1.4中，JSON就會生成一個JavaScript對象，而script則會執行這個腳本。隨後服務器端返回的數據會根據這個值解析後，傳遞給回調函數。可用值:json

"xml": 返回 XML 文檔，可用 jQuery 處理。跨域

"html": 返回純文本 HTML 信息；包含的script標籤會在插入dom時執行。瀏覽器

"script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了"cache"參數。'''注意：'''在遠程請求時(不在同一個域下)，全部POST請求都將轉爲GET請求。(由於將使用DOM的script標籤來加載)

"json": 返回 JSON 數據。

"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。

"text": 返回純文本字符串

jsonp String

在一個jsonp請求中重寫回調函數的名字。這個值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分，好比{jsonp:'onJsonPLoad'}會致使將"onJsonPLoad=?"傳給服務器。

jsonpCallback String

爲jsonp請求指定一個回調函數名。這個值將用來取代jQuery自動生成的隨機函數名。這主要用來讓jQuery生成度獨特的函數名，這樣管理請求更容易，也能方便地提供回調函數和錯誤處理。你也能夠在想讓瀏覽器緩存GET請求的時候，指定這個回調函數名。

以上幾個重要代碼片斷，重點是紅色字的部分，要求跨域調用ajax要指定一個callback handler函數。

看了這麼多你們也必定是看膩了，直接將上述的代碼組合。此段代碼在域：test.com中，如今要調用http://jks.com/JsTest.aspx進行ajax驗證。代碼以下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">

        function invokeRemoteMethod() {
            $.ajax({
                url: 'http://jks.com/JsTest.aspx?type=invoke&method=add&time=' + Math.random(),
                type: 'get',
                dataType: 'jsonp',
                jsonp: "callback",
                data: '',
                success: function (data) {
                    alert(data.msg);
                },
                error: function (message) {
                    alert(message);
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="button" id="but_invoke" value="調用" onclick="invokeRemoteMethod();" />
    </form>
</body>
</html>

jks.com/JsTest.aspx後臺代碼以下：

namespace WebApplication1
{
    public partial class JsTest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            var time = Request["time"];
            var callback = Request["callback"];
            string responseData = callback + "({msg:'成功'})";
            Response.Write(responseData);
            Response.Flush();
            Response.End();
        }
    }
}

你們看明白了嗎？返回結果是經過"callback"進行返回的。什麼原理呢？因爲翻開jquery的源碼：

ajax: function (origSettings) {
.....
// If we're requesting a remote document
        // and trying to load JSON or Script with a GET
        if ( s.dataType === "script" && type === "GET" && remote ) {
            var head = document.getElementsByTagName("head")[0] || document.documentElement;
            var script = document.createElement("script");
            script.src = s.url;
            if ( s.scriptCharset ) {
                script.charset = s.scriptCharset;
            }

            // Handle Script loading
            if ( !jsonp ) {
                var done = false;

                // Attach handlers for all browsers
                script.onload = script.onreadystatechange = function() {
                    if ( !done && (!this.readyState ||
                            this.readyState === "loaded" || this.readyState === "complete") ) {
                        done = true;
                        success();
                        complete();

                        // Handle memory leak in IE
                        script.onload = script.onreadystatechange = null;
                        if ( head && script.parentNode ) {
                            head.removeChild( script );
                        }
                    }
                };
            }

            // Use insertBefore instead of appendChild  to circumvent an IE6 bug.
            // This arises when a base node is used (#2709 and #4378).
            head.insertBefore( script, head.firstChild );

            // We handle everything using the script element injection
            return undefined;
        }
.....
}）;

最最關鍵的代碼：

if ( s.dataType === "script" && type === "GET" && remote ) {
   var head = document.getElementsByTagName("head")[0] || document.documentElement;
   var script = document.createElement("script");
   script.src = s.url;

..................

head.insertBefore( script, head.firstChild );

......

}

因爲可將這段代碼 function invokeRemoteMethod() {
            $.ajax({
                url: 'http://jks.com/JsTest.aspx?type=invoke&method=add&time=' + Math.random(),
                type: 'get',
                dataType: 'jsonp',
                jsonp: "callback",
                data: '',
                success: function (data) {
                    alert(data.msg);
                },
                error: function (message) {
                    alert(message);
                }
            });
        }

簡單理解成：

function invokeRemoteMethod() {

　　　　var head = document.getElementsByTagName("head")[0] || document.documentElement;

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

　　　　script.src = 'http://jks.com/JsTest.aspx?type=invoke&method=add&time=563&callback=callbackMegthod';

　　　　head.insertBefore(script, head.firstChild);
}

以上的代碼相關於在head頭上加了一個腳本的引用：

固然還要指定一個callback的方法：

function callbackMegthod(data) {
            alert('callbackMegthod');
            alert(data.msg);
        }

還能夠最白癡的理解成：

<html xmlns="http://www.w.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery-1.4.1.js" type="text/javascript"></script>
   
    <script type="text/javascript">
        function callbackMegthod(data) {
            alert(data.msg);
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="button" id="but_invoke" value="調用" onclick="invokeRemoteMethod();" />
             <script src="http://jks.com/JsTest.aspx?type=invoke&method=add&time=563&callback=callbackMegthod" type="text/javascript"></script>
    </form>
</body>
</html>