数据大屏显示天气情况，获取实时的天气信息(js进行异步请求获取响应的内容)

话不多说，直接看效果：

一个基本的数据大屏，一般都是要展示时间信息，这不必多说，大家都会。
但是实时的天气数据我们怎么显示呢？

权威的就是中央气象台的数据，那我们该怎样拿到这个数据嘞？

得到所在城市的code值

通过链接http://www.nmc.cn/f/rest/province/后面跟上A+所在省份的名称缩写的大写
具体链接还是跟code有关，举个栗子——>>>
**全国省份的code值：

[
    {
        "code": "ABJ",
        "name": "北京市",
        "url": "/publish/forecast/ABJ.html"
    },
    {
        "code": "ATJ",
        "name": "天津市",
        "url": "/publish/forecast/ATJ.html"
    },
    {
        "code": "AHE",
        "name": "河北省",
        "url": "/publish/forecast/AHE.html"
    },
    {
        "code": "ASX",
        "name": "山西省",
        "url": "/publish/forecast/ASX.html"
    },
    {
        "code": "ANM",
        "name": "内蒙古自治区",
        "url": "/publish/forecast/ANM.html"
    },
    {
        "code": "ALN",
        "name": "辽宁省",
        "url": "/publish/forecast/ALN.html"
    },
    {
        "code": "AJL",
        "name": "吉林省",
        "url": "/publish/forecast/AJL.html"
    },
    {
        "code": "AHL",
        "name": "黑龙江省",
        "url": "/publish/forecast/AHL.html"
    },
    {
        "code": "ASH",
        "name": "上海市",
        "url": "/publish/forecast/ASH.html"
    },
    {
        "code": "AJS",
        "name": "江苏省",
        "url": "/publish/forecast/AJS.html"
    },
    {
        "code": "AZJ",
        "name": "浙江省",
        "url": "/publish/forecast/AZJ.html"
    },
    {
        "code": "AAH",
        "name": "安徽省",
        "url": "/publish/forecast/AAH.html"
    },
    {
        "code": "AFJ",
        "name": "福建省",
        "url": "/publish/forecast/AFJ.html"
    },
    {
        "code": "AJX",
        "name": "江西省",
        "url": "/publish/forecast/AJX.html"
    },
    {
        "code": "ASD",
        "name": "山东省",
        "url": "/publish/forecast/ASD.html"
    },
    {
        "code": "AHA",
        "name": "河南省",
        "url": "/publish/forecast/AHA.html"
    },
    {
        "code": "AHB",
        "name": "湖北省",
        "url": "/publish/forecast/AHB.html"
    },
    {
        "code": "AHN",
        "name": "湖南省",
        "url": "/publish/forecast/AHN.html"
    },
    {
        "code": "AGD",
        "name": "广东省",
        "url": "/publish/forecast/AGD.html"
    },
    {
        "code": "AGX",
        "name": "广西壮族自治区",
        "url": "/publish/forecast/AGX.html"
    },
    {
        "code": "AHI",
        "name": "海南省",
        "url": "/publish/forecast/AHI.html"
    },
    {
        "code": "ACQ",
        "name": "重庆市",
        "url": "/publish/forecast/ACQ.html"
    },
    {
        "code": "ASC",
        "name": "四川省",
        "url": "/publish/forecast/ASC.html"
    },
    {
        "code": "AGZ",
        "name": "贵州省",
        "url": "/publish/forecast/AGZ.html"
    },
    {
        "code": "AYN",
        "name": "云南省",
        "url": "/publish/forecast/AYN.html"
    },
    {
        "code": "AXZ",
        "name": "西藏自治区",
        "url": "/publish/forecast/AXZ.html"
    },
    {
        "code": "ASN",
        "name": "陕西省",
        "url": "/publish/forecast/ASN.html"
    },
    {
        "code": "AGS",
        "name": "甘肃省",
        "url": "/publish/forecast/AGS.html"
    },
    {
        "code": "AQH",
        "name": "青海省",
        "url": "/publish/forecast/AQH.html"
    },
    {
        "code": "ANX",
        "name": "宁夏回族自治区",
        "url": "/publish/forecast/ANX.html"
    },
    {
        "code": "AXJ",
        "name": "新疆维吾尔自治区",
        "url": "/publish/forecast/AXJ.html"
    },
    {
        "code": "AXG",
        "name": "香港特别行政区",
        "url": "/publish/forecast/AXG.html"
    },
    {
        "code": "AAM",
        "name": "澳门特别行政区",
        "url": "/publish/forecast/AAM.html"
    },
    {
        "code": "ATW",
        "name": "台湾省",
        "url": "/publish/forecast/ATW.html"
    }
]

