下面和大家一起探讨JSONP的知识。首先，我们需要了解一下什么是JSONP？
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么要使用JSONP跨域请求？再去了解一下同源策略。
同源策略，简单来说能够满足同协议，同域名/IP，同端口号就是同源策略。它是由 Netscape 提出的一个安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。当发送方地址和接收方地址的传输协议，域名，端口号有一个不一样就是触发了同源策略。
解决同源策略问题，JSONP就可以大显身手了。
JSONP使用流程
1、先去声明一个函数，这个函数有一个形参，这个形参会拿到我们想要下载的数据，使用这个参数做后续数据的处理
2、在需要下载数据的时候，动态创建script标签，将标签src属性设置成，下载数据的链接
3、当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>
//声明函数，设置形参"data"
function download(data){
alert("下载的数据：" + data);
}
</script>
<script>
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);
}
}
</script>
</head>
<body>
<button id = 'btn1'>下载数据</button>
<!--
src 这个属性是可以完成跨源。
-->
<img src="http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg" alt=""/>
</body>
</html>
上面代码就能简单实现类似一个跨域请求的案例
接下来再写一个查询天气的案例。我们从 https://api.asilu.com 进行JSONP测试。
还是按照三步骤分析：
1、先封装一个函数，拿到我们想要下载的数据，使用这个参数做后续数据的处理。这里封装一个download函数。
2、动态创建script标签，把标签的src属性设置成要下载数据的链接
3、调用已经封装好的download函数，把数据传进来。
祥看代码注释一起学习：
<!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>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/buttons.css"/>
<script>
//封装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 += `<tr>
//获取日期
<td>${arr[i].date}</td>
//获取天气
<td>${arr[i].weather}</td>
//获取风向
<td>${arr[i].wind}</td>
//获取温度
<td>${arr[i].temp}</td>
</tr>`;
}
//把获取到的数据信息打印
oT1.innerHTML = str;
}
</script>
<script>
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);
}
}
}
</script>
</head>
<body>
<div class = 'container'>
<div class = 'panel panel-primary'>
<div class = 'panel-heading'>
<h2>天气查询
<span id = 'info'></span>
</h2>
</div>
<div class = 'panel-body'>
<div class = 'form-group'>
<label for = "city">城市名字：</label>
<input id = 'city' type="text" class = 'form-control'/>
</div>
<button id = 'search' class = 'button button-3d button-action button-pill form-control'>查询该城市天气</button>
</div>
<div class = 'panel-footer'>
<table class = 'table table-bordered table-hover'>
<thead>
<tr>
<th>日期</th>
<th>天气</th>
<th>风向</th>
<th>气温</th>
</tr>
</thead>
<tbody id = 't1'>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
查询一下青岛的天气，看一下效果图
JSONP的跨域，牢记三个步骤，轻松学会。
1、先去声明一个函数，这个函数有一个形参，这个形参会拿到我们想要下载的数据，使用这个参数做后续数据的处理
2、在需要下载数据的时候，动态创建script标签，将标签src属性设置成，下载数据的链接
3、当script插入到页面上的时候，就会，调用已经封装好的函数，将我们需要的数据传过来。
1903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
