AJAX跨域问题的三种解决方案：代理、Script标签与JSONP

AJAX跨域问题概述

自AJAX技术诞生以来，XMLHttpRequest对象受限于JavaScript的同源策略，无法直接发起跨域请求，这一经典问题至今仍是开发中的常见挑战。

针对该问题，目前主要存在以下几种解决思路：

方案一：中间层代理

第一种方案是采用中间层过渡，即通过“代理”机制解决。

具体而言，在客户端与不同域的服务器之间增加一层中间服务（可使用PHP、JSP、C#等任何具备网络通信能力的语言）。中间层负责向目标域服务器获取数据并返回给客户端。以ASP.NET为例，客户端XMLHttpRequest首先请求本域的ASP.NET服务，再由该服务向目标域的ASP.NET发起请求，最后将结果响应给客户端。这种间接通信的思路清晰且易于实现。

方案二：Script标签实现

第二种方案是利用HTML中的script标签。

该方法通过script标签的src属性加载远程资源，由于浏览器对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">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后端处理代码如下：

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>
<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回调机制。