Ajax学习之helloworld

最新推荐文章于 2022-10-26 22:57:10 发布

原创最新推荐文章于 2022-10-26 22:57:10 发布 · 479 阅读

0 ·

CC 4.0 BY-SA版权

web前端--Ajax 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用JavaScript的DOM操作获取节点并添加点击事件，通过XMLHttpRequest发起HTTP GET请求，接收并处理服务器返回的数据。具体展示了如何在HTML页面中通过a标签触发请求并显示响应结果。

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

源代码：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
//1 、获取节点，并为其添加onclick行为
document.getElementsByTagName("a")[0].onclick=function(){
//创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
//准备发送的数据url
var url = this.href;
var method = "GET";
//调用XMLHttpRequest对象的open方法
request.open(method,url);
//调用XMLHttpRequest对象的send（）方法
request.send(null);
//为XMLHttpRequest对象添加onreadystatechange响应函数
request.onreadystatechange = function(){
//判断响应是否完成，Request的readyState值为4
if(request.readyState == 4){
//判断响应是否可用，Request的状态值为200
if(request.status == 200||request.status == 304){
//打印响应结果
alert(request.responseText);
}
}
}
// 2、取消其默认行为
return false;
}

}
</script>
<a href="hello.txt">hello.txt</a>
</body>
</html>