W13-AJAX

最新推荐文章于 2024-07-25 12:41:07 发布

小红帽的狼外婆_x

最新推荐文章于 2024-07-25 12:41:07 发布

阅读量59

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/reL_iuhgc34n_x/article/details/118371724

版权

1.AJAX简介

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

2.创建对象

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

3.请求

GET 请求

xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();

POST 请求

xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

异步 - True 或 False？

xmlhttp.open("GET","ajax_test.html",true);

4.响应

responseText 属性document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML 属性

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

5.实例

<!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>

小红帽的狼外婆_x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
W13-AJAX

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

扫一扫