AJAX学习笔记

BeetleBailey

已于 2022-08-11 15:43:25 修改

阅读量193

点赞数

分类专栏： JavaScript AJAX 文章标签： javascript ajax 前端

于 2022-08-11 14:49:54 首次发布

本文链接：https://blog.csdn.net/BeetleBailey/article/details/126284546

版权

JavaScript 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

AJAX

1 篇文章 0 订阅

订阅专栏

AJAX
Asynchronous JavaScript And XML.是一种创建交互式网页应用的的网页开发技术
Ajax 的优势：通过异步模式，提升了用户体验。
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。
Ajax 引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
Ajax 的最大特点：可以实现局部刷新，在不更新整个页面的前提下维护数据，提升用户体验度。

浏览器内建XMLHttpRequest对象 (从Web浏览器请求数据)
JavaScript 和 HTML DOM (显示或使用数据)

AJAX工作流程在这里插入图片描y述
1、页面中发生某个事件
2、由JavaScript创建XMLHttpRequest对象
3、XMLHttpRequest对象向web服务器发送请求
4、web服务器接收并处理请求
5、服务器将响应发送回网页
6、由 JavaScript 读取响应
7、由 JavaScript 执行正确的动作（比如更新页面）

创建XMLHttpRequest对象语法
variable = new XMLHttpRequest();

XMLHttpRequest对象的属性

onreadystatechange 属性
通过 XMLHttpRequest 对象，您可以定义当请求接收到应答时所执行的函数。这个函数在onreadystatechange 属性中定义

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };

responseText 属性以 JavaScript 字符串的形式返回服务器响应

document.getElementById("demo").innerHTML = xhttp.responseText;

XMLHttpRequest对象的方法

如需向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xhttp.open("GET","ajax_info.txt",true);    //异步为true 同步为false
xhttp.send

<!DOCTYPE html>
<html>
<body>

<h1>XMLHttpRequest 对象</h1>

<button type="button" onclick="loadDoc()">请求数据</button>

<p id="demo"></p>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/demo/demo_get.asp", true);
  xhttp.send();
}
</script>

</body>
</html>