本文介绍AJAX跨域问题的三种常见解决方案。首先是通过中间层（如PHP、JSP）进行代理转发；其次利用script标签src属性不受同源策略限制的特性，实现类似AJAJ的通信；最后介绍基于jQuery的JSONP回调机制，通过动态加载远程JS文件实现跨域数据交互，并对比各方案的优缺点。
AJAX跨域问题概述
自AJAX技术诞生以来，XMLHttpRequest对象受限于JavaScript的同源策略，无法直接发起跨域请求，这一经典问题至今仍是开发中的常见挑战。
针对该问题，目前主要存在以下几种解决思路：
方案一：中间层代理
第一种方案是采用中间层过渡，即通过“代理”机制解决。
具体而言，在客户端与不同域的服务器之间增加一层中间服务（可使用PHP、JSP、C#等任何具备网络通信能力的语言）。中间层负责向目标域服务器获取数据并返回给客户端。以ASP.NET为例，客户端XMLHttpRequest首先请求本域的ASP.NET服务，再由该服务向目标域的ASP.NET发起请求，最后将结果响应给客户端。这种间接通信的思路清晰且易于实现。
方案二：Script标签实现
第二种方案是利用HTML中的script标签。
该方法通过script标签的src属性加载远程资源，由于浏览器对script标签的src属性不执行跨域限制，因此可以成功获取响应数据。
以下通过具体示例说明其工作原理：
HTML前端代码如下：
<!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">3
<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后端处理代码如下：
C#后端代码：
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（将XMLHttpRequest中的X替换为J，代表JavaScript），因为它使用了script标签而非标准的XMLHttpRequest，实现方式较为独特。
方案三：jQuery与JSONP
接下来介绍在引入jQuery后，如何解决AJAX跨域问题：
前端HTML与jQuery代码如下：
<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("https://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:Dylan@163.com}
作者认为这种方式代码更为简洁。读者可根据实际项目需求选择最适合的实现方案。
实际上，解决跨域问题并不复杂。许多开发者往往忽视了AJAX的技术瓶颈，但AJAX的核心在于异步传输（Asynchronous），而非特定的技术实现。
在JSON数据格式普及后，出现了一种更强大的跨域通信方式——JSONP。JSONP并非数据格式，而是对前述script标签方案的优化改进。自jQuery 1.2版本起，jQuery已原生支持JSONP回调机制。