Ajax

AJAX（Asynchronous JavaScript and XML）是一种可以在网页不刷新整个页面的情况下，与服务器交换数据并更新部分网页内容的技术。
核心是XMLHttpRequest

特点

  • 异步：意味着网页可以在后台与服务器通信，而不打扰用户的操作。页面内容更新是不会中断用户的浏览体验的。
  • 无刷新：网页不需要重新加载整个页面，只更新需要改变的部分（例如列表、数据等）。
  • 例子
  1. 社交媒体：当你向下滑动查看更多内容时，网页会自动加载更多的帖子而无需刷新整个页面。
  2. 搜索引擎：你在搜索框里输入内容时，搜索结果会随着输入的内容实时更新，不需要点击搜索按钮

工作流程

  1. 用户发起请求：用户操作（如点击按钮、输入文本等）触发 AJAX 请求。
  2. 浏览器发送请求：AJAX 使用 JavaScript 向服务器发送一个请求（通常是 HTTP 请求）。
  3. 服务器处理请求：服务器接收到请求后，处理并返回相应的数据（通常是 JSON 格式，或 XML）。
  4. 浏览器更新页面：JavaScript 接收到服务器返回的数据后，仅更新网页的相关部分，而不刷新整个页面。
    0
    同一个页面
    2

1
1

JSON

JSON（JavaScript Object Notation） 是一种轻量级的数据交换格式，易于人类阅读和编写，同时也易于机器解析和生成。

格式特点

  • 键值对：JSON 数据是由键值对组成的，键是字符串，值可以是多种类型（字符串、数字、布尔值、数组、对象等）。
  • 对象和数组：JSON 支持两种主要的结构：
    对象（Object）：由一组键值对组成，用花括号 {} 括起来。
    数组（Array）：一组值的有序集合，用方括号 [] 括起来。

基本语法

  • 对象 用 {} 括起来，键值对之间用逗号 , 隔开。
  • 数组 用 [] 括起来，元素之间也用逗号 , 隔开。
  • 键（Key） 必须是字符串（双引号括起来），值（Value） 可以是：字符串（双引号括起来）、数字、布尔值（true 或 false）、null、对象、数组
{
  "name": "John",
  "age": 30,
  "isStudent": false,
  "address": {
    "street": "123 Main St",
    "city": "New York"
  },
  "phoneNumbers": ["123-4567", "987-6543"]
}
\\name, age, isStudent 是键（key），分别对应的值是字符串、数字和布尔值。
\\address 是一个对象，包含 street 和 city 两个键值对。
\\phoneNumbers 是一个数组，包含两个电话号码。