AJAX作用及原理

最新推荐文章于 2023-06-29 10:43:28 发布

小丸子yeah~

最新推荐文章于 2023-06-29 10:43:28 发布

阅读量341

点赞数

分类专栏：服务端

本文链接：https://blog.csdn.net/Blablabla_/article/details/109600944

版权

服务端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

作用：最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

原理：
XMLHttpRequest 对象
XMLHttpRequest 用于在后台与服务器交换数据。

创建 XMLHttpRequest 对象

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

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

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

open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string)
将请求发送到服务器。

例子：

<!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/demo_get.php",true);
	xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>

服务器响应

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

例子：

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

onreadystatechange 事件
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

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

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

小丸子yeah~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX作用及原理

作用：最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。原理：XMLHttpRequest 对象XMLHttpRequest 用于在后台与服务器交换数据。创建 XMLHttpRequest 对象var xmlhttp;if (window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest();}else{
复制链接

扫一扫