從AJAX誕生那天起，XMLHttprequest對象不能跨域請求的問題就一直存在。這似乎是一個很經典的問題了。是由於javascript的同源策略（這裡不作深入探討）所導致。
解決的辦法，大概有如下幾種：
1. 使用中介層過渡的方式（可以理解為“代理”）：
中間過渡，很明顯，就是在AJAX與不同域的伺服器進行通訊的中間加一層過渡，這一層過渡可以是PHP、JSP、c++等任何具備網路通訊功能的語言，由中介層向不同域的伺服器進行讀取資料的操作。拿asp.net做一個例子，如果需要對不同域的某一個asp.net進行通訊，現在用戶端的xmlhttprequest先query本域的一個asp.net ，然後由本域的這個asp.net去和不同域的asp.net進行通訊，然後由本域的asp.net響應輸出（response）；思路大概就是這樣的，相信讀者已經很清楚的理解了。
2. 使用＜script＞標籤
這個方法是利用＜script＞標籤中的src來query一個aspx獲得response，因為＜script＞標籤的src屬性不存在跨域的問題。
舉個例子來讓大家看得更清楚一點吧：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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.csdn.com/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:Dylan@163.com}
筆者感覺這種方式更加簡潔。呵呵。當然，讀者可以根據實際情況，任意選擇實現方式。
怎麼樣，其實很簡單吧，我看到過很多人不願意去正視ajax所存在的技術瓶頸，其實AJAX更應該是Ajax而不是AJAX，突出第一個A是想強調其實AJAX發揚的是一種非同步傳輸的方法，而不是具體到底使用了哪種技術。
其實，在json資料格式之後，有一種更牛X的“jsonp”，也可以實現ajax的跨域通訊。其實jsonp不是一種資料格式，只是對我介紹的第二種方式做了改進。從jQuery1.2 版本開始，jQuery 擁有對 JSONP 回調的本地支援。
由於時間關係，筆者就不在此詳細講解了。感興趣的讀者，可以參考http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/
本文出自blog.csdn.net/dinglang_2009，轉載請註明出處。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
