初识AJAX记录

最新推荐文章于 2024-03-02 13:25:47 发布

ZER021

最新推荐文章于 2024-03-02 13:25:47 发布

阅读量188

点赞数

分类专栏：杂七杂八文章标签： AJAX JavaScript 异步通信

本文链接：https://blog.csdn.net/ZER021/article/details/96888533

版权

杂七杂八专栏收录该内容

4 篇文章 0 订阅

订阅专栏

AJAX是什么

AJAX，异步的JavaScript和XML，一种使用现有标准的新方法。当我们只刷新页面部分数据而不重新加载整个页面时会用到。例如拉钩招聘网站上，分页按钮上实现的功能。岗位列表界面，点击页数就可以更新岗位列表的数据，这里就用到AJAX。
在这里插入图片描述
我是这样理解的，考虑到用户页面交互，或者重载页面数据量过大时，可以通过这种方式刷新数据。AJAX就好比我们去金拱门买汉堡，我到了金拱门点了一个汉堡在店里吃，汉堡吃完了。如果不够，我可以直接去点订餐台再点一个汉堡或者薯条，而不是走出去大门，重新进入金拱门到订餐台点一个汉堡。如果我已经点了第二个汉堡，突然在店里发现老同学，我去跟他聊聊天，然后等汉堡做好，再去取回我的汉堡。不用等取到汉堡才去找我的同学聊天。页面部分数据更新，异步通信是我所理解AJAX的作用。

AJAX的简单使用

在DEMO级的练习中，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>

从上面的代码可以看出来整个过程中，代码就做了以下两件事：
1.编写两个组件，一个用来显示，一个按钮用来触发事件；
2.用JavaScript声明事件函数，函数内部完成AJAX操作。

所有浏览器都可以使用AJAX的XMLHttpRequest对象？

XMLHttpRequest 是 AJAX 的基础。所有现代浏览器均支持 XMLHttpRequest 对象，但IE5 和 IE6 使用 ActiveXObject。
创建一个XMLHttpRequest对象：

xmlhttp=new XMLHttpRequest();

判断浏览器是否支持XMLHttpRequest对象：

if (window.XMLHttpRequest){
	//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
	xmlhttp=new XMLHttpRequest();
}else{
	// IE6, IE5 浏览器执行代码
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

之后用open()和send()方法完成数据操作。

xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

XMLHttpRequest请求

XMLHttpRequest的请求涉及到两个方法open()和send()。

方法	参数
open（method,url,async）	规定请求的类型、URL 以及是否异步处理请求。`method`：请求的类型；GET 或 POST。`url`：文件在服务器上的位置。`async`：true（异步）或 false（同步）
send(string)	将请求发送到服务器。`string`：仅用于 POST 请求

XMLHttpRequest响应

获得来自服务器的响应后，XMLHttpRequest 对象的 responseText 或 responseXML 属性。

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

XMLHttpRequest的readyState

每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

属性	说明
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。`0`: 请求未初始化。`1`: 服务器连接已建立。`2`: 请求已接收。`3`: 请求处理中。`4`: 请求已完成，且响应已就绪。
status	`200`: “OK”。`404`: 未找到页面

AJAX的使用理解

使用AJAX，可以用个一个事件源触发事件函数，事件函数就是我们要发起AJAX的函数，以为使用AJAX大部分是异步，所以在事件函数中，使用了open()和send()方法后，我们通过判断readyState的状态，进行数据更新操作。

所以在异步中，函数一般是这样的：

<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	// onreadystatechange在open() send()之前
	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>

在同步中，函数一般是这样的：

<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.open("GET","/try/ajax/ajax_info.txt",false);
	xmlhttp.send();
	// 数据更新在open() send()之后
	document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
</script>

ZER021

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识AJAX记录

AJAX是什么AJAX，异步的JavaScript和XML，一种使用现有标准的新方法。当我们只刷新页面部分数据而不重新加载整个页面时会用到。例如拉钩招聘网站上，分页按钮上实现的功能。岗位列表界面，点击页数就可以更新岗位列表的数据，这里就用到AJAX。我是这样理解的，考虑到用户页面交互，或者重载页面数据量过大时，可以通过这种方式刷新数据。AJAX就好比我们去金拱门买汉堡，我到了金拱门点了一个汉...
复制链接

扫一扫