什么是跨域Ajax,我们都知道Ajax,可以用服务器进行少量数据交互的技术。所谓跨域,简单的理解,就是跨越域名去访问,当你的网站要访问别人网站数据的时候,就必须使用跨域Ajax。
言归正传,首先来看客户端代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(document).ready(function() {
$("#ajax").bind("click", function() {
$.ajax({
"url": "http://localhost:4116/home/index",
"data": {
"Name": "YANGXU",
"Age":22
},
"dataType": "jsonp",
"jsonp":"callback",
"jsonpCallback": "jsonpCall",
"success": function (data) {
$("<h1>" + data.Name + "</h1>").insertAfter($("#ajax"));
//alert(data);
},
"error": function(data) {
alert(data);
}
});
});
});
</script>
</head>
<body>
<button id="ajax">点我</button>
</body>
</html>
通过$.ajax中的jsonp来进行跨域请求注意点:
1、一定要设置dataType:jsonp。
2、还要指定jsonp:值可以随便设置,但是一定要和后台处理程序中的接受request.querystring[]中的参数一致。
3、指定jsonpCallback:即jquery要回调的函数这个函数在一般处理程序中要回传给jquery,形式为jsonpCall({"key1","value1","key2","value2"}),jsonpCallback如果不指定,则jquery会自动生成一个随机方法。
服务端:
public ActionResult Index(string Name,int Age)
{
string callbackFunc = Request.QueryString["callback"];
System.Web.Script.Serialization.JavaScriptSerializer jss =
new System.Web.Script.Serialization.JavaScriptSerializer();
return Content(callbackFunc + "("+jss.Serialize(new
{
Name=Name,
Age=Age
})+")");
}
这儿就不能简单的使用Json自带的序列化器序列化了,我们需要自己手动将序列化的JSON字符串和指定的回调函数名拼接成 func(json)
这样的形式。
然后就可以使用了,效果如下:
假如我们不进行字符串拼接,后台直接返回JSON,前台能够正常接收JSON,但是会报一个错误,大家可以自己试一下。
这是一种常规的做法,还有一种比较好的办法是在后台返回前台数据的时候,设置header中的一条数据Access-Control-Allow-Origin:*,我试了一下,挺好用,不过听网上的人说有浏览器兼容性问题,header('Access-Control-Allow-Origin:*');是HTML5新增的一项标准功能,因此 IE10以下版本的浏览器是不支持的,因此,如果要求兼容IE9或更低版本的ie浏览器,会导致使用此种方式的跨域请求以及传递Cookie的计划夭折,最终还得回归JSONP,目前主流 的处理方式是使用JSONP,易于实现,兼容性好,可查的资料也很多。原链接在此:http://blog.csdn.net/fdipzone/article/details/46390573/