珠峰 AJAX --- JSONP跨域
AJAX(异步 javascript and XMLHTTPRequest)
JSONP和AJAX相同, 都 是 客户端向服务器端发送请求:
1.给服务器端传递内容
2.从服务器端获取数据
区别:
AJAX 属性同源策略
JSONP 非同源策略(跨域请求)
-> 实现 跨域请求的方式有很多种,只不过JSPNP是最常用的
大概 78种
同源:
index.html
->http://127.0.0.1:8020/JSONP/index.html
data.txt
->http://127.0.0.1:8020/JSONP/data.txt
================
区分同源 非 同源
用当前页面的地址 && 数据请求的接口地址
1)协议
2)域名或者IP
3)端口号
以上三部分完全相同属于同源策略,我们使用AJAX获取数据;
只要有一个不一样,就属于非同源,我们一般使用JSONP获取数据;
==============================
JSONP原理
->在SCRIPT的世界中,没有同源跨域这一说,只要你给我SRC属性的地址
是一个合法的地址,SCRIPT都可以把对应的内容请求回来
->JSONP就是利用了SCRIPT的这个原理
1)我们首先把需要请求数据的,那个跨域的API数据接口的地址,赋值给SCRIPT的SRC
<script type="text/javascript" src = "http://matchweb.sports.qq.com/kbs/calendar?columnId=100000&&callback=fn">
</script>
2)把当前页面中的某一个函数名当做参数值传递给-腾讯-的服务器(URL问号传参:?callback=fn)
3)腾讯的服务器接收到你的请求后,需要进行特殊处理:把你传递进来的函数名和它需要
给你的数据拼成一个字符串 例如:我们传递进去的函数名是fn,它准备好的数据 是
'fn([{"name":"zhufeng"}]) -> '我传递的函数名(需要给我们的数据)'
---注意:JSONP需要 接收请求的服务器 做特殊 处理
4)最后腾讯的服务器把准备的数据通过HTTP协议 返回给我们客户端,
客户端发现其实就是让我们的fn执行,而且还给fn传递了一堆的数据,
那些数据就是我们想要的
=======================
jQuery的AJAX和JSONP调用
<script type="text/javascript" src="js/jquery-2.1.1.min.js">
</script>
<script type="text/javascript">
console.log(111);
//AJAX
// $.ajax({
// type:"get",
// url:"data.txt",
// async:true,
// //如果 是get 请求 则 data 为空
// data:null,
// //设置 get请求的时候 不走缓存,其实 就是在url后面 加了随机数,默认是true
// cache:false,
// //设置 超时间 , 一般设置 3000ms
// timeout:1000,
// success:function(data){
// console.log(data);
// },
// error:function(){
// console.log("error");
// }
// });
//JSONP
//->JSONP都是GET和异步 请求的, 不存在其他的请求方式和同步请求,而且jQuery默认就会给JSONP的请求清除缓存
$.ajax({
//type 也可以去掉
// type:"get",
url:"http://matchweb.sports.qq.com/kbs/calendar?columnId=100000",
//asyns 也可去掉
// async:true,
//不写 dataType 的话 请求不到
dataType:"jsonp",
//自定义 传递给服务器的 函数名,而不是自动生成 的
jsonpCallback:"fn",
//把传递给函数名的那个形参变成 cb
// jsonp:"cb",//报错
success:function(data){
console.log(data);
}
});
</script>
