理解AJAX技术-CSDN博客

本文链接：https://blog.csdn.net/JDMXI/article/details/79425319

AJAX是什么?

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

AJAX用于:

运用XHTML+CSS来表达资讯；

运用JavaScript操作DOM（Document Object Model）来执行动态效果；

运用XML和XSLT操作资料;

运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换；

注意：AJAX与Flash、Silverlight和Java Applet等RIA技术是有区分的。

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
	{
		// 老版本的IE浏览器（IE5 和 IE6）使用 ActiveX 对象
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
//向服务器发送请求
	xmlhttp.open("GET","/ajax/ajax_info.txt",true); //请求类型为GET,文件在服务器的位置,异步true(同步false,一般不推荐使用)
	xmlhttp.send();  //将请求发送到服务器
}
</script>
</head>
<body>

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

</body>
</html>

在该实例中

AJAX - 创建 XMLHttpRequest 对象:

xmlhttp=new XMLHttpRequest();

接着使用XMLHttpRequest 对象的 open() 和 send() 方法,向服务器发送请求：

xmlhttp.open("GET","ajax_info.txt",true);

xmlhttp.send();

方法

描述

open(method,url,async)

method:请求的类型GET或POST

url:文件在服务器上的位置

async:是否异步true(异步)false(异步)

send(string)

将请求发送到服务器

string仅用于POST请求

AJAX-服务器响

XMLHttpRequest 对象的 responseText 或 responseXML 属性用于获取来着服务器的响应

如果来自服务器的响应并非 XML，则使用 responseText 属性

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

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，就使用 responseXML 属性

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

AJAX - onreadystatechange 事件

xmlhttp.onreadystatechange=function()
{
	if (xmlhttp.readyState==4 && xmlhttp.status==200)
	{
		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	}
}

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

当当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.readyState==4 && xmlhttp.status==200