JSONP跨域请求

Ajax跨域请求——jsonp技术

1、Ajax跨域请求原理图

略

2、Ajax跨域请求不被允许的原因

• Ajax技术由于受到浏览器的限制，该方法不允许跨域通信。
• 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。

3、jsonp协议

jsonp就是一个非官方协议，主要用于解决Ajax的跨域请求问题

面试题：json与jsonp的区别

1. 实现原理

利用script里面的src属性

解决跨域请求的方式：

1、通过jsonp，即ajax操作返回数据的类型为jsonp （针对纯js写的应用程序）

客户端：

var url='http://www.study.com/jsonpurl.php?f1=?';

var title=$('input').val();

var data={'title':title};

/*

$.get(url,data,function(msg){

alert(msg)

},'jsonp');

*/

$.getJSON(url,data,function(msg){

alert(msg)

});

请求的服务器端：

$arr=array(1,2,3,4);

$str=json_encode($arr); //'1,2,3,4'

//$str='1,2,3,4';

$fn=$_GET['f1']; //callback

echo $fn.'('.$str.')'; //callback("1,2,3,4")

2、借助第三方语言（跟发起ajax请求是同域名）,通过第三方语言获取要得到的数据，进行返回（推荐）

客户端

var url='http://www.study.com/1.php';

var title=$('input').val();

var data={'title':title};

$.get(url,data,function(msg){

alert(msg)

});

服务器端

//$title=$_GET['title'];

$str=file_get_contents('http://www.study.com/1.php');

echo $str;