Ajax跨域技术

1、跨域ajax前台

对ajax有一定了解的程序员都应该知道，一般的ajax是不能跨域获取数据的。那么对应ajax跨域的技术手段便是jsonp。jsonp的原理网上有就很多的资料，我们都知道<script>和<img>等标签是具有跨域能力的，这里所说的跨域能力是指：

<script type="text/javascript" src="http://static.blog.csdn.net/scripts/jquery.js"></script>
<img src="//www.baidu.com/img/bdlogo.png"/>

jsonp大致上就是利用<script>的跨域能力来提供ajax的跨域访问，添加一个回调函数的参数，发送ajax请求后立即调用回调函数处理数据。

下面看具体的示例：

(1) $.ajax()

 $.ajax({
             type: "get",async: false,url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",dataType: "jsonp",jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"myfunction",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
             success: function(json){//对返回数据进行处理。如果没有定义jsonpCallback，则可以在这里处理。如果定义了jsonpCallback，则可以不处理，因为在请求到数据后，会自动调用myfunction(result)

http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=myfunction

如果没有定义jsonCallback，那么请求则是：

<http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=？

这里的"?"，jquery会自动将其转换为一个随机的参数，模拟函数名。

<script>
function myfunction(result)
{
//进行处理
}
</script>

值得注意的是：

dataType: "jsonp"

这是十分重要的，告诉请求的数据是jsonp，否则请求将不会携带参数callback=myfunction

(2) $.getJson()

事实上，对于$.getJson()是不能跨域的。我在网上看到很多说$.getJson()跨域的示例，后来实验了一下，实际上getJson是不具备跨域能力的。主要是因为getJson()请求的数据类型是json格式。

jQuery.getJSON(url,data,success);

// 等价于

$.ajax({
 url: url,type: "GET",data: data,success: success,dataType: "json"
});

a、$.getJson("http://....?callback=myfunction",function(data){})

b、$.getJson("http://....?callback=?",function(data){})

对于这种类型的ajax请求，确实会得到正确的数据，但是不会执行function(data)函数，至于到底是什么原因，我也弄不明白。

其他类似的$.postJson()等也是不能跨域的。

综上所述，要想使用ajax跨域请求，最好是：

(1)javascript，创建XMLHTTPRequest
(2)$.ajax()，设置datatype
(3)<script src="http://.....?callback=myfunction"></script>

2、支持回调函数的后台

下面的示例是Asp.net下支持回调函数的后台：

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/html";
            string result = "{"name":"mcfer","age":"18","sex":"male"}";

            if (context.Request["callback"] != null)
            {
                context.Response.Write(context.Request["callback"].ToString() + "(" + result + ")");//这里相当于返回了一段JavaScript代码到前端执行
            }
            else
                context.Response.Write(result);
        }

需要注意的是一定要先获取callback参数。而且在前台的请求参数名称也一定要是callback

从后台我们可以看到实际上我们请求获取的数据是 "函数名(数据)"，所以在前台会自动执行这个函数。那么还有一个疑问：我们在

success: function(json){}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!