html标签ajax-示例代码

quanzhankaifa

温馨提示:这篇文章已超过241天没有更新,请注意相关的内容是否还可用!

html标签ajax-示例代码

1、HTML标签ajax是一种用于实现异步数据交互的技术。它可以在不刷新整个页面的情况下,通过发送HTTP请求来获取服务器返回的数据,并将这些数据动态地展示在页面中的指定位置。这种技术能够提高用户体验,使页面的加载速度更快。

示例代码如下:

<!DOCTYPE html>

<html>

<head>

<script>

function showData() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("data").innerHTML = this.responseText;

}

};

xhttp.open("GET", "data.txt", true);

xhttp.send();

}

</script>

</head>

<body>

<button type="button" onclick="showData()">显示数据</button>

<div id="data"></div>

</body>

</html>

在上面的示例代码中,通过使用XMLHttpRequest对象,我们创建了一个用于发送HTTP请求的实例xhttp。在函数showData()中,我们定义了一个回调函数,当请求的状态改变时触发。当请求的readyState为4(请求已完成)且状态码为200(请求成功)时,我们将服务器返回的数据通过innerHTML方法赋值给id为"data"的div元素,从而实现将数据动态展示在页面中的效果。

我们还定义了一个按钮,当点击该按钮时,会触发showData()函数,从而发送HTTP请求并获取数据,并将数据展示在页面中。这样,用户就可以在不刷新整个页面的情况下获取最新的数据。

文章版权声明:除非注明,否则均为莫宇前端原创文章,转载或复制请以超链接形式并注明出处。

取消
微信二维码
微信二维码
支付宝二维码