:文章是供自己平时学习时用,相当于学习笔记,如有错误,欢迎指正,若有侵权,请联系我~~
【】由于浏览器同源策略(浏览器的安全机制)的限制,非同源下的请求,都会产生跨域问题。jsonp(JSON with Padding)即是为了解决这个问题出现的一种简便解决方案。由于同源策略,所以ajax不能实现跨域访问,ajax只能下载同源的数据,跨源的数据禁止下载。
同源策略:(其中有一个不满足时,我们的请求就会发生跨域问题)
例如:
跨源的需求:
jsonp:
jsonp(JSON with Padding)可用于解决主流浏览器的跨域数据访问的问题。jsonp的原理就是动态的创造script标签,然后利用script的src 不受同源策略约束来跨域获取数据。
jsonp如何实现跨域访问?
本质上是利用HTML元素的src属性都可以跨域的思路来解决的。不管是我们的script标签的src属性还是img标签的src属性,或者说是link标签的href,都没有被同源策略所限制。如:img,script,iframe等标签的src属性的值都可以赋成其它域名的合法地址。
jsonp跨域的使用流程:
核心代码:
function download(data){
//对data数据进行操作代码
}
//动态创建script标签,并将该标签插入到页面中
var oScript = document.createElement("script");
oScript.src = `http://xxx.com/jsonp?callback=download`;
//oScript.src = `请求地址?callback=函数名`
document.body.appendChild(oScript);
jsonp案例 ----【百度搜索框】
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度搜索框</title>
<style>
*{margin:0;padding:0;}
li{list-style-type: none;}
a{text-decoration:none;}
#div1{margin:100px 500px;}
#info{width:302px;height:30px;border:1px solid gray;padding:5px;}
#ul1{width:312px;border:1px solid gray;display:none;}
#ul1 li a{color:black;height:30px;line-height:30px;display:block;font-size:15px;padding:5px}
#ul1 li:hover {color:white;background-color:orangered}
</style>
<script>
function download(data){
// alert("要下载的数据" + data);
//取出数据
var arr = data.s;
var oUl = document.getElementById("ul1")
//加载新数据之前,清除掉上一次的数据
oUl.innerHTML = '';
if(arr.length){
oUl.style.display = 'block';
for(var i = 0; i < arr.length; i++){
//动态创建li标签和a标签,并将其插入到页面中
var newLi = document.createElement("li");
var newA = document.createElement("a");
newA.innerHTML = arr[i];
//给a标签添加要跳转的链接
newA.href = 'https://www.baidu.com/s?wd=' + arr[i];
newA.target = '_blank';
newLi.appendChild(newA);
oUl.appendChild(newLi);
}
}else{
oUl.style.display = 'none';
}
}
</script>
<script>
window.onload = function(){
var oInfo = document.getElementById("info");
var oUl = document.getElementById('ul1');
oInfo.onkeyup = function(){ //给输入框添加键盘事件(onkeyup按键释放)
var oValue = this.value
if(!oValue){
oUl.style.display = 'none';
}else{
//加载数据
var newScript = document.createElement('script');
newScript.src = `http://suggestion.baidu.com/su?wd=${this.value}&cb=download`;
document.body.appendChild(newScript);
}
}
}
</script>
</head>
<body>
<div id="div1">
<input type="text" id="info">
<ul id="ul1">
<!-- <li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li> -->
</ul>
</div>
</body>
</html>
效果展示:
参考链接:https://blog.csdn.net/badmoonc/article/details/82289252?utm_source=app