014 Javascript(148 - 151)
[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{ width: 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{ width: 800px; height: 600px; border: black solid 3px; margin: 50px auto;}
#ins{ width: 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{ width: 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>
