2020.9.18AJAX概念及天气预报案例

AJAX异步交互:

01_什么是AJAX？

AJAX = 异步 JavaScript 和 XML。

也就是可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

02_AJAX操作步骤：

1. 异步和同步：客户端和服务器端相互通信的基础上
   • 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
     • 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

1.创建异步请求对象

var xmlhttp;
	if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	}

2.向服务器发送请求

xmlhttp.open("GET", "https://autumnfish.cn/api/joke/list?num=10", true);
	//发送请求
	xmlhttp.send();

3.如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

4.服务器响应

xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			//document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
			//接收后台响应的JSON字符串
			var jsonStr=xmlhttp.responseText;
			alert(jsonStr);
			var jsonObj=JSON.parse(jsonStr);
			alert(jsonObj.msg);
			
		}
	}

02_DOM及AJAX天气预报案例

	
	
	
	
	
	



	

		

			

			

				
				
					搜 索
				
			
			

				北京
				上海
				广州
				深圳
			
		
		


		

	

<script type="text/javascript">
	//创建Ajax请求对象
	var xmlhttp = new XMLHttpRequest();
function sendAjax() {
    
	//发送Ajax请求
	//alert("发送请求");
	var cityName = document.getElementById("city").value;
	//alert(cityName);
	if