JSONP以及端口
跨域的方式有多種今天我呢，給大家帶來的是JSONP接口的操作和接口
JSONP的接口到處都有
今天先拿BOOS直聘的來給大家演示一遍吧
首先找到boss官網：https://www.zhipin.com/
步驟一：然後打開控制臺找到network面板；
步驟二：清空
步驟三：在搜索框內輸入一點文字，然後註意network面板
步驟四：找到xhr類型數據請求，當然不一定只是xhr，也有可能是script或其他
步驟五：點擊其中一個
步驟六：找到 request url 後面的地址
拿到這個接口你就得去嘗試慢慢得刪掉點東西，看能不能更精簡，這樣你會看得更舒服；使用起來也是更加得如魚得水，而後你要測試他是不是JSONP格式的
先說說JSONP是怎麽產生的：
1、一個眾所周知的問題，Ajax直接請求普通文件存在跨域無權限訪問的問題，甭管你是靜態頁面、動態網頁、web服務、WCF，只要是跨域請求，一律不準；
2、不過我們又發現，Web頁面上調用js文件時則不受是否跨域的影響（不僅如此，我們還發現凡是擁有"src"這個屬性的標簽都擁有跨域的能力，比如<script>、<img>）；
3、於是可以判斷，當前階段如果想通過純web端（ActiveX控件、服務端代理、屬於未來的HTML5之Websocket等方式不算）跨域訪問數據就只有一種可能，那就是在遠程服務器上設法把數據裝進js格式的文件裏，供客戶端調用和進一步處理；
4、恰巧我們已經知道有一種叫做JSON的純字符數據格式可以簡潔的描述復雜數據，更妙的是JSON還被js原生支持，所以在客戶端幾乎可以隨心所欲的處理這種格式的數據；
5、這樣子解決方案就呼之欲出了，web客戶端通過與調用腳本一模一樣的方式，來調用跨域服務器上動態生成的js格式文件（一般以JSON為後綴），顯而易見，服務器之所以要動態生成JSON文件，目的就在於把客戶端需要的數據裝入進去。
6、客戶端在對JSON文件調用成功之後，也就獲得了自己所需的數據，剩下的就是按照自己需求進行處理和展現了，這種獲取遠程數據的方式看起來非常像AJAX，但其實並不一樣。
7、為了便於客戶端使用數據，逐漸形成了一種非正式傳輸協議，人們把它稱作JSONP，該協議的一個要點就是允許用戶傳遞一個callback參數給服務端
扯了這麽多，再來點實際的吧
以下案例是剛剛隨便找的幾個做得玩一玩
這個是百度天氣接口
CSS
<style>
div{
width: 900px;
margin: 0 auto;
background-color: skyblue;
padding: 50px 0;
text-align: center;
}
table{
border-collapse: collapse;
width: 800px;
margin: 0 auto;
}
thead tr{
background-color: #ccc;
}
input{
width: 796px;
height: 30px;
display: block;
margin: 0 auto;
outline: none;
font-size: 14px;
}
tbody td{
text-align: center;
}
</style>
HTML
<div> <h1>天氣預報查詢</h1> <input type="text" name="" id="" value="" placeholder="輸入你要查詢的城市,按Enter執行.... "/> <table border="1"> <thead> <tr> <th>日期</th> <th>天氣</th> <th>風向</th> <th>溫度</th> </tr> </thead> <tbody> </tbody> </table> </div>
JavaScript
<script type="text/javascript">
var ipt = document.getElementsByTagName("input")[0];
var tbody = document.getElementsByTagName("tbody")[0];
ipt.onkeyup= function(event){
if(event.keyCode ===13){
// alert(ipt.value)
var script= document.createElement("script");
script.src="https://api.asilu.com/weather/?city="+ipt.value+"&callback=fn";
document.body.appendChild(script);
document.body.removeChild(script);
}
}
function fn(data){
var str = "";
for(var i=0;i<data.weather.length;i++){
str += "<tr> <td>"+data.weather[i].date+"</td> <td>"+data.weather[i].weather+"</td> <td>"+data.weather[i].wind+"</td> <td>"+data.weather[i].temp+"</td> </tr>";
}
tbody.innerHTML = str;
}
</script>
更多接口請看以下鏈接（控制臺裏面看字段詳細情況）：
天氣：http://www.lovemysoul.vip/API/API-TQ.html
IP查詢：http://www.lovemysoul.vip/API/API-IP.html
身份證查詢：http://www.lovemysoul.vip/API/API-SFZ.html
手機歸屬地：http://www.lovemysoul.vip/API/API-gsd.html
翻譯：http://www.lovemysoul.vip/API/API-FY.html
如若覺得本文有任何技術問題或是措辭問題各種問題都可以直接評論哦
JSONP以及端口