在ASP.NET MVC中简单使用跨域Ajax-优快云博客

什么是跨域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.youkuaiyun.com/fdipzone/article/details/46390573/