AJAX即异步JavaScript和XML，是一种在无需刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。它通过XMLHttpRequest对象实现，包括创建对象、打开连接、发送请求和处理响应等步骤。应用广泛，如分页、用户名验证和数据增删改查。在JavaScript中，可以通过监听`onreadystatechange`事件来处理请求过程，当状态改变时获取服务器返回的数据并更新页面。
一、AJAX是什么？
-
前端做什么？
- 请求数据
1:如何请求数据 => ajax(fetch).
2:如何渲染视图 => a:DOM操作(原生js).数据驱动方式(框架,Vue,React,小程序)
js ajax 框架(Vue是基础).
为什么要请求数据,如何请求数据,ajax原理是什么.
网页上显示的数据是从哪里来的?
1:服务器 => 发送数据的电脑.
2:客户端 => 你的电脑.(接收数据的电脑).(浏览器,微信客户端...).
请求数据 => 客户端请求服务端的数据.
客户端(前端),前端程序员就是开发前端程序.
应用范围
- ajax分页
- 无刷新的用户名验证（验证用户名是否已被占用）
- 数据的增上改查
- 需要异步读取的地方。如google地图。
- ...
二、概述
AJAX = Asynchronous JavaScript And XML. AJAX 并非编程语言。
Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。
原理图
核心对象XMLHttRequest
| 方法 | 描述 |
| new XMLHttpRequest | 创建新的 XMLHttpRequest对象 |
| open(method,url,async,user,psw) | 规定请求 method:请求类型 GET 或POST url:文件位置 async:true(异步)或false(同步) user:可选的用户名称 psw:可选的密码 |
| send() | 将请求发送到服务器，用于GET请求 |
| send(string) | 将请求发送到服务器，用于POST请求 |
| 属性 | 描述 |
| onreadystatechange | 定义当readyState属性发生变化时被调用的函数 |
| readyState | 保存XMLHttpRequest的状态 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪 |
| responseText | 已字符串返回响应数据 |
| status | 返回请求的状态号 200：“OK” 403：“Forbidden” 404:"Not Found" |
onreadystatechange => 事件 => readyState属性变化时触发. => 作用就是就听请求的过程.(等待服务器响应)
AJAX&&HTML代码（如何去请求数据）
<body>
<div></div>
<script>
let oDiv = document.querySelectorAll('div')[0];
let str = '';
// oDiv.innerText = str;
// 请求服务器的工具.(js对象)
const xhr = new XMLHttpRequest();
// 确定请求的服务器地址.
xhr.open('GET','content.txt');
// 发起请求
xhr.send();
// 请求数据成功之后,进行页面渲染.(修改div的内容)
xhr.onreadystatechange = function() {
// 如果请求数据完成了.
if (xhr.readyState === 4) {
// 如果请求数据成功了
if (xhr.status === 200) {
// 获取服务器返回的数据结果
str = xhr.responseText;
// 把结果放到div的内容里.
oDiv.innerText = str;
}
}
}
</script>
</body>content.txt
【需要返回的数据】
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
