忽然寫自己的一個天氣預報，首先不知如何下手，首先想到的是不是講script連結引入到檔案頭部就可以了，然而接下來又要怎麼做？
在經過了半天的網上搜索後，明白了要寫的流程，
①。找到合適得介面。

在網上搜索說中國氣象局提供了三個介面
國家氣象局提供的天氣預報介面

介面地址：

101010100為城市程式碼，是固定的，這裡表示北京。然而並沒有什麼用，前兩個可以訪問，但是返回的資料太少了，最後一個說是最新的介面，資料比較多，但是我訪問的卻是403.

②。使用ajax非同步請求來獲取資料。
在這裡我使用了jquery的ajax來請求資料。success的function中的引數為請求到的資料，只需要進行第三步解析即可。

var url = "http://wthrcdn.etouch.cn/weather_mini?citykey=101071201";
        $.ajax({
          url: url,
          dataType: "jsonp",
          // scriptCharset: "gbk",
          method:'GET',
          crossDomain: true,
         success: function (data) {

     //請求無誤，但是資料有誤，desc為介面返回的資料中的一部分，往下看
              if
 
(desc != "ok"){
            alert("請求地區有誤");
        }
        //
        //這兒寫上正常處理的流程

        var description = "";
            for(var i in data.data){
                var property=data.data[i];
                description+=i+" = "+property+"\n";
            }
            alert(description);
         }
         error:function
 
(){
        console.log("請求失敗");
    }

③ 對介面返回的資料進行處理
返回的資料格式

{
“desc”: “OK”,
“status”: 1000,
“data”: {
“wendu”: “22”,
“ganmao”: “各項氣象條件適宜，無明顯降溫過程，發生感冒機率較低。”,
“forecast”:
[{
“fengxiang”: “南風”,
“fengli”: “3-4級”,
“high”: “高溫 26℃”,
“type”: “多雲”,
“low”: “低溫 13℃”,
“date”: “28日星期四”
},
{
“fengxiang”: “無持續風向”,
“fengli”: “微風級”,
“high”: “高溫 28℃”,
“type”: “多雲”,
“low”: “低溫 15℃”,
“date”: “29日星期五”
},
{
“fengxiang”: “無持續風向”,
“fengli”: “微風級”,
“high”: “高溫 31℃”,
“type”: “晴”,
“low”: “低溫 15℃”,
“date”: “30日星期六”
},
{
“fengxiang”: “無持續風向”,
“fengli”: “微風級”,
“high”: “高溫 29℃”,
“type”: “多雲”,
“low”: “低溫 20℃”,
“date”: “1日星期天”
},
{
“fengxiang”: “北風”,
“fengli”: “4-5級”,
“high”: “高溫 26℃”,
“type”: “小到中雨”,
“low”: “低溫 13℃”,
“date”: “2日星期一”
}],
“yesterday”: {
“fl”: “微風”,
“fx”: “無持續風向”,
“high”: “高溫 19℃”,
“type”: “小雨”,
“low”: “低溫 12℃”,
“date”: “27日星期三”
},
“aqi”: “118”,
“city”: “朝陽縣”
}
}

這是一個json格式的返回串，在js中只要將你所需要的資料解析出來就好了，
JavaScript程式碼：

 var url = "http://wthrcdn.etouch.cn/weather_mini?citykey=101071201";
        $.ajax({
          url: url,
          dataType: "jsonp",
          // scriptCharset: "gbk",
          method:'GET',
          crossDomain: true,
          success: function (data) {
              if(desc != "ok"){
            alert("請求地區有誤");
        }
        //
        //這兒寫上正常處理的流程
         }
         error:function(){
        console.log("請求失敗");
    }

經過以上三步，一個請求天氣預報介面的流程是出來了，頁面佈局及其裡面的資料處理還需要花費更多的時間。

注：儘量使用火狐瀏覽器，因為後續ajax的非同步載入中需要web容器，火狐瀏覽器自帶web容器。所以不需要你去再開啟本地的伺服器。

或許我們發現以上的資料並不滿足我們的需要，所以下一節給大家推薦一個數據更詳細的介面。