jsonp
下面和大家一起探讨JSONP的知识。首先，我们需要了解一下什么是JSONP？
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么要使用JSONP跨域请求？再去了解一下同源策略。
同源策略，简单来说能够满足同协议，同域名/IP，同端口号就是同源策略。它是由 Netscape 提出的一个安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。当发送方地址和接收方地址的传输协议，域名，端口号有一个不一样就是触发了同源策略。
解决同源策略问题，JSONP就可以大显身手了。
JSONP使用流程
1、先去声明一个函数，这个函数有一个形参，这个形参会拿到我们想要下载的数据，使用这个参数做后续数据的处理
2、在需要下载数据的时候，动态创建script标签，将标签src属性设置成，下载数据的链接
3、当script插入到页面上的时候，就会，调用已经封装好的函数，将我们需要的数据传过来。
Document
//声明函数，设置形参"data"
function download(data){
alert("下载的数据：" + data);
}
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
//动态创建script标签
var oScript = document.createElement("script");
/*'demo.txt'里的内容是:
download("I am String!");
调用download函数*/
oScript.src = 'demo.txt';
document.body.appendChild(oScript);
}
}
Document
//封装download函数
function download(data){
var oT1 = document.getElementById("t1");
var oInfo = document.getElementById("info");
//打印把城市和pm值
oInfo.innerHTML = `城市：${data.city}， pm2.5：${data.pm25}`;
//1、把天气情况取出
//看上图数据是存储在weather里的，在这里就将weather数据存储在一个数组里
var arr = data.weather;
//将数据拼接成字符串
var str = ``;
//使用循环遍历出weather数据
for(var i = 0; i < arr.length; i++){
str += `
//获取日期
${arr[i].date}
//获取天气
${arr[i].weather}
//获取风向
${arr[i].wind}
//获取温度
${arr[i].temp}
`;
}
//把获取到的数据信息打印
oT1.innerHTML = str;
}
window.onload = function(){
var oSearch = document.getElementById("search");
var oCity = document.getElementById("city");
oSearch.onclick = function(){
//判断没有输入城市名称，弹出提示框
if(!oCity.value){
alert("请输入城市名字");
}else{
//动态创建script标签
var oScript = document.createElement("script");
//将标签src属性设置成要下载数据的链接
//jsonp只能用get请求方式，需要拼接url
//?city=${oCity.value}： 要搜索的城市名字
//&callback=download：调用已经封装好的函数，将数据传进来。callback后面跟的是封装的函数名。
oScript.src = `https://api.asilu.com/weather/?city=${oCity.value}&callback=download`;
document.body.appendChild(oScript);
}
}
}
天气查询
查询一下青岛的天气，看一下效果图
JSONP的跨域，牢记三个步骤，轻松学会。
1、先去声明一个函数，这个函数有一个形参，这个形参会拿到我们想要下载的数据，使用这个参数做后续数据的处理
2、在需要下载数据的时候，动态创建script标签，将标签src属性设置成，下载数据的链接
3、当script插入到页面上的时候，就会，调用已经封装好的函数，将我们需要的数据传过来。
作者：跑起来的阿乒和阿乓
