[A] JSONP跨域
1. 跨域拦截
1. 我们通过一个.html文件区请求另一个.php或者.txt文件的内容的时候 必须保证该请求的.html文件和被请求的.php和.txt文件在同一个协议和IP下,才能请求成功。
如请求文件:http://localhost/PHP/22json跨域语法.html
被请求文件:localhost/PHP/data.txt
2. 请求文件.html与被请求文件.php/.txt不在同一个协议和IP下,请求会被拦截,导致请求失败
如请求文件:http://localhost/PHP/22json跨域语法.html
被请求文件:"https://api.asilu.com/weather/"
报错内容:Access to XMLHttpRequest at '.php/.txt' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
即同源策略禁止读取位于'.php/.txt'的远程资源,因为核中缺少'Access-Control-Allow-Origin'请求头
3. 跨源需求:
你在做本地开发的时候,你的文件夹下的文件不是在一个域下面的,当你一个文件需要发送ajax请求,
请求另外一个页面的内容的时候,就会跨域。不是为什么要跨域,而是你如果不搭服务器,
又想要ajax请求的话是不得不跨越。跨域的作用就是让你能访问不是同一个域的文件。
4. 跨源的方式:
1. 修改ajax的同源协议(不建议,因为不安全)
2. 间接跨源,即用html页面委托php页面进行跨源的方式
【这是因为】我们当前的html页面是不可以跨源的,但是我们的php页面是可以跨源的
3. JSONP跨域
[B] JSONP跨域
1. JSONP跨域原理:
1. src的属性是可是实现跨源的,如<img src="" alt="">,如script src="">等都包含src属性。
2. 故可将跨域内容写在.js文件中,然后在当前.html页面调用该.js文件
【实现原理】在当前.html中预先定义函数fun,再在跨域的.js中调用该函数,并将需要跨域的语句作为参数调用;
最后,在.html文件中调用该.js文件即可实现跨源
【实现过程】1. 在.html文件中先定义函数download();
2. 在.js文件中写入:download("I am a string");
相当于在script中调用了语句download("I am a string");即调用了函数download();
2. 两大问题:
1. 在需要的时候才加载数据
2. 能否因为除.js以外的其他路径
window.onload = function(){ var oBtn = document.getElementById("btn1"); oBtn.onclick = function(){ var oScript = document.createElement("script"); oScript.src = "demo.js"; document.head.appendChild(oScript); } }
4. 【注】对于计算机而言,文件后缀没有任何作用
文件后缀作用:用于给计算机中的中间快速识别该用哪个软件打开这个文件
在该案例中,只要所需导入的文件的后缀与文件的真实后缀相同即可成功调用。
5. JSONP跨域的使用流程(作者定义):
1. 先声明一个函数,这个函数有一个形参;
2. 在需要下载数据的地方,动态添加script标签,将标签的src属性设置成被下载数据文件的连接;
3. 当script插入到页面上的时候,就会调用已经封装好的函数,将我们所需要的数据传过来。
[C] 练习
1. 天气查询
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> .box{ 1200px; border: solid black 1px} .rowin{ border: solid red 1px; height: 30px; text-align: center; line-height: 30px;} </style> <script> function download(res){ var oT1 = document.getElementById("t1"); var oInfor = document.getElementById("infor"); oInfor.innerHTML = `城市:${res.city},PM2.5:${res.pm25},日期:${res.date}`; var we = res.weather; var showContent =``; for(var i = 0; i < we.length; i++){ var showContent = showContent + ` <tr> <td>${we[i].date}</td> <td>${we[i].weather}</td> <td>${we[i].wind}</td> <td>${we[i].temp}</td> </tr> `; } oT1.innerHTML = showContent; } </script> <!-- <script>调用位置</script> --> <script id="callFun"> /* 天气查询: */ window.onload = function(){ var oSearch = document.getElementById("search"); var location = document.getElementById("callFun"); var oCity = document.getElementById("cityName"); oSearch.onclick = function(){ if(!oCity.value){ alert("请输入需要查询的城市!"); }else{ var oScript = document.createElement("script"); oScript.src = `https://api.asilu.com/weather/?city=${oCity.value}&callback=download`; document.head.insertBefore(oScript, location); } } } </script> </head> <body> <div class="container box"> <div class="panel panel-primary"> <div class="panel-heading"> <h2>天气查询 <span id="infor"></span> </h2> </div> <div class="panel-body"> <div class="form-group"> <label for = "city">城市名称:</label> <input type="text" class="form-control" id="cityName"> <button class="btn btn-primary form-control" id="search">确定</button> </div> </div> <div class="panel-footer"> <table class="table table-bordered table-hover"> <thead> <tr> <td>日期</td> <td>天气</td> <td>风向</td> <td>气温</td> </tr> </thead> <tfoot id="t1"></tfoot> </table> </div> </div> </div> </body> </html>
2. 百度搜索框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0px; padding: 0px;} #box{ 800px; height: 600px; border: black solid 3px; margin: 50px auto;} #ins{ 300px; height: 50px; border: solid 1px; margin-top:100px; margin-left: 250px; display: block; font-size: 30px;} #list{ margin-left: 250px; list-style: none;font-size: 30px;} #list li{ 300px;} #list li:hover{ background-color: blanchedalmond;} </style> <script> function show(res){ var oS = res.s; var oList = document.getElementById("list"); oList.innerHTML = ""; oList.style.display = "block"; var Content = ``; for(var i = 0; i < oS.length; i++){ var newLi = document.createElement("li"); var oA = document.createElement("a"); oA.innerHTML = oS[i]; oA.href = `http://www.baidu.com/s?wd=` + oS[i]; oA.target = "_blank"; newLi.appendChild(oA); oList.appendChild(newLi); } } </script> <script id="callFun"> window.onload = function(){ var oIns = document.getElementById("ins"); var location = document.getElementById("callFun"); var oList = document.getElementById("list"); oIns.onkeyup = function(){ var oValue = ins.value; if(!oValue){ oList.style.display = "none"; }else{ var oScript = document.createElement("script"); oScript.src = `http://suggestion.baidu.com/su?wd=${oValue}&cb=show`; document.head.insertBefore(oScript, location); } } } </script> </head> <body> <div id="box"> <input type="text" id="ins"> <ul id="list"></ul> </div> </body> </html>