同源：域名，协议，端口 相同。
跨域：只要协议、域名、端口有任何一个不同，都是不同的域，之间的请求就是跨域操作。
同源策略：（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功。
浏览器的同源策略会导致跨域，这里同源策略又分为以下两种：
DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。
XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。
跨域问题解决 --- JSONP（JSON with Padding）
No 1：JSONP:为了便于客户端使用数据，逐渐形成了一种非正式传输协议。
No 2：实现方法：通过动态创建script标签,然后利用src属性在远程服务器上设法把数据装进js格式的文件里进行跨域。
No 3：基本原理该：用户传递一个callback参数给服务端，服务端返回数据时将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
<head>
<script type="text/javascript">
//得到结果后的回调函数
var search=function(data){
alert('你查询的结果是：单价'+data.price+'元');
};
//提供jsonp服务的url地址
var url="http://flightQuery.com/jsonp/flightResult.aspx?id=001&callback=search";
//创建script标签，设置其属性
var script=document.createElement('script');
script.setAttribute('src', url);
//把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</sctipt>
</head>
jQuery实现jsonp调用：
jQuery(document).ready(function(){
$.ajax({
type:"get",
async:false,
url:"http://flightQuery.com/jsonp/flightResult.aspx?id=001",
dataType:"jsonp",
jsonp:"callback",
//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"search",
//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success:function(json){
alert('您查询信息：单价：'+json.price+'元');
},error:function(){
alert('请求失败');
}
});
});
jquery在处理jsonp类型的ajax时（虽然jquery也把jsonp归入了ajax，但其实它们真的不是一回事儿），自动帮你生成回调函数并把数据取出来供success属性方法来调用
网友评论