一、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
【需要返回的数据】