Ajax——javascript之html篇

最新推荐文章于 2023-06-22 10:18:01 发布

皮蛋瘦肉没有肉

最新推荐文章于 2023-06-22 10:18:01 发布

阅读量357

点赞数

CC 4.0 BY-SA版权

分类专栏： Ajax 文章标签： html xmlhttprequest ajax javascript

本文链接：https://blog.youkuaiyun.com/zzp961224/article/details/53205042

Ajax 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何利用Ajax实现页面局部刷新，通过具体步骤展示如何创建XMLHttpRequest对象、设置回调函数、与服务器建立连接及处理响应状态等。并讨论了使用HTML作为响应内容的优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
	window.onload = function() {
		var aNodes = document.getElementsByTagName("a");
		for(var i = 0; i < aNodes.length; i++) {
			aNodes[i].onclick = function() {
						
				var request = new XMLHttpRequest();//创建一个XMLHttpRequest 对象，用于在后台与服务器交换数据。
				var method = "GET";//传输方法设置为GET
				var url = this.href;//获取链接

				request.open(method, url);//使用OPEN方法与服务器建立连接
				request.send(null);//向服务器端发送数据， 如果是POST方式就不能为空，需要设置请求头

				request.onreadystatechange = function() {
				//onreadystatechange 是一个事件句柄。它的值是一个函数的名称，
				//当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。
				//仅在状态为 4 时，我们才执行代码。
					if(request.readyState == 4) {
					//0 - (未初始化)还没有调用send()方法
  					//1 - (载入)已调用send()方法，正在发送请求
  					//2 - (载入完成)send()方法执行完成，
  					//3 - (交互)正在解析响应内容
  					//4 - (完成)响应内容解析完成，可以在客户端调用了
					if(request.status == 200 || request.status == 304) {
					//200||304，返回成功且无错误
						document.getElementById("details").innerHTML = request.responseText;
						//当来自服务器的响应并非 XML时，使用responseText
						//responseText 属性返回字符串形式的响应即获取纯文本数据
							}
						}
					}
						
				return false;
			}
		}
	}
</script>

应用AJAX的具体步骤：

1.建立xmlHttpRequest对象

var request = new XMLHttpRequest();

2.设置回调函数

request.onreadystatechange = function() {...}

3.使用OPEN方法与服务器建立连接

request.open(method, url);

4.向服务器端发送数据

request.send(null);

5.在回调函数中针对不同的响应状态进行处理

if(request.readyState == 4) {
	//0 - (未初始化)还没有调用send()方法
  	//1 - (载入)已调用send()方法，正在发送请求
  	//2 - (载入完成)send()方法执行完成，
  	//3 - (交互)正在解析响应内容
  	//4 - (完成)响应内容解析完成，可以在客户端调用了
	if(request.status == 200 || request.status == 304) {
	//200||304，返回成功且无错误
	......
							}
				}

总结：

优点:
   1.从服务器端发送的HTML代码在浏览器端不需要用JavaScript进行解析
   2.HTML的可读性好
   3.HTML代码块与innerHTML属性搭配，效率高
缺点:
    1.若需要通过Ajax更新一篇文档的多个部分，HTML不合适
    2.innerHTML并非DOM标准