今天分享的是Ajax，使用Ajax的步骤：
1、创建对象
2、创建请求
3、发送请求参数
4、接收响应
接下来是准备工作，可以搜索高德地图开放平台-Web服务API-天气查询。
天气查询是一个简单的HTTP接口，根据用户输入的adcode，查询目标区域当前/未来的天气情况。
使用API前您需先申请Key，若无高德地图API账号需要先申请账号。
里面有请求方式和参数，key是要自己申请的
好的，到这里就开始上代码了咯
HTML：
<html>
<head>
<meta charset="UTF-8">
<title>天气预报</title>
<style>
.warp{background: #6495ED;width: 150px;}
</style>
</head>
<body>
<input placeholder="请输入要查询的城市"/>
<button id="btn">查询</button>
<p id="city"></p>
<div class="warp">
<p class="day"></p>
<p id="week"></p>
<p id="temp"></p>
<p id="weather"></p>
<p id="wind"></p>
</div>
<script>
var inputBox=document.getElementsByTagName("input");
var btn=document.getElementById("button");
var city=document.getElementById("city");
var day=document.getElementsByClassName("day");
var week=document.getElementById("week");
var temp=document.getElementById("temp");
var weather=document.getElementById("weather");
var wind=document.getElementById("wind");
btn.onclick=function(){
city.innerHTML=inputBox.value+"明日天气 : ";
}
window.onload=function(){
var xml=new XMLHttpRequest();
xml.open("get","https://restapi.amap.com/v3/weather/weatherInfo?key=这里填写你申请的key的值&city=inputBox.value&extensions=all",true);
xml.send(null);
xml.onreadystatechange=function(){
if(xml.readyState==4&&xml.status==200){
var data=JSON.parse(xml.responseText);
console.log(data);
city.innerHTML=data.forecasts[0].city+"明日天气 : ";
day[0].innerHTML=data.forecasts[0].casts[1].date;
week.innerHTML="星期"+data.forecasts[0].casts[1].week;
temp.innerHTML=data.forecasts[0].casts[1].nighttemp+"°C~"+data.forecasts[0].casts[1].daytemp+"°C";
if(data.forecasts[0].casts[1].dayweather==data.forecasts[0].casts[1].nightweather){
weather.innerHTML=data.forecasts[0].casts[1].dayweather;
}else{
weather.innerHTML=data.forecasts[0].casts[1].dayweather+"转"+data.forecasts[0].casts[1].nightweather;
}
wind.innerHTML=data.forecasts[0].casts[1].daywind+"风"+data.forecasts[0].casts[1].daypower+"级";
}
}
}
</script>
效果图：
