Ajax——javascript之html篇

本文详细介绍了如何利用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标准

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值