第十二周学习周记——进一步学习AJAX

最新推荐文章于 2024-09-15 10:33:29 发布

原创最新推荐文章于 2024-09-15 10:33:29 发布 · 321 阅读

0 ·

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

收录于

学习

第十二周学习周记

前言
一、AJAX实例
二、创建XMLHttpRequest对象
- 1. XMLHttpRequest对象
- 2. 创建XMLHttpRequest对象
总结

前言

上一周初步学习了AJAX，这一周将继续学习AJAX。

一、AJAX实例

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
</html>

运行结果：

解析：
上面的AJAX应用程序包含一个div和一个按钮：
div部分用于显示来自服务器的信息，当按钮被点击时，它负责调用名为loadXMLDoc()的函数：

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

之后在页面的 head 部分添加一个script标签，该标签中包含了这个loadXMLDoc()函数：

<head>
<script>
function loadXMLDoc()
{
    .... AJAX 脚本执行 ...
}
</script>
</head>

二、创建XMLHttpRequest对象

1. XMLHttpRequest对象

所有现代浏览器均支持XMLHttpRequest对象（IE5 和 IE6 使用 ActiveXObject），XMLHttpRequest用于在后台与服务器交换数据，可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2. 创建XMLHttpRequest对象

创建XMLHttpRequest对象的语法：

variable=new XMLHttpRequest();

总结

这一周深入学习了AJAX，我更加了解了AJAX。

标签

#jquery #javascript #ajax #html