Ajax的跨域问题,归根结底其实是javascript的同源策略(这里不作探讨,不清楚可以百度下)导致的,以前不用Ajax,用XMLHttprequest对象跨域请求也是有问题的。
1.使用中间层绕过跨域问题(代理模式)
举个例子大家就清楚了:a站点要通过http请求获得b站点的数据,那么在a站点提供一个Proxy接口GetRequestByUrl,然后在GetRequestByUrl里请求b站点的地址,相当于ajax脚本里直接调用http://b.com/api改为调用/GetRequestByUrl,然后再服务器端发起对http://b.com/api的请求;
(这个的思路主要是通过代理绕过javascript同源策略)
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 getData(url) {
var obj =document.getElementById("getAspx");
obj.src =url;
(obj.readStatus == 200)
{
alert(responseVal);//如果成功,会弹出Dylan
}
}
function query() {
getData(getDemo.aspx);
}
</script>
</head>
<body>
<input type="button" value="Ajax跨域测试" onclick="query();"/>
</body>
</html>
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(objectsender,EventArgs e)
{
Response.Write("var responseVal='Dylan'");
}
}
}
这个方法又叫做ajaj或者ajax without xmlHttprequest,把x换成了j,是因为使用了<script>标签而没有用到xml和xmlHttprequest的缘故。这种方法似乎有点“另类”。
3.通过Jsonp实现
JSONP(JSONwith Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
实现原理:由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。(是对第二种方法的改进)
使用:客户端代码如下
$.ajax({
type: "get",
url: "http://localhost:9524/Home/ProcessCallback",// 这个就是不同于当前域的一个URL地址,这里单纯演示,所以同域
dataType: "jsonp",
jsonp: "jsonpcallback",// 指定回调函数,这里名字可以为其他任意你喜欢的,比如callback,不过必须与下一行的GET参数一致
data:"name=jxq&email=feichexia@yahoo.com.cn&jsonpcallback=?",//jsonpcallback与上面的jsonp值一致
success: function (json) {
alert(json.Name);
alert(json.Email);
}
});
服务端代码如下:
public string ProcessCallback(string name,string email)
{
if (Request.QueryString != null)
{
string jsonpCallback = Request.QueryString["jsonpcallback"];
var user = new User
{
Name = name,
Email = email
};
return jsonpCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";
}
return "error";
}