Ajax知识点总结—跨域
2018-08-27 本文已影响11人
时修七年
什么是跨域？
浏览器中有 同源策略 ，即一个域下的页面中，无法通过 Ajax 获取到其他域的接口。例如有一个接口https://www.baidu.com，你自己的一个页面http://www.yourname.com/page1.html中的 Ajax 无法获取这个接口。这正是命中了“同源策略”。如果浏览器哪些地方忽略了同源策略，那就是浏览器的安全漏洞，需要紧急修复。
url 哪些地方不同算作跨域？
协议域名-
端口
但是 HTML 中几个标签能逃避过同源策略——<script src="xxx">、<img src="xxxx"/>、<link href="xxxx">，这三个标签的src/href可以加载其他域的资源，不受同源策略限制。
因此，这使得这三个标签可以做一些特殊的事情。
<img>可以做打点统计，因为统计方并不一定是同域的。除了能跨域之外，<img>几乎没有浏览器兼容问题，它是一个非常古老的标签。
<script>和<link>可以使用 CDN，CDN 基本都是其他域的链接。
另外<script>还可以实现 JSONP，能获取其他域接口的信息，接下来马上讲解。
但是请注意，所有的跨域请求方式，最终都需要信息提供方来做出相应的支持和改动，也就是要经过信息提供方的同意才行，否则接收方是无法得到它们的信息的，浏览器是不允许的。
如何实现跨域？
解决跨域 - JSONP
jsonp的具体实现首先在页面中的一个
script标签里写入一个函数,然后再另外一个标签中利用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>Document</title>
<script>
function fn(data){
alert(data);
}
</script>
<script src="1.txt">
</script>
</head>
<body>
</body>
</html>
后台
fn("JSONP:json padding")
JSONP实战——百度下拉框
<!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>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
function show(json){
ul1.innerHTML = "";
json.s.forEach(str=>{
var liEle = document.createElement("li");
liEle.innerHTML = str;
ul1.appendChild(liEle);
})
}
window.onload = function(){
var ul1 = document.getElementById("ul1");
var input1 = document.getElementById("text");
console.log(input1)
input1.oninput = function(){
console.log(input1.value)
var oS = document.createElement("script");
oS.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${input1.value}&cb=show`;
document.head.appendChild(oS);
}
}
</script>
</head>
<body>
<div class="search">
<input type="text" id="text">
<ul id="ul1"></ul>
</div>
</body>
</html>
