Ajax跨域访问

Ajax如何跨域访问数据

最近在做项目的过程中遇到的问题，一个网站需要访问另外一个网站的数据，并且是通过脚本的方式，而由于同源策略的限制，开发人员不能再与外部服务器进行通信的时候使用XMLHttpRequest。而JSONP是一种可以绕过同源策略的方法，即通过使用JSON与<script>标记相结合的方法，从服务器端直接返回可执行的JavaScript函数或者JavaScript对象。目前JSONP已成为大部分公司的Web应用程序跨域首选，尽管JSONP是一个非官方的协议，关于JSONP的介绍，网上一大把；现在开始介绍如何跨域访问数据。

　　开发环境：Visual Studio 2008 + jQuery

　　前端代码（调用方）：

　　var baseUrl = "http://localhost:59334/";

　　$.ajax({
            url: baseUrl + "Account/ValidateCode?validateCode=" + code + "&jsoncallback=?",
            type: 'GET',
            dataType: 'JSON',
            success: function(data) {
            　　console.log(data.Content);
            },
            error: function() {
                  console.log(arguments);
            }
      });

　　后台代码（被调用方，C#）：

　　public String ValidateCode(String validateCode)
        {
            String callback = Request["jsoncallback"];
            String result = "";
            if (Session["CaptchaCode"] != null)
            {
                if (Session["CaptchaCode"].ToString().ToLower() != validateCode.ToLower())
                {
                    result = "0";
                    if (!String.IsNullOrEmpty(callback))
                    {
                        result = callback + "({Success:'True',Content:'0'})";
                    }
                }
                else
                {
                    tick = 0;
                    emailValiCodeExpired = false;
                    result = "1";
                    if (!String.IsNullOrEmpty(callback))
                    {
                        result = callback + "({Success:'True',Content:'1'})";
                    }
                }
            }
            if (String.IsNullOrEmpty(result))
            {
                if (!String.IsNullOrEmpty(callback))
                {
                    result = callback + "({Success:'True',Content:'0'})";
                }
                else
                {
                    result = "0";
                }
            }
            return result;
        }

　　调用方和被调用方是两个Web应用程序；

　　关于"jsoncallback=?"，在发送ajax请求时，jQuery自动把jsoncallback后面的 "?" 替换为正确的函数名（回调函数）

　　(一般长这个样："jQuery1830798391871119546_1449898179923")，以执行回调函数，所以在C#返回的字符串应该这样写：

　　String result = callback + "({Success:'True',Content:'1'})";

　　其实返回的是形如下方的一段jQuery脚本:

　　"jQuery1830798391871119546_1449898179923({Success:'True',Content:'1'})"

　　注意红色字部分，这是一段json格式的数据，因为，发送ajax请求时要求返回的数据格式是JSON

　　切不可将result写成这样：return Json(result, JsonRequestBehavior.AllowGet);写成这样的话，回调函数就被序列化了，最终也没法执行；

　　常见的错误： 1 jQuery1830798391871119546_1449898179923 was not called

　　　　　　　　 2 parsererror

　　　　　　　　 3 已阻止跨源请求：同源策略禁止读取位于 http://localhost:59334/Account/ValidateCode?validateCode=rucr 的远程资源。（原因：CORS 头缺少 　　　　　　　　　　　 'Access-Control-Allow-Origin'）。

　　第一个错误可能是由于发送ajax请求时未加入"jsoncallback=?"这一句

　　如果dataType写的是"JSONP"，那么请求的url里面可以不带"jsoncallback=?"，服务器端需要用Request["callback"]来获取回调函数，也就是形如下方代码：

　　前端代码：

　　$.ajax({
            url: baseUrl + "Account/ValidateCode?validateCode=" + code,
            type: 'GET',
            dataType: 'JSONP',
            success: function(data) {
            　　console.log(data.Content);
            },
            error: function() {
                  console.log(arguments);
            }
      });

　　后台代码（简写）：

　　String callback = Request["callback"];
      String result = callback + "({Success:'True',Content:'1'})";
      return result;

　　一般错误2会和错误1一起出现，可能是返回的结果中{Success:'True',Content:'1'}这部分代有误，造成回调函数没法解析JSON数据；

　　至于错误3则是跨域失败，在发送ajax请求时就有问题，可能是请求的url没加"jsoncallback=?"也可能是dataType没指定为"JSONP"格式，注意：

　　在URL里面加jsoncallback=?和dataType指定为"JSONP"，二选一即可；如果dataType是"JSONP"，那么发送请求时，jQuery会自动在url里面加上 　　　　　　　　　　　　callback=jQuery1830798391871119546_1449898179923这句，上面有说明，不再赘述；

　　OK说明完毕！