软件工程知识体系

切换主题

Ajax ​

什么是服务器 ​

负责存放和对外提供资源的电脑

什么是客户端 ​

负责获取和消费资源的电脑

URL ​

统一资源定位符
互联网上资源的唯一存放位置

组成

通信协议
服务器名称
具体存放位置

通信过程

  1. 打开浏览器
  2. 输入访问地址
  3. 发送请求
  4. 服务器接收请求
  5. 服务器找到资源
  6. 服务器响应客户端

请求 - 处理 - 响应

资源请求方式

get请求（获取）
向服务器要资源

post请求（提交）
往服务器发资源

ajax
网页中利用XMLHttpRequest对象和服务器进行数据交互

网页与服务器间进行数据交互

本地存储 ​

概述 ​

用户浏览器中存储数据的方式，关闭浏览器后的数据持久化

优点 ​

  1. 存储容量大（5MB）
  2. 不会随着 HTTP 请求发送
  3. 使用键值对存储

localStorage ​

  • 使用 API 存储和访问数据
javascript
// 存储数据
localStoerage.setItem('usename','Alice')

// 读取数据
const username = localStorage.getItem('username')
console.log(username) // Alice

// 删除数据
localStorage.removeItem('username')

// 清空数据
localStorage.clear()

sessionStorage ​

javascript
// 存储数据
sessionStorage.setItem('username','Alice');

// 读取数据
const username = sessionStorage.getItem('usename');
console.log(username); // Alice

//删除数据
sessionStorage.removeItem('usename');

//清空数据
sessionStorage.clear();

localStorage 和 sessionStorage 的区别 ​

localStoragesessionStorageCookies
存储容量
持久性
应用场景+ 用户偏好
+ 登录状态
+ 历史数据		+ 临时存储
+ 页面间数据传递
+ 一次性设计		+
+

localStorage 与 Cookies 的对比 ​

概述 ​

用户浏览器中存储数据的方式，关闭浏览器后的数据持久化

优点 ​

  1. 存储容量大（5MB）
  2. 不会随着 HTTP 请求发送
  3. 使用键值对存储

localStorage 用法 ​

使用 API 存储和访问数据

javascript
// 存储一个用户名Alice
localStoerage.setItem('usename','Alice')

// 获取已存储的用户名
const username = localStorage.getItem('username')
console.log(username) // Alice

// 删除数据
localStorage.removeItem('username')

// 清空数据
localStorage.clear()

// 更新用户名Bob
localStorage.setItem('username','Bob')

//

sessionStorage 用法 ​

localStorage 和 sessionStorage 的区别 ​

localStorage 与 Cookies 的对比 ​

服务器 ​

什么是服务器 ​

负责存放和对外提供资源的电脑

什么是客户端 ​

负责获取和消费资源的电脑

URL ​

统一资源定位符
互联网上资源的唯一存放位置

组成

通信协议
服务器名称
具体存放位置

通信过程

  1. 打开浏览器
  2. 输入访问地址
  3. 发送请求
  4. 服务器接收请求
  5. 服务器找到资源
  6. 服务器响应客户端

请求 - 处理 - 响应

资源请求方式

get请求（获取）
向服务器要资源

post请求（提交）
往服务器发资源

网页中利用XMLHttpRequest对象和服务器进行数据交互

网页与服务器间进行数据交互

PHP ​

安装 ​

启动 ​

在localhost:8081启动

php -S localhost:8081 -t "D:\SoftWare\PHP\htdocs"