AJAX跨域問題

最後更新：2016-08-31 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

完美解決AJAX跨域問題我看到過很多人不願意去正視ajax所存在的技術瓶頸，其實AJAX更應該是Ajax而不是AJAX，突出第一個A是想強調其實AJAX發揚的是一種非同步傳輸的方法，而不是具體到底使用了哪種技術

從AJAX誕生那天起，XMLHttprequest對象不能跨域請求的問題就一直存在。這似乎是一個很經典的問題了。是由於javascript的同源策略（這裡不作深入探討）所導致。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ajax跨域問題</title>
    <script type="text/javascript" src="" id="getAspx">
    </script>
    <script type="text/javascript">
        function get(url) {
            var obj = document.getElementById("getAspx");
            obj.src = url;
            (obj.readStatus == 200)
            {
                alert(responseVal);//如果成功，會彈出Dylan
            }
        }
        function query() {
            get(getDemo.aspx);
        }
    </script>
</head>
<body>
<input type="button" value="Ajax跨域測試" onclick="query();"/>
</body>
</html>

getDemo.aspx後台代碼：

複製代碼代碼如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace LearnJS
{
    public partial class getDemo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write("var responseVal=‘Dylan‘");
        }
    }
}

這個方法又叫做ajaj或者ajax without xmlHttprequest，把x換成了j，是因為使用了＜script＞標籤而沒有用到xml和xmlHttprequest的緣故。這種方法似乎有點“另類”，哈哈。

那現在我們就看看，有了jQuery之後，如何來解決ajax的跨域問題：

複製代碼代碼如下:
<html>
<head>
<title>JQuery學習</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    var oBtnTest = $("#btnTest");
    oBtnTest.click(function(){
        oBtnTest.disabled = true;
        var oResult = $("#result");
        oResult.html("loading").css("color","red");
        jQuery.getScript("http://www.jb51.net/test/js.txt",
        function(){
            oResult.html("name:" + Dylan.name + "<br/>email:" + Dylan.email).css("color","black");
            oBtnTest.disabled = false;
        });
    });
});
</script>
</head>
<body>
<button id="btnTest">BtnTest</button>
<div id="result"></div>
</body>
</html>

遠程伺服器端js.txt中的內容為:
var Dylan= {name:"Dylan",email:[email protected]}

筆者感覺這種方式更加簡潔。呵呵。當然，讀者可以根據實際情況，任意選擇實現方式。

怎麼樣，其實很簡單吧，我看到過很多人不願意去正視ajax所存在的技術瓶頸，其實AJAX更應該是Ajax而不是AJAX，突出第一個A是想強調其實AJAX發揚的是一種非同步傳輸的方法，而不是具體到底使用了哪種技術。

其實，在json資料格式之後，有一種更牛X的“jsonp”，也可以實現ajax的跨域通訊。其實jsonp不是一種資料格式，只是對我介紹的第二種方式做了改進。從jQuery1.2 版本開始，jQuery 擁有對 JSONP 回調的本地支援。

Ajax跨域查詢完美解決通過$.getJSON()實現

AJAX跨域問題

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

AJAX跨域問題

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support