原生js、Ajax编写一个天气预报，搜索查询

今天分享的是Ajax，使用Ajax的步骤：
1、创建对象
2、创建请求
3、发送请求参数
4、接收响应
接下来是准备工作，可以搜索高德地图开放平台-Web服务API-天气查询。
天气查询是一个简单的HTTP接口，根据用户输入的adcode，查询目标区域当前/未来的天气情况。
使用API前您需先申请Key，若无高德地图API账号需要先申请账号。

里面有请求方式和参数，key是要自己申请的

好的，到这里就开始上代码了咯

HTML：

	
		
		
		
	
	
		
		查询
		

		

			

			

			

			

			

		

<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>

效果图：