JavaScript学习笔记：AJAX基础

最新推荐文章于 2021-07-24 18:12:04 发布

weixin_44765359

最新推荐文章于 2021-07-24 18:12:04 发布

阅读量129

点赞数

本文链接：https://blog.csdn.net/weixin_44765359/article/details/103468294

版权

JavaScript学习：AJAX基础

一.准备工作

1.Python案例：查询城市天气并绘制最高气温与最低气温折线图（https://blog.csdn.net/howard2005/article/details/102752640）
2.使用JSON Viewer直观查看JSON数据（https://blog.csdn.net/howard2005/article/details/103249627）
3、Java Web学习笔记13：AJAX基础
4、解决安装phpstudy_pro之后启动Apache失败的问题

任务1、安装phpstudy_pro并启动Apache服务
在这里插入图片描述

启动Apache服务器：

在浏览器里访问http://localhost/index.html：

任务2、下载并安装X，创建HBuilder项目
在这里插入图片描述
将下载的压缩包解压缩即可使用：

启动HBuilder：

新建项目HTML项目 - JavaScriptPractice：

在这里插入图片描述

配置外部web服务器调用url：http://localhost:80/JavaScriptPractice：

任务3、输入城市代码，返回城市天气预报信息
包含城市名、当天最高气温与最低气温、天气类型、年月日、星期几。

网络接口：http://t.weather.sojson.com/api/weather/city/
具体格式：http://t.weather.sojson.com/api/weather/city/101271001

其中，101271001是泸州的城市代码，利用http://toy1.weather.com.cn/search?cityname=泸州可以查询到泸州的城市代码。
在这里插入图片描述
利用JSON Viewer可以直观查看返回的天气JSON数据：

1、创建task01.php页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过城市代码查询城市天气</title>
	</head>
	<body>
		<h3>通过城市代码查询城市天气</h3>
		<form action="do_task01.php" method="post">
			输入城市代码：<input type="text" name='cityCode' />
			<input type="submit" value="提交" />
		</form>		
	</body>
</html>

!、创建do_task01.php页面
在这里插入图片描述

<html>
	<head>
		<title>通过城市代码查询城市天气</title>
	</head>
	<body>
		<?php
			// 获取表单提交的城市代码
			$cityCode = $_POST["cityCode"];
			//生成查询url
			$url = $url = "http://t.weather.sojson.com/api/weather/city/$cityCode";
					
			//获取页面内容
			$html = file_get_contents($url);
			//转换成json
			$weather = json_decode($html, true);
			//解析所需信息
			$parent = $weather['cityInfo']['parent'];
			$city = $weather['cityInfo']['city'];
			$high = $weather['data']['forecast'][0]['high'];
			$low = $weather['data']['forecast'][0]['low'];
			$ymd = $weather['data']['forecast'][0]['ymd'];
			$week = $weather['data']['forecast'][0]['week'];
			$type = $weather['data']['forecast'][0]['type'];
			
			//输出信息
			echo 'url: ', $url, '<br />';
			echo '城市：', $parent, $city, '<br />';
			echo '温度：', $high, $low,'<br />';
			echo '时间：', $ymd, $week,'<br />';
			echo '天气：', $type, '<br />';
		?>
	</body>
</html>

在浏览器里访问http://localhost/JavaScriptPractice/task01.php：
在这里插入图片描述
输入泸州的城市代码101271001，单击提交按钮：

大家可以看到，要访问网络数据，一般是要进行页面的跳转，用户体验不是很好，我们希望有一种技术，让我们能够不用加载整个页面或进行页面跳转就能局部刷新当前页面，这个技术就是我们下面要学习的AJAX。

二、AJAX概述
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

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

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

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

1、XMLHttpRequest对象的属性
在这里插入图片描述
readyState一共有5种取值：

	0：请求没有发出（在调用open()函数之前）
	1：请求已经建立但还没有发出（在调用send()函数之前）
	2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）
	3：请求已经处理，正在接收服务器的信息，响应中通常有部分数据可用，但是服务器还没有完成响应。
	4：响应已完成，可以访问服务器响应并使用它。

2、XMLHttpRequest对象的方法
在这里插入图片描述
在创建一个XMLHttpRequest的对象之前，必须首先确定用户当前使用的浏览器类型，之后根据浏览器类型创建合适的XMLHttpRequest对象，如果为普通的FireFox，则直接使用new XMLHttpRequest()的方式创建；而如果是低版本的IE浏览器，则通过new ActiveXObject()的方式进行创建。

三、AJAX案例演示
任务1、输入城市代码，返回城市天气预报信息
包含城市名、当天最高气温与最低气温、天气类型、年月日、星期几。

1、创建task02.php
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>采用AJAX获取城市天气信息</title>
		<script>
			function getWeatherInfo() {
				// 获取用户输入的城市代码
				var cityCode = document.getElementById('cityCode').value;				
				
				// 声明请求对象
				var xmlhttp;
				// 实例化请求对象
				if (window.XMLHttpRequest) {
					// IE7+， Firefox, Chrome, Opera, Safari浏览器里执行代码
					xmlhttp = new XMLHttpRequest();
				} else {
					// IE5， IE6 浏览器里执行代码
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}

				// 监听请求状态变化，一旦有变化，执行相应的回调函数
				xmlhttp.onreadystatechange = function() {
					// 判断请求是否成功，响应是否完成
					if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
						// 利用响应文本修改页面元素内容			
						document.getElementById('weather').innerHTML = xmlhttp.responseText;
					}
				}

				// 新建HTTP请求，采用GET方式，请求采用异步方式
				xmlhttp.open("GET", "http://t.weather.sojson.com/api/weather/city/" + cityCode, true);
				// 发送HTTP请求，不传递参数
				xmlhttp.send(null);
			}
		</script>
	<body>
		<h3>通过城市代码查询城市天气</h3>
		输入城市代码：<input id='cityCode' type="text" />
		<button type="button" onclick="getWeatherInfo()">查询</button><br />
		<div id="weather">
			<p id='city'></p>
			<p id='temperature'></p>
			<p id='time'></p>
			<p id='type'></p>
		</div>		
	</body>
</html>

运行效果如下：
在这里插入图片描述

weixin_44765359

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记：AJAX基础

JavaScript学习：AJAX基础###一.准备工作1.Python案例：查询城市天气并绘制最高气温与最低气温折线图（https://blog.csdn.net/howard2005/article/details/102752640）2.使用JSON Viewer直观查看JSON数据（https://blog.csdn.net/howard2005/article/details/10...
复制链接

扫一扫