关于JSON跨域

JS跨域

利用了script src没有同源限制,进行跨域请求。
例如,www.a.com 想请求 www.b.com 的内容

//a网站的请求页:



//b网站的jsonp.js 响应页
jsonp({'name':'amy',age:22})

要点

  1. a网站定义jsonp的回调处理。
  2. a网站jsonp跨域请求
  3. b网站使用a网站的同名函数处理跨域请求

补充说明

以上便是js的jsonp实现跨域,其实它和ajaxXHR对象并没有任何关系,由于jquery 把jsonp的实现封装在了ajax中,所以jsonpajax经常同时被提起.

jQuery跨域

不使用jsonp的ajax请求

$.ajax({ 
    type: "GET",     
    url: "http://www.b.com/jsonp.js"
    dataType: "json",
    success: function(data) {
        //对data的处理
    },
    error: function(jqXHR){     
        alert("发生错误:" + jqXHR.status);  
    },     
});    

如果不使用jsonp会有跨域报错。

使用了jsonp 的请求:

    $.ajax({ 
    type: "GET",     
    url: "http://www.b.com/jsonp.js"
    dataType: "jsonp",
    jsonp:"callback",//“callback”:任意名字都可以
    success: function(data) {
        //对data的处理
    },
    error: function(jqXHR){     
        alert("发生错误:" + jqXHR.status);  
    },     
});

服务端的修改

  1. 加上获取请求的处理:
    $jsonp = $_GET["callback"];//callback名字和请求的名字相同
  2. 返回参数之前加上$jsonp, 并用()将参数括住,以php后端为例:
        //原来:$result ='{"success":true,"msg":"找到员工:员工编号:' . $value["number"] .'"}';
       //改为:
       $result =$jsonp . '({"success":true,"msg":"找到员工:员工编号:' . $value["number"] .'"})';
    

ajax的处理把在get请求后追加了callback参数,并给她赋予了参数值,响应值追加了callback的参数值

JSONP跨域的局限性

jsonp仅支持get请求