然后呢，我们根据http://www.nmc.cn/f/rest/province/ASH
就能得到上海市各个区的code了:

[
    {
        "code": "58367",
        "province": "上海市",
        "city": "徐家汇",
        "url": "/publish/forecast/ASH/xujiahui.html"
    },
    {
        "code": "58362",
        "province": "上海市",
        "city": "宝山",
        "url": "/publish/forecast/ASH/baoshan.html"
    },
    {
        "code": "58366",
        "province": "上海市",
        "city": "崇明",
        "url": "/publish/forecast/ASH/chongming.html"
    },
    {
        "code": "58463",
        "province": "上海市",
        "city": "奉贤",
        "url": "/publish/forecast/ASH/fengxian.html"
    },
    {
        "code": "58365",
        "province": "上海市",
        "city": "嘉定",
        "url": "/publish/forecast/ASH/jiading.html"
    },
    {
        "code": "58460",
        "province": "上海市",
        "city": "金山",
        "url": "/publish/forecast/ASH/jinshan.html"
    },
    {
        "code": "58369",
        "province": "上海市",
        "city": "南汇",
        "url": "/publish/forecast/ASH/nanhui.html"
    },
    {
        "code": "58370",
        "province": "上海市",
        "city": "浦东",
        "url": "/publish/forecast/ASH/pudong.html"
    },
    {
        "code": "58461",
        "province": "上海市",
        "city": "青浦",
        "url": "/publish/forecast/ASH/qingpu.html"
    },
    {
        "code": "58462",
        "province": "上海市",
        "city": "松江",
        "url": "/publish/forecast/ASH/songjiang.html"
    },
    {
        "code": "58361",
        "province": "上海市",
        "city": "闵行",
        "url": "/publish/forecast/ASH/minxing.html"
    }
]

获取当前区域的天气趋势（多日天气信息）：

获取浦东的天气情况：http://www.nmc.cn/rest/weather?stationid=58365

仅获取当天的天气信息

浦东当日天气信息http://www.nmc.cn/f/rest/real/58370
这样获取的信息十分精简：

{
    "station": {
        "code": "58370",
        "province": "上海市",
        "city": "浦东",
        "url": "/publish/forecast/ASH/pudong.html"
    },
    "publish_time": "2022-08-03 10:50",
    "weather": {
        "temperature": 32.9,
        "temperatureDiff": -1.6,
        "airpressure": 9999,
        "humidity": 64,
        "rain": 0,
        "rcomfort": 79,
        "icomfort": 2,
        "info": "晴",
        "img": "0",
        "feelst": 31.8
    },
    "wind": {
        "direct": "东南风",
        "degree": 164,
        "power": "微风",
        "speed": 2.3
    },
    "warn": {
        "alert": "9999",
        "pic": "9999",
        "province": "9999",
        "city": "9999",
        "url": "9999",
        "issuecontent": "9999",
        "fmeans": "9999",
        "signaltype": "9999",
        "signallevel": "9999",
        "pic2": "9999"
    }
}

项目内使用链接获取信息

js进行异步请求获取响应的内容——>>>
首先创建 XMLHttpRequest 对象：
XMLHttpRequest 用于在后台与服务器交换数据。

	//获取天气信息
    getWeather() {
      let xmlHttpReg = null;
      if (window.ActiveXObject) {
        xmlHttpReg = new ActiveXObject('Microsoft.XMLHTTP');
      } else if (window.XMLHttpRequest) {
        xmlHttpReg = new XMLHttpRequest();
      }
      if (xmlHttpReg != null) {
        xmlHttpReg.open('get', 'http://www.nmc.cn/rest/weather?stationid=58370', true);
        xmlHttpReg.responseType = 'json';
        xmlHttpReg.onload = () => {
          //xmlHttpReg.response对象里面就是请求链接后响应的内容，对响应信息处理成我们想要的数据形式放页面内
          let res = xmlHttpReg.response.data.predict.detail[0];
          let str1 = res.night.weather.temperature + '~' + res.day.weather.temperature + '℃';
          let str2 = res.night.weather.info == res.day.weather.info ? res.night.weather.info : res.night.weather.info + '转' + res.day.weather.info;
          let str3 = '空气：' + xmlHttpReg.response.data.air.text;
          this.weatherData = str1 + ' ' + str2 + ' ' + str3;
        };
        //这个是一定要加的，否则页面不会有this.weatherData的数据
        xmlHttpReg.send();
      }
    },