掌握AJAX：异步数据交互的艺术-优快云博客

本文链接：https://blog.youkuaiyun.com/man_OR_boy/article/details/107987825

ajax

介绍：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

AJAX是前端向后台提交数据最重要的手段！也是构建前后端分离的核心技术！

作用：

不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。异步操作
ajax
运行原理

先创建一个ajax请求对象（XMLHttpRequest）
向指定的服务器发起HTTP请求
判断ajax对象状态，合适时机获取返回数据！
前端接收数据进行页面更新操作
基本使用
创建一个XMLHTTPRequest对象有两种方式

第一种大多数浏览器都支持的

var ajax = new XMLHttpRequest ();

第二种IE5 和 IE6 使用 ActiveXObject

IE5 和 IE6 使用 ActiveXObject

设置访问路径和方式

ajax向后台服务器发起请求！设置请求参数请求的方式以及请求的网络地址
ajax.open(“GET”，url) ；

发送请求：

设置好以后需要调用发送的方法

ajax.send();
监控Ajax的状态：

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

XMLHttpRequest对象的三个重要的属性：

onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中

status

200: “OK”

404: 未找到页面
ajax.onreadystatechange = function(){
			//验证状态
			if(ajax.status == 200 && ajax.readyState == 4){       
				 //接受数据
				var result = ajax.responseTest;
		}

练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				background-color: #A4D3F6;
			}
			#show{
				background-color: #6FBEF9;
				width: 70%;
				margin:60px auto;
				border: #6FBEF9 solid 2px;
			}
			#left{
				display: inline-block;
				width: 31%;;
				border-right:white solid 1px ;
			}
			.right{
				display: inline-block;
				width: 16%;
				border-right:white solid 1px ;
			}
			#left img{
				display: block;
			}
			#mess-left{
				display: inline-block;
			}
			#mess-right{
				display: inline-block;
			}
			#left-foot p{
				display: inline-block;
			}
			#top{
				padding: 20px;
			}
			#se{
				padding: 10px;
				display: inline-block;
				width: 40%;
				background-color: #A4D3F6;
				border: #6FBEF9 solid 1px;
				border-radius: 9px;
			}
			#bu{
				padding: 10px;
				display: inline-block;
				width: 10%;
				background-color: #A4D3F6;
				border: #6FBEF9 solid 1px;
				border-radius: 9px;
			}
			#h1{
				font-size: 50px;
				text-shadow: 6px 6px 10px blue ;
			}
		</style>
	</head>
	<body>
		<center>
		<h1 id="h1" >天    气     预    报</h1>
		</center>
		<div id="show">
			<div id="top">
				<center>
					<div id="select">
						<input type="text" id="se" placeholder="请输入城市" />
						<button id="bu" onclick="select()">查询</button>
					</div>
		
				</center>
			</div>
			<hr />
			<div id="left">
				<center>
				<img id= "left-image" src="" />
				<p id="mess-left">24</p>
				<div id="mess-right">
					<sup>℃</sup><sub id="mess-type"></sub>
				</div>
				
				<div id="left-foot">
					<p id="pyHL" ></p><br />
					<p id="pyTY"></p><br />
					<p id="pyFen"></p>
				</div>
				
				</center>
			</div>
			<div class="right">
				<center>
				<p id="p1" >周五</p>
				<img id="image1" src="" />
				
				<div id="left-foot">
					<p id="p1-1" ></p><br />
					<p id="p1-2" ></p><br />
					<p id="p1-3" ></p>
				</div>
				
				</center>
			</div>
			<div class="right">
				<center>
				<p id="p2" >周六</p>
				<img id="image2" src="" />
				
				<div id="left-foot">
					<p id="p2-1" ></p><br />
					<p id="p2-2" ></p><br />
					<p id="p2-3" ></p>
				</div>
				
				</center>
			</div>
			<div class="right">
				<center>
				<p id="p3" >周日</p>
				<img id="image3" src="" />
				
				<div id="left-foot">
					<p id="p3-1" ></p><br />
					<p id="p3-2" ></p><br />
					<p id="p3-3" ></p>
				</div>
				
				</center>
			</div>
			<div class="right" style="border: none;" >
				<center>
				<p id="p4" >周一	</p>
				<img id="image4" src="" />
				
				<div id="left-foot" >
					<p id="p4-1" ></p><br />
					<p id="p4-2" ></p><br />
					<p id="p4-3" ></p>
				</div>
				
				</center>
			</div>
			
			
			
		</div>
		
		<script type="text/javascript">
			var inp = document.getElementById("se");
			
			var ajax = new XMLHttpRequest();
			
			function select(){
				var sName = inp.value;
				
				var lujing = "http://wthrcdn.etouch.cn/weather_mini?ak=1233124124&city=" + sName ;
				ajax.open("GET" , lujing);
				
				ajax.send();
				var result ;
				
				ajax.onreadystatechange = function(){
					if(ajax.status == 200 && ajax.readyState == 4){
						result = ajax.responseText;
					
					
					if(result != "undefined"){
						var obj = JSON.parse(result);
					}else {
						alert(result);
					}
						
					var res = [] ;
					res = obj.data.forecast ;
						
						
						//昨天的天气
						var yHLIp = document.getElementById("pyHL");
						var yTyIp = document.getElementById("pyTY");
						var yFIp = document.getElementById("pyFen");
						var ylIp = document.getElementById("mess-left");
						var ytyIp = document.getElementById("mess-type");
						var yliIp =document.getElementById("left-image");
						
						var dateV = obj.data.yesterday.date;
						var hv = obj.data.yesterday.high;
						var lv =obj.data.yesterday.low ;
						var tv =obj.data.yesterday.type;
						var fv =obj.data.yesterday.fx;
						
						
						
						var hl = hv.substring(2,5) + "~" + lv.substring(2 , 5) +"<sup>℃</sup>" ;
						
						
						yHLIp.innerHTML = hl ;
						yTyIp.innerText = tv ;
						ytyIp.innerText = tv + "(实时)";
						yFIp.innerText = fv ;
						ylIp.innerText = lv.substring(2 , 5) ;
						yliIp.setAttribute("src" , "img/"+tv +".jpg");
						
						
						
						
						//接下来的天气
							for(var i = 0 ; i < res.length-1 ; i++){
							
							var dateIp = "p" + (i+1);
							var highLowIp = dateIp + "-1" ;
							var typeIp = dateIp + "-2";
							var fenIp = dateIp + "-3";
							var imIp = "image" + (i+1);
							
							var p1 = document.getElementById(dateIp) ;
							var p1HighLow = document.getElementById(highLowIp);
							var p1Type = document.getElementById(typeIp);
							var p1Fen = document.getElementById(fenIp);
							var p1Image = document.getElementById(imIp);
						
							var dateValue = res[i].date ;
							var highValue = res[i].high;
							var lowValue = res[i].low ;
							var typeValue = res[i].type;
							var fenValue = res[i].fengxiang;
							
							p1Image.setAttribute("src" , "img/"+typeValue +".jpg");
							
							highLow = highValue.substring(2,5) + "~" + lowValue.substring(2 , 5)+"<sup>℃</sup>";
							
							p1.innerText = dateValue ;
							p1HighLow.innerHTML = highLow ;
							p1Type.innerHTML = typeValue ;
							p1Fen.innerText = fenValue ;
						
						}
					}
				}
				
				
				
			}
			
			
		</script>
		
	</body>
