本次要做的案例的是使用jsonp製作乙個查詢天氣情況的網頁，我會從如何抓取資料介面，到一步一步完成這個案例來詳細講解。
當然我們不可能自己建氣象站，我們只有通過網際網路拿到別人「分享」給我們的資料介面，然後通過這個資料介面獲取全國的氣象資料。這樣我們就必須使用jsonp了，因為提供氣象資料服務的api，其所在的網域名稱肯定跟我們自己的應用程式不是乙個網域名稱。
那麼問題來了，我們如何知道**有api提供氣象資料服務的？這個就要多觀察多積累了。比如現在很多人的電腦上都會安裝360，一般360防毒在安裝時候會篡改你的瀏覽器主頁為「hao360」這個**，那麼你開啟網頁，每次都會看到這樣的畫面。
這個**在非常顯眼的地方提供了乙個檢視天氣的模組。難道360還開著氣象站？如果不是，那我們只要看看它是如何搞到資料的，我們就能如法炮製了。
一般你可以這樣做：
1.在氣象模組上點滑鼠右鍵->審查元素。去看看他的結構
2.開啟開發者選項工具視窗，點選network（網路）選項卡，然後去檢視請求報文，這樣就能找到氣象資料從哪兒來了。
不過，如果你沒有經驗，你會被請求報文列表中的資料給嚇住，因為實在是太多了，至少不下300條請求項。那我們怎麼去找真正需要的那個請求呢？
試想，這個hao360也不可能自己弄個氣象站，所以它必然也是抓取的第三方api，所以也必然是通過jsonp的形式來實現的。那麼我們只需要在所有的請求報文中按type這一列排下序，然後就只管看請求型別是script的那些項。這樣一下就把範圍縮小了很多很多。
簡單說明下這個url的引數
2._jsonp：你自己定義的**函式的名字。
3.其他的引數都無關緊要，至少對本案例來說是這樣。
當然，我只擷取了一小部分。不過已經可以看出了，這是乙個典型的jsonp跨域訪問。
然後，我把資料copy出來，貼到sublime中，格式化之後，資料是這個樣子的。
1簡單解釋下資料：17},
24},
31},
38},
45}]，
46。。。。。。
47 }
1.這裡只擷取了資料的一部分，只保留了我們案例中需要用到的那一小部分，感興趣的自己去研究吧。
2.顯然，這個資料是js中的，json格式資料。
3.本案例中用到的氣象資料，是在這個json物件的「weather」屬性中。這個屬性的值是乙個js陣列，陣列一共有5個元素，每個元素又是乙個json物件，每個json物件都代表了一天的天氣情況。
先看下頁面的html結構
>天氣預報-hao360介面
title
>
<
link
rel="stylesheet"
href
="css/weather.css"
>
head
>
<
body
>
<
div
class
="wt_container"
>
<
div
class
="city"
>
<
select
id="selcity"
>
<
option
value
="101180201"
>大安陽
option
>
<
option
value
="101010100"
>北京
option
>
<
option
value
="101180101"
>鄭州
option
>
<
option
value
="101250101"
>長沙
option
>
<
option
value
="101050101"
>哈爾濱
option
>
<
option
value
="101130101"
>烏魯木齊
option
>
<
option
value
="101280101"
>廣州
option
>
select
>
<
button
id="btn"
>檢視天氣
button
>
div>
<
div
class
="weather"
>
<
ul id
="wtinfo"
>
ul>
div>
div>
body
>
html
>
2.由於我們拿到的資料是5天的資料，所以我們用乙個標籤來展示所有的查詢到的5天的天氣，每天的天氣用乙個li包住。html中注釋掉的部分就是模擬資料。
我們在js部分，只需要通過jsonp請求道資料，然後按照模擬資料的格式，填充到ul裡就行了。
直接看**
12**解釋：
1.這用到了jquery，所以第1行**先引入了jquery包
2.jsonp的原理是通過
jsonp形式的ajax請求
sonp形式的ajax請求 並且通過get請求的方式傳入引數,注意 跨域請求是只能是get請求不能使用post請求 jsonp 傳遞給請求處理程式或頁面的，用以獲得jsonp 函式名的引數名 預設為 callback jsonpcallback 自定義的jsonp 函式名稱，預設為jquery自動生...
ajax工作原理，Jsonp原理
ajax工作原理是 相當於在使用者和伺服器之間加了 個中間層 ajax引擎 使使用者操作與伺服器響應非同步化。對於使用者請求ajax引擎會做一些資料驗證和資料處理，不是所有請求都提交給伺服器，當需要從伺服器讀取新資料時由ajax引擎代為向伺服器提交請求。ajax最大優點就是不重新整理整個頁面的前提下...
jsonp解決ajax跨域問題
利用jsonp解決ajax跨域問題 至於success裡面的操作可以忽略 某工程下ajax請求 var isvisible true function getlog var startpage data.startpage var endpage data.endpage 拼接 導航 按鈕 和 資料...