1. Flash(不讨论)
2. 服务器代理中转
(注意服务器与服务器之间不存在跨域问题)
3. document.domain(针对基础域名相同的情况)
举例子:(该例子情况可以解决跨域问题)
hz.baidu.com document.domain=‘58.com’
cs.baidu.com document.domain=‘58.com’
举例子:(该例子情况不可以解决跨域问题)
hz.tianmao.com
cs.baidu.com
现在它们的基础域名都已经不相同了,所以使用document.domain是没有效果的。
4.JSONP原理
- web页面上用script标签引入js文件时不受跨域的影响。(不仅如此,我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力,比如script标签、img标签、iframe标签)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知“心”</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<iframe src="https://baidu.com" frameborder="0"></iframe>
<img src="https://box.bdimg.com/static/fisp_static/common/img/searchbox/logo_news_276_88_1f9876a.png" alt="">
</body>
<script src="./index.js"></script>
<script src="./index.txt"></script>
<script src="./index.png"></script>
<script src="./index.php"></script>
<script>
console.log(".js文件里面的d=", d)
console.log(".txt文件里面的a=", a)
console.log(".png文件里面的b=", b)
console.log(".php文件里面的c=", c)
/*
从上面引用的文件来看,不管你引用的文件是什么格式,你都可以
拿到文件里面的内容。还有就是:jsonp的请求都是GET请求。
*/
</script>
</html>
整合到一个script标签里面去,注意页面阻塞消失,但是同步加载导致数据找不到,解决方法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知“心”</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
</body>
<script>
const oScript = document.createElement("script");//创建一个script的标签。
oScript.src = "./index.txt";//给属性添加值。
document.body.appendChild(oScript);//把标签插入到DOM文档树里面去。
console.log(".txt文件里面的a=", a)//注意现在是找不到这个a的,因为同步加载的原因。
/*
现在通过回调函数,就可以拿到index.txt文件里面的内容。
但是这样不利于与后台联调,看下面的方法B
*/
function aa(data) {
console.log(data)
}
/*
方法B:
oScript.src = "./index.txt?cd=bb";
这个时候你需要和后台商量好,cd代表这回调函数,这样就可以完美的解决回调函数命名的问题。
*/
const oScriptB = document.createElement("script");//创建一个script的标签。
oScriptB.src = "./index.txt?cd=bb";//给属性添加值。
document.body.appendChild(oScript);//把标签插入到DOM文档树里面去。
function bb(data) {
console.log(data)
}
</script>
</html>
-
我们把数据放到服务器上,并且数据为json形式(因为js可以轻松处理json数据)
-
我们无法监控通过script标签的src属性是否把数据获取完成,所以我们需要做一个处理。
-
实现定义好处理跨域获取数据的函数,如function aa(data) {}、function bb (data) {}、function doJson (data) {}。
-
用src获取数据的时候添加一个参数cb=“doJson”(服务器端会根据参数cd的值返回对应的内容),此内容为以cd对应的值doJson为函数真实要传递的数据为函数的参数的一串字符,如dojson(‘数据’)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知“心”</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
</body>
<script>
const oScript = document.createElement("script");//创建一个script的标签。
oScript.src = "./index.txt?cd=aa";//给属性添加值。
document.body.appendChild(oScript);//把标签插入到DOM文档树里面去
const oScriptB = document.createElement("script");//创建一个script的标签。
oScriptB.src = "./index.txt?cd=bb";//给属性添加值。
document.body.appendChild(oScript);//把标签插入到DOM文档树里面去。
function aa(data) {
console.log(data)
}
function bb(data) {
console.log(data)
}
</script>
</html>