ajax及其应用

最新推荐文章于 2023-12-10 23:09:42 发布

MY_prime

最新推荐文章于 2023-12-10 23:09:42 发布

阅读量141

点赞数 1

文章标签： ajax javascript

本文链接：https://blog.csdn.net/MY_prime/article/details/129578876

版权

Ajax是一种通过JavaScript和XMLHttpRequest对象来实现异步数据传输的技术。在Web应用程序中，Ajax技术可以实现网页上的局部更新，无需刷新整个页面。我认为它的工作原理是:用户在Web应用程序中触发事件，例如点击按钮或输入文本等。JavaScript代码捕获到事件并使用XMLHttpRequest对象向服务器发送HTTP请求。服务器接收请求并处理请求，将响应数据发送回给客户端。JavaScript代码在收到服务器响应后，解析响应数据并将数据更新到Web应用程序的相关部分，无需刷新整个页面。总之，Ajax通过使用JavaScript和XMLHttpRequest对象，实现了异步数据传输，能够提高Web应用程序的响应速度和用户体验。

属性
XMLHttpRequest对象有一些常用的属性，包括：readyState：表示当前请求的状态。当readyState的值变化时，会触发readystatechange事件。有五个可能的值：
0：未初始化。XMLHttpRequest对象已创建，但未调用open()方法。
1：正在加载。open()方法已调用，但send()方法未调用。
2：已加载。send()方法已调用，且响应头和响应状态已经可用。
3：正在交互。正在下载响应体。
4：完成。整个请求过程已完成。
status：表示服务器响应的HTTP状态码。如果请求未成功，则为0。常见的状态码包括200（成功）、404（未找到,客户端错误）、500（服务器内部错误）等。
responseText：表示服务器返回的响应文本。如果响应类型是"text"、"html"或"xml"，则可以通过responseText属性获取响应内容。
responseXML：表示服务器返回的响应XML文档。如果响应类型是"xml"，则可以通过responseXML属性获取响应内容。
timeout：表示请求超时时间，单位为毫秒。如果请求在规定时间内没有完成，则会触发timeout事件。

方法
XMLHttpRequest对象有一些常用的方法，包括：open(method, url[, async[, user[, password]]])：初始化请求。参数method表示HTTP请求方法（例如GET或POST），url表示请求的URL，async表示是否异步，默认为true，user和password表示请求的用户名和密码（可选）。send([data])：发送请求。参数data表示要发送的数据。如果请求方法是GET，则data应该为null或空字符串；如果请求方法是POST，则data应该为请求体的字符串或FormData对象。
abort()：取消请求。调用该方法后，readyState属性变为0，同时会触发readystatechange事件。setRequestHeader(header, value)：设置请求头。参数header表示请求头名称，value表示请求头的值。

事件
XMLHttpRequest对象有一些常用的事件，包括：onreadystatechange：当readyState属性发生变化时触发。可以通过该事件来处理请求过程中的不同阶段。
ontimeout：当请求超时时触发。
onload：当请求成功完成时触发。可以通过responseText或responseXML属性获取响应内容。
onerror：当请求失败时触发。可以通过status属性获取服务器响应的HTTP状态码。

我创建了一个使用Ajax和XMLHttpRequest对象从JSONPlaceholder获取数据的示例
html部分：
<!DOCTYPE html>
<html>
<head>
   <title>Ajax Example</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="app.js"></script>
</head>
<body>
   <h1>Ajax Example</h1>
   <div id="output"></div>
</body>
</html>

js部分：
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 监听状态改变事件
xhr.onreadystatechange = function() {
   // 如果请求已经完成
   if (xhr.readyState === XMLHttpRequest.DONE) {
       // 如果请求成功
       if (xhr.status === 200) {
           // 解析响应的JSON数据
           var data = JSON.parse(xhr.responseText);
           // 输出到页面上
           var output = document.getElementById("output");
           output.innerHTML = "<pre>" + JSON.stringify(data, null, 2) + "</pre>";
       } else {
           // 如果请求失败，输出错误信息
           console.log("Error: " + xhr.status);
       }
   }
};