跨源不能进行ajax,[转]AJAX 跨源 HTTP 请求

实现

让我们看一下服务器端代码，例子如下(ASP.NET和PHP)

ASP.NET (C#)

protected void Page_Load(object sender, EventArgs e)

{

String data = String.Empty;

String returnJSONStr = String.Empty;

switch (Request.HttpMethod)

{

case "GET":

data = Request.QueryString["Data"];

returnJSONStr = "{\"Data\":\"Hi remote friend, you tried to passed me data: *" + data + "* through HTTP GET.\"}";

break;

case "POST":

data = Request.Form["Data"];

returnJSONStr = "{\"Data\":\"Hi remote friend, you tried to POST some mock data: *" + data + "* to me.\"}";

break;

case "OPTIONS":

break;

default:

returnBadRequestResponse();

break;

}

if (String.IsNullOrEmpty(data))

returnBadRequestResponse();

else

{

Response.AddHeader("Access-Control-Allow-Origin", "*");

Response.ContentType = "application/json";

Response.Write(returnJSONStr);

}

}

private void returnBadRequestResponse()

{

Response.StatusCode = 400;

Response.ContentType = "application/json";

Response.Write("{\"Error\":\"Bad HTTP request type!\"}");

}

PHP

if(isset($["Data"]))

{

$method=$_SERVER['REQUEST_METHOD'];

$data="";

if($method=="POST")

{

$data=$_POST["Data"];

$fakeData=new FakeData();

$fakeData->Data="Hi remote friend, you tried to POST some mock data: *"+data+"* to me.";

$fakeData->Time=new DateTime("now");

}

elseif($method=="GET")

{

$fakeData=new FakeData();

$fakeData->Data="Hi remote friend, you tried to passed me data: *"+data+"* through HTTP GET.";

$fakeData->Time=new DateTime("now");

}

else

{

RaiseError();

}

header('Content-type: application/json');

$jsonStr= json_encode($fakeData);

echo($jsonStr);

}

else

{

RaiseError();

}

function RaiseError()

{

http_send_status(405);

header("Status: 405 Method Not Allowed");

}

/*Classes definition*/

class FakeData

{

public $Data;

public $Time;

}

客户端AJAXY发起请求代码：

var cor = null; // cor stands for Cross-Origin request

if (window.XMLHttpRequest) {

cor = new XMLHttpRequest();

}

//else if (window.XDomainRequest) {

//cor = new XDomainRequest();

//}

else {

alert("Your browser does not support Cross-Origin request!");

return;

}

cor.onreadystatechange = function () {

if (cor.readyState == 4) {

document.getElementById('lbl').innerHTML = cor.responseText;

}

};

var data = 'Some fake data';

if (method == 'POST') {

cor.open('POST', 'http://WayneYe.com/Demo/CORSDemo/CORSDemoServer.aspx', true);

cor.withCredential = "true";

cor.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

cor.send('Data=' + data);

}

else if (method == 'GET') {

cor.open('GET', 'http://WayneYe.com/Demo/CORSDemo/CORSDemoServer.aspx?Data=' + data, true);

cor.withCredential = "true";

cor.send(null);

}

JS代码适用于所有主流浏览器(IE8+, FF 3.6+, Chrome 8+),我没有用IE8所采用的XDomainObject，因为 IE8+, FF and Chrome, Safari等浏览器支持XMLHTTP请求。而且XDomainObject(XDR)似乎有很多限制(参考： http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx)

结论

跨源资源共享为网站开发人员实现跨源通信提供了一个安全，灵活，标准的方案。也许是时候摈弃像JSONP,Flash,Silverlight,server bridge以及window.name等等并不是很实用的方法。

参考资料