【重温JS】巩固基础之-ajax原理/缓存/接口这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战 ☆☆☆ 今

这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战

☆☆☆ 今天学习的内容: ( 前后端通信-ajax原理/缓存/接口 ) !查缺补漏! ☆☆☆

可作为初学者的学习路线, 可参考一下, 学习进度也不是特别赶! 持续更新中

结合自己的理解, 用白话文简单又全面概括 JavaScript 学习过程中的基础知识点, 方便加深理解!

开始今天的学习吧! '打牢地基才能筑高楼'! 加油! 认真对待!!

1、梳理昨日知识点

`php` 操作 `mysql` 步骤:

1、选择数据源
2、设置数据库
3、确定字符编码
4、编写 sql 语句
5、执行 sql 语句 mysql_query insert delete update

2、ajax

什么是 ajax :

异步的 async JavaScript and xml 在向服务器提交少量的数据时，可以使用 ajax 实现

提高程序的执行效率

作用：

实现整个页面无刷新（局部刷新） ajax 最大特点--页面无刷新

ajax 使用场景:

验证用户名的唯一性
搜索框的智能联想
...

3、ajax 工作原理

如封面图: m8-day23-1

4、异步和同步

异步：同时执行（生活中的同步）

异步---非阻塞模式前面的代码不会影响后面代码的执行

同步：顺序执行

同步---阻塞模式前面的代码会影响后面代码执行

5、ajax 获取或向服务器发送数据步骤

举个栗子:

打电话：

1、需要一个手机
2、拨号（建立和信号源连接）
3、打电话方说
4、对方回应

ajax 具体步骤：

1、需要一个 ajax 对象 `XMLHttpRequest`

var ajax = null
if (window.XMLHttpRequest) {
  ajax = new XMLHttpRequest()
} else {
  ajax = new ActiveXObject('Microsoft.XMLHTTP')
}

2、建立和服务器的连接

通过open()方法

三个参数:

第一个参数：请求数据的方式 get/ post
- get 和 post 区别 :
  - get 路径传值数据量小
  - post 非路径传值数据量大
第二个参数：路径 url
第三个参数：同步 true / 异步 false 默认是异步 (可以省略)

3、发送数据

通过 send() 方法发送数据

4、服务器处理数据并将处理结果返回来

服务器处理的结果在 responseText 属性中

通过 onreadystatechange 事件相应服务器处理的结果

事件中注意：状态值和状态码判断

状态值： 0 1 2 3 4

6、缓存

当多次通过 ajax 方式请求服务器的数据时，如果请求的路径没有发生变化，后面的请求会从浏览器的缓存上提数据

如果服务器的数据有更改客户端不能及时获取浏览器的数据

为了防止缓存现象：

解决方式：在请求路径上添加一个一个参数值是一个随机值

"t"+(i+1)+".txt?id="+new Date().getTime() 或 Math.random()

7、字符和对象转换

通过 ajax 从服务器获取的数据都是字符串

将字符串转对象 '{}' '[]' JSON.parse( )

将对象转成字符串 JSON.stringify()

8、接口

接口就是后端程序为前端提供一个路径
接口路径： xxx.php xxx.jsp xxx.asp 含义：验证用户名的唯一性
接口参数 : 用户名 username
接口的返回值 :
- 0 用户名不存在
- 1 用户名存在

预告: 加油, 追梦人

学习就是一个不断进行的过程, 坚持下去, 定有收获!

日积月累, 巩固基础, 早进大厂!

坚持很不容易, 坚持下来更不容易, 你真棒!

Calm Down & Carry On!

【重温JS】巩固基础之-ajax原理/缓存/接口

可作为初学者的学习路线, 可参考一下, 学习进度也不是特别赶! 持续更新中