jsonp跨域

js跨域

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

//a网站的请求页：
<script>
 function jsonp(json){
    //对返回的json数据的处理
}
</script>
<script src="http;//www.b.com/jsonp.js"></script>

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

要点

1. a网站定义jsonp的回调处理。

2. a网站jsonp跨域请求

3. b网站使用a网站的同名函数处理跨域请求

补充说明

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

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的处理
    },});

服务端的修改

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仅支持get请求

另辟蹊径

XHR2（XMLHttpRequest Level 2）
只需在服务器端设置两个参数即可：

header('Access-Control-Allow-Origin:*');//允许跨域请求的域名，允许全部设为*
header('Access-Control-Allow-Methods:POST,GET');

（编辑：李大同）

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