</html>



<!--{"data":
	{"yesterday":{"date":"6日星期四","high":"高温 29℃","fx":"东风","low":"低温 23℃","fl":"<![CDATA[3级]]>","type":"中雨"},
		"city":"焦作",
		"forecast":[
		{"date":"7日星期五","high":"高温 29℃","fengli":"<![CDATA[2级]]>","low":"低温 23℃","fengxiang":"东南风","type":"中雨"},
		{"date":"8日星期六","high":"高温 28℃","fengli":"<![CDATA[1级]]>","low":"低温 23℃","fengxiang":"东南风","type":"小雨"},
		{"date":"9日星期天","high":"高温 32℃","fengli":"<![CDATA[1级]]>","low":"低温 25℃","fengxiang":"东南风","type":"小雨"},
		{"date":"10日星期一","high":"高温 34℃","fengli":"<![CDATA[2级]]>","low":"低温 26℃","fengxiang":"南风","type":"多云"},
		{"date":"11日星期二","high":"高温 31℃","fengli":"<![CDATA[3级]]>","low":"低温 25℃","fengxiang":"东风","type":"小雨"}],
		"ganmao":"感冒低发期，天气舒适，请注意多吃蔬菜水果，多喝水哦。","wendu":"26"},
		"status":1000,"desc":"OK"}-->
			
<!--		
			data.yesterday.date
			data.yesterday.high
			data.yesterday.low 
			data.yesterday.type
			data.yesterday.fx-->