第十周周记

最新推荐文章于 2026-02-15 11:52:43 发布

原创最新推荐文章于 2026-02-15 11:52:43 发布 · 263 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了AJAX的概念、工作原理及其实现方式，通过创建XMLHttpRequest对象来演示如何进行异步数据交换。示例中展示了使用AJAX动态更新网页内容，同时提供了一个天气预报查询的实验，利用jQuery发送AJAX请求获取并展示天气信息。

第十周周记

一、AJAX简介
二、工作原理
三、AJAX - 创建 XMLHttpRequest 对象
四、实例
五、实验——天气预报查询

一、AJAX简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

二、工作原理

在这里插入图片描述

三、AJAX - 创建 XMLHttpRequest 对象

创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();

四、实例

<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>

结果
在这里插入图片描述

五、实验——天气预报查询

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title></title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
   		document.addEventListener('plusready', function(){
   		});  

		$(document).ready(function(){
			$("button").click(function(){
				var city=$("#city").val();
				$.ajax({
					type:"GET",
					url:"http://wthrcdn.etouch.cn/weather_mini?city="+city,
					dataType:"json",
					success:function(result){
						addBox(result.data.forecast);
					}
				})
			});
		});		
			
		function addBox(json_data) {
				$.each(json_data, function(index, obj) {
					$("#box").append("<div'>" +
							"<p>" + obj['date'] + "</p>" +											
							"<p>" + obj['high'] + "</p>" +						
							"<p>" + obj['fengli'] + "</p>" +						
							"<p>" + obj['low'] + "</p>" +						
							"<p>" + obj['fengxiang'] + "</p>" +						
							"<p>" + obj['type'] + "</p>" +							
							"</div>");
				});							
		}
    </script>
	
</head>
<body>
	<div>
		<h3>请输入城市：</h3>
		城市：<input type="text" id="city"/>
		<br>
		<button type="button">提交</button>
	</div>	
	<br>	
	<div id="box"></div>	
	
</body>
</html>