2020.9.18AJAX概念及天气预报案例_ajax 根据用户在 jsp 选择的城市,城市名传到后端,通过后端天气预报接口 xml 解析-CSDN博客

本文链接：https://blog.csdn.net/weixin_46669997/article/details/108811311

本文介绍了AJAX的基本概念，它允许在不完全刷新页面的情况下实现异步更新。AJAX操作包括创建异步请求对象，向服务器发送请求，利用XMLHttpRequest对象的open()和send()方法，并接收服务器响应。此外，还讨论了DOM和AJAX结合的天气预报案例。

摘要由CSDN通过智能技术生成

AJAX异步交互:

01_什么是AJAX？

AJAX = 异步 JavaScript 和 XML。

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

02_AJAX操作步骤：

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

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天气预报案例

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>天知道</title>
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/index.css" />
</head>

<body οnkeypress="key(event)">
	<div class="wrap" id="app">
		<div class="search_form">
			<div class="logo"><img src="img/logo.png" alt="logo" /></div>
			<div class="form_group">
				<input type="text" id="city" name="mycity" value="" class="input_txt" placeholder="请输入查询的天气" />
				<button class="input_sub" οnclick="sendAjax() "  id="kypad">
					搜 索
				</button>
			</div>
			<div class="hotkey">
				<a href="javascript:;" οnclick="Peking()" id="BJ">北京</a>
				<a href="javascript:;" οnclick="shangHai()" id="SH">上海</a>
				<a href="javascript:;" οnclick="GuangZhou()" id="GZ">广州</a>
				<a href="javascript:;" οnclick="ShengZhen()" id="SZ">深圳</a>
			</div>
		</div>
		<ul class="weather_list" id="myUL">

		</ul>

	</div>

</body>
</html>

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