<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
src 属性他自带有跨域功能,浏览器没有限制。
-->
<script>
function jsonp(info) {
//已经帮我转成对象。
console.log(info);
}
/*
* 我的目的是什么:
* http://www.baidu.com/asdfsadf/asdf.php
* 然后这个地址返回,我想把这个返回的数据获取。
* 我的目的是获取第三方网站的资源数据。
*
* */
</script>
<!--
这个标签没有跨域的限制,浏览器没有对这个标签进行一个禁用。
jQuery
//之前这段代码是写在http://www.wu.com
$.ajax({
url:"http://www.baidu.com/asdfasdfasdf",
type:"get",
success:function(){
}
})
//假设没有加dataType:jsonp
//这个jQuery 底层默认是去发送一个XMLHttpRequest 的请求
//但是请求的资源是http://www.baidu.com 的资源 ,直接跨域的。
//现在我是dataType:jsonp
//jQuery 底层 var srcipt=document.createElement("srcipt");
//srcipt.src="http://www.baidu.com" //跨域
-->
<script src="http://api.wu.com/api/04jsonp1.php?callback=jsonp"></script>
</head>
<body>
</body>
</html>
跨域:
我在www.xiaoyanzi.com 站点下面的一个页面想去访问 http://www.baidu.com 下面的一个资源.
http://www.xiaoyanzi.com a.html
http://www.baidu.com b.html
1:document
a.html 想访问b.html 下面的元素 顶级域名都不一样。
http://www.xiaoyanzi.com a.html
http://api.xiaoyanzi.com b.html 主域名一样。
a.html 想访问b.html 默认不允许。
同源:域名,端口,协议必须一样。
(不同源就跨域)
但是主域名都一样。
所以我怎么去解决这个跨域的问题。
http://www.z.com a.html 使用js 添加一个document.domian ="zhuwu.com";
http://api.z.com b.html 使用js 添加一个document.domian ="zhuwu.com";
2:ajax 跨域
在http://www.z.com 有一个a.html 想去访问http://www.baidu.com/afads.php
有跨域的特性。(浏览器觉得会有安全问题。)
a.html
$.ajax({
url:"http://www.baidu.com",
type:"",
})
请求可以发送出去,数据回不来。
$.ajax({
url:"http://www.baidu.com",
type:"",
dataType:"jsonp",
})
底层的原理
在jQuery 的参数不加 dataType:"jsonp",
默认是发送一个xmlHttpRequest 请求,使用这个对象去发送请求。你浏览器根本就接收不到数据。
添加了:dataType:"jsonp",
jQuery 里面
var script=document.createElement("script");
script.src="http://www.baidu.com/demo.js";
跨域访问是我们以后比较常见的操作:
1: 在我的网站下面去访问一些其它网站提供的一些服务。
2: 天气预报,查询机票,查询火车票。 查询ip 地址。电话号码归属地