JSONP解决跨域问题

1. 跨域
   当前地址与调用的接口不同源时，会跨域。

2. 同源策略
   ① 协议、域名、端口号一致视为同源
   ② 网络请求时，只能访问同源的接口，这样是为了安全，以不至于别人能随便访问自己的私有数据

3. JSONP解决跨域问题
   如果我们想使用一些网上公用的API（比如：获取天气API），就不得不跨域。
   原理：利用script标签上的src属性没有跨域的问题

4. 案例

   <input type="text" placeholder="城市" id="city">
   <button id="btn">获取天气信息</button>
   

   function getWeather(data) {
   	console.log(data); // 最终获取的数据
   	// 可以进行后续操作处理数据
   }
   let oCity = document.getElementById('city');
   let oBtn = document.getElementById('btn');
   oBtn.onclick = function () {
   	let oScript = document.createElement('script');
   	oScript.src = `https://query.asilu.com/weather/baidu?city=${oCity.value}&callback=getWeather`;   // 回调函数的函数名可以自定义，但需与上方的函数名保持一致
   	document.body.appendChild(oScript);
   }
   

   接口返回的是回调函数调用的格式，将script标签插入到body中时，就会调用getWeather方法，将天气信息通过参数传入。
   

   页面效果