JSON/AJAX/XHR/FetchAPI知识点学习整理

JSON

• JSON（全称 JavaScript 对象表示法 - JavaScript Object Notation）是一种轻量级、基于文本的开放标准格式，设计出来是为了方便人类阅读和交换数据。
• JSON 的规则和格式对于程序员来说很熟悉，比如写过 C、C++、Java、Python、Perl 的人都能理解。
• 这个格式是由道格拉斯·克罗克福德（Douglas Crockford）确定并推广的。
• 它是为了让人类能方便地读懂数据，并在不同系统之间交换数据而设计的。
• 它最初是基于 JavaScript 语言的语法扩展而来的。
• JSON 文件的后缀名是 .json。
• JSON 的互联网媒体类型（也叫 MIME 类型）是 application/json。
• 在某些操作系统（如苹果系统）中，JSON 的统一类型标识符是 public.json。

JSON 支持两种数据结构 

1. 键值对集合（Collection of name/value pairs）

• 就像字典或对象，数据是以 "名字": "值" 这种形式存储的。

• 比如：这里 "name" 是“键”，"Chloe" 是“值”。

{
"name": "Chloe"
}

2. 有序的值列表（Ordered list of values） 

• 就是数组，一组按顺序排列的数据，像列表、数组、序列等。

• 比如：

["apple", "banana", "orange"]

3.JSON例子

• 整个结构是一个对象（用 {} 括起来的）。

• 它有一个键叫 "book"，对应的值是一个数组 []。

• 数组里有两本书的信息（每本书是一个对象 {}）。

{
"book": [   
{
"id": "01",
"language": "Java",
"edition": "third",
"author": "Herbert Schildt"
},
{
"id": "07",
"language": "C++",
"edition": "second",
"author": "E. Balagurusamy"
}
]
}

JSON VS XML

JSON 和 XML 都是人类能读懂的格式，而且和编程语言无关。它们都可以在现实项目中被创建、读取和解析。

我们可以从以下几点来对比 JSON 和 XML：

（1）Verbose（冗长程度）

XML 写起来更冗长（复杂、占字多），而 JSON 更简洁，所以程序员写 JSON 更快。

（2）Arrays Usage（数组的使用）

XML 适合描述结构化数据，但没有原生支持“数组”；而 JSON 天生支持数组（如下）。

 {
"fruits": ["apple", "banana", "cherry"]
}

（3）Parsing（解析）

在 JavaScript 中，可以用 eval() 方法把 JSON 解析成对象。现代开发中一般不用 eval()，而用更安全的 JSON.parse()：

const str = '{"name": "Chloe"}';
const obj = JSON.parse(str);
console.log(obj.name); // 输出 Chloe

JSON 和 XML例子：

JSON：整体结构是用 {} 括起来的对象格式，每一项都是 "键": 值 的形式。

{
"company": "Volkswagen",
"name": "Vento",
"price": 800000
} 

XML： 

这段 XML 表示的内容和 JSON 是一样的，但结构不一样：

• 用标签 <标签名>内容</标签名> 来包裹每一项

• 外层是 <car>，里面是 company、name、price

<car>
<company>Volkswagen</company>
<name>Vento</name>
<price>800000</price>
</car>

JSON 的用途（Uses of JSON）

• 它用于编写基于 JavaScript 的应用程序，比如浏览器扩展和网站。
• JSON 格式常被用来“序列化”和“传输”结构化数据。
• 它主要用于在服务器和网页应用之间传输数据。
• 网络服务和 API 使用 JSON 来提供公开数据。
• JSON 可以和现代编程语言一起使用。

JSON 的特点（Characteristics of JSON）

• JSON 很容易读和写。
• 它是一种轻量的、基于文本的数据交换格式。
• JSON 不依赖任何编程语言。

PHP与JSON

PHP 中的 json_encode() 函数用来把数据编码成 JSON 格式。

这个函数执行成功时，会返回对应的 JSON 字符串；失败时返回 FALSE。

<?php
$arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5);
echo json_encode($arr);
?>

然后用 json_encode($arr) 把这个数组变成 JSON 格式，并输出。 

{"a":1,"b":2,"c":3,"d":4,"e":5} 

 json_encode() 把它转成 JSON 的大括号 {} 格式，变成字符串。

例子：一段 PHP 代码，用来创建一个“员工对象”，把他的名字、兴趣、出生日期记录下来，然后转换成 JSON。

class Emp {
public $name = "";
public $hobbies  = "";
public $birthdate = "";
}

$e = new Emp();                  // 创建一个 Emp 的对象 $e
$e->name = "sachin";             // 把 name 设置为 "sachin"
$e->hobbies  = "sports";         // 把 hobbies 设置为 "sports"
$e->birthdate = date('m/d/Y h:i:s a', strtotime("8/5/1974 12:20:03"));
echo json_encode($e);

输出结果：

 {
"name": "sachin",
"hobbies": "sports",
"birthdate": "08/05/1974 12:20:03 pm"
}

json_decode() 是 PHP 用来把 JSON 字符串转回 PHP 数据结构的函数。
也就是说，它和 json_encode() 正好是反过来的作用。

函数原型：

mixed json_decode ($json_string [, $assoc = false [, $depth = 512 [, $options = 0 ]]])

 PHP 代码：

<?php
$json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
var_dump(json_decode($json));
var_dump(json_decode($json, true));
?>

这段代码主要做了两件事：

1. 定义一个 JSON 字符串 {"a":1,"b":2,"c":3,"d":4,"e":5}

2. 用 json_decode() 把它解码成 PHP 数据结构，然后用 var_dump() 打印出来看看结果。

 不加第二个参数，默认返回的是一个 PHP 对象（stdClass 类型）。

object(stdClass)#1 (5) {
["a"] => int(1)
["b"] => int(2)
["c"] => int(3)
["d"] => int(4)
["e"] => int(5)
}

 加了第二个参数 true，就会返回 关联数组（array）。

 array(5) {
["a"] => int(1)
["b"] => int(2)
["c"] => int(3)
["d"] => int(4)
["e"] => int(5)
}

 AJAX与JSON

任何通过 AJAX 更新的数据，都可以用 JSON 格式保存在服务器上。

AJAX 的作用是让 JavaScript 在需要的时候从服务器获取 JSON 文件，然后解析（parse）这些数据，接着可以做下面这些事：

方法1：把解析后的数据存进变量里，用于后续处理（比如做计算、判断），再显示到网页上。

let jsonData = '{"price": 100}';
let obj = JSON.parse(jsonData);   // 把 JSON 转成对象
let total = obj.price * 2;        // 再处理一下
document.getElementById("total").innerText = total;

方法2： 直接把数据放进网页上的标签（DOM 元素）里，让数据立刻显示出来。

let jsonData = '{"username": "小明"}';
let obj = JSON.parse(jsonData);
document.getElementById("name").innerText = obj.username;

AJAX 

• AJAX 是 "Asynchronous JavaScript and XML" 的缩写。
• AJAX 是一种网页开发技术，它可以让网页和服务器通信，而且是“异步”的，不用刷新整个页面。
• 它彻底改变了网页应用，使得网页可以实现动态的、快速的、无缝的用户体验。
• 可以只更新网页的一部分内容，不用整个页面刷新。
• AJAX 是通过 JavaScript + XMLHttpRequest (XHR)，或者用现代方法 Fetch API 来实现的。

How AJAX Works（AJAX 怎么工作）：

第一步：用户操作网页

User Interaction (e.g., clicks a button, submits a form) 用户操作网页，比如点击按钮、提交表单。

第二步：JavaScript 发请求

JavaScript 代码偷偷给服务器发一个请求（HTTP 请求）

第三步：服务器处理请求

服务器处理请求，可能从数据库里查数据、计算内容等。

第四步：服务器返回数据

服务器把数据打包好返回，格式通常是 JSON（现在最常用）、也可能是 XML 或 HTML。

第五步：JavaScript 更新网页内容

JavaScript 把返回的数据显示到网页上，而且不刷新整个页面。

 👆 用户点按钮
↓
📬 JavaScript 发请求到服务器
↓
🧠 服务器处理请求 & 返回数据
↓
🧾 JavaScript 接收数据
↓
🖥️ 网页局部更新（不刷新页面）

同步synchronous与异步Asynchronous

synchronous 同步通信：用户必须等待新页面加载完成，
这是网页中典型的通信模式（点击 → 等待 → 页面刷新）。 

Asynchronous异步通信：在数据加载的同时，用户仍然可以继续操作页面。

这是 AJAX 实现的一种通信方式。

Web applications and Ajax

• 表单提交（不用刷新页面）
• 自动联想搜索（例如：谷歌搜索建议）
• 实时数据更新（比如：股票价格、体育比分）
• 单页应用程序（SPA）

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

• AJAX 不是一种编程语言，而是一种使用 JavaScript 的特定方式。
• 可以在“后台”偷偷从服务器下载数据。
• 可以动态更新页面，而且用户不需要等待或刷新页面。
• 避免了传统的“点击 → 等待 → 页面刷新”这种慢体验。

AJAX 不是编程语言，而是一种用 JavaScript 在后台和服务器交换数据、动态更新页面的方式，用户无需等待或刷新。

A typical Ajax request（一次典型的 Ajax 请求）

① user clicks, invoking an event handler

用户点击（例如：点击按钮），触发了一个事件处理函数。

② handler's code creates an XMLHttpRequest object

事件处理函数里的代码会创建一个 XMLHttpRequest 对象。

③ XMLHttpRequest object requests page from server

这个对象会向服务器发出请求，比如“我要最新的天气数据”。

④ server retrieves appropriate data, sends it back

服务器收到请求后，查找需要的数据，并把它发回来。

⑤ XMLHttpRequest fires an event when data arrives

当服务器把数据发回来时，XMLHttpRequest 会触发一个事件。

⑥ this is often called a callback

 这个处理过程通常被称为 回调（callback）。

⑦ you can attach a handler function to this event

你可以把一个处理函数绑定到这个事件上，来决定怎么处理返回来的数据。

⑧ your callback event handler processes the data and displays it

你的回调函数就会处理这些数据，并把它显示到页面上。

Ajax 请求 = 用户点击 → 发出请求 → 收到数据 → 自动处理并更新页面，中间页面不刷新，用户流畅体验

Sending a request for a URL 发送一个 AJAX 请求到某个网址（URL）

1.创建一个 XMLHttpRequest 对象，这个对象用来和服务器进行通信。

objXMLHttp = new XMLHttpRequest()

AJAX 核心组件之一：XMLHttpRequest (XHR)

这是最传统、最基础的 AJAX 方式，用来在网页和服务器之间交换数据。

XMLHttpRequest 对象常用方法

• 1️⃣ abort()
• 中止当前请求
• 中文解释：如果你后悔了，不想再等服务器的回应了，就用这个方法“喊停”。
• 2️⃣ getAllResponseHeaders()
•  返回服务器发回的所有响应头（Header 信息）作为一个字符串
• 中文解释：就像是信封上的标签，比如“内容类型”、“编码方式”等，这个方法可以一次性查看全部标签。
• 3️⃣ getResponseHeader("headerLabel")
• 返回指定响应头的值
•  中文解释：如果你只想看某一个标签，比如服务器说它返回的是 JSON 格式，你可以写：xmlHttp.getResponseHeader("Content-Type")就会得到：application/json。
• 4️⃣ open("method", "URL")
•  准备一个请求，告诉浏览器你要访问哪一个网页，使用什么方法（GET 或 POST）
• 中文解释：xmlHttp.open("GET", "data.json")意思是：我要用 GET 方法去请求 data.json 文件。
• 5️⃣ send(content)
• 发送请求到服务器
• 中文解释：这个方法真的把你的请求送出去啦！
• 如果是 GET 请求，就写：xmlHttp.send(null)
• 如果是 POST 请求，你可以放要发的数据进去：xmlHttp.send("name=GPT宝宝")
• 6️⃣ setRequestHeader("label", "value")
• 设置你要发给服务器的请求头标签和值
• 中文解释：如果你要告诉服务器一些额外的信息（比如你发的是 JSON 格式的数据），你可以写：xmlHttp.setRequestHeader("Content-Type", "application/json")

• XMLHttpRequest（XHR） 是 JavaScript 中最传统的方式，用来发送 AJAX 请求（在网页和服务器之间传数据）。

• XMLHttpRequest 是浏览器内建的功能，功能强但代码写起来很麻烦（比如你要手动判断状态、处理错误、绑定事件等）。

• Prototype 是一个 JavaScript 工具库（类似于 jQuery），可以让 AJAX 写法变得简单、跨浏览器兼容。

• 所以课程、项目或教程中可能会选择更高层的封装工具，比如 Prototype 或 jQuery，来“更方便地写 AJAX”。

2.设置请求的地址，比如你要向服务器要一个叫 servertime.php 的页面。

var url = "servertime.php"

 3.告诉浏览器：当数据返回来了，自动调用名叫 functionName 的函数来处理它。

xmlHttp.onreadystatechange = functionName

• 当浏览器接收到服务器发回来的数据之后，我们可以让它去执行我们想要的某个函数，这就是“转移控制”。xmlHttp.onreadystatechange = functionName 的意思就是：“当状态改变（也就是服务器返回数据）时，去执行叫 functionName 的函数”。

function functionName ()  
{  
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")  
{  
// update the DOM with the data  
document.getElementById("time").innerHTML = xmlHttp.responseText  
}  
}  
当 xmlHttp 的状态变成 4（表示服务器已经返回数据，操作完成），就把服务器返回的内容（xmlHttp.responseText）填进网页中 id 为 "time" 的这个地方里。

 4.用 GET 方法准备发送请求，地址是 url，true 表示异步。

 xmlHttp.open("GET", url, true)

 5.真正把请求发出去！

xmlHttp.send(null)

整个流程：

1. 创建一个 AJAX 请求对象

2. 指定你要请求的网址（比如服务器上的一个 PHP 文件）

3. 绑定一个“回调函数”来处理服务器返回的数据

4. 打开请求通道（准备发请求）

5. 发出请求

var my_JSON_object = {};

var http_request = new XMLHttpRequest();//创建一个 AJAX 请求对象

http_request.open("GET", url, true);打开一扇通往服务器的门

http_request.onreadystatechange = function ()    {//当请求状态变化就会触发这个函数。

      var done = 4, ok = 200; //done = 4 表示请求完成,ok = 200 表示服务器响应“成功”

      if (http_request.readyState == done && http_request.status == ok) {

//把服务器返回的 JSON 字符串，变成 JavaScript 对象，然后放进 my_JSON_object。

        my_JSON_object = JSON.parse(http_request.responseText);

      }

};

http_request.send(null);

 // 1. Create an XHR object

const xhr = new XMLHttpRequest();

// 2. Initialize the request

xhr.open(method, url, async);

// 3. Set request headers (optional)

xhr.setRequestHeader('Content-Type', 'application/json');

// 4. Define what happens when the request completes

xhr.onload = function() {

  if (xhr.status >= 200 && xhr.status < 300) {

    console.log('Success:', xhr.responseText);   } else {

    console.error('Error:', xhr.statusText);

  }

};

// 5. Handle network errors

xhr.onerror = function() {

  console.error('Network error');

};

// 6. Send the request (with optional body for POST/PUT)

xhr.send(body);

XHR的关键方法和属性 

常用方法（Methods）

 常用属性（Properties）

Example: GET Request 

const xhr = new XMLHttpRequest();  // 创建XHR对象
xhr.open('GET', 'https://api.example.com/data', true);  // 初始化GET请求，true表示异步

xhr.onload = function() {  // 请求成功完成时触发
if (xhr.status === 200) {  // 状态码200表示成功
const data = JSON.parse(xhr.responseText);  // 把服务器返回的JSON字符串转换成对象
console.log(data);  // 打印这个数据到控制台
} else {
console.error('Request failed:', xhr.status);  // 请求失败，打印错误码
}
};

xhr.onerror = function() {  // 网络错误时触发
console.error('Network error');
};

xhr.send();  // 发送请求，没有请求体，因为GET一般不发数据

 Example: POST Request

const xhr = new XMLHttpRequest();  // 创建XHR对象
xhr.open('POST', 'https://api.example.com/data', true);  // 初始化POST请求，异步

xhr.setRequestHeader('Content-Type', 'application/json');  // 告诉服务器我们发送的是JSON格式的数据

xhr.onload = function() {  // 请求完成时触发
if (xhr.status === 201) {  // 状态码201表示“创建成功”
console.log('Data saved:', xhr.responseText);  // 打印服务器返回的信息
} else {
console.error('Error:', xhr.statusText);  // 请求失败，打印错误信息
}
};

xhr.onerror = function() {  // 网络错误时触发
console.error('Network error');
};

const postData = JSON.stringify({ title: 'New Post', body: 'Hello World' });  // 把JS对象转成JSON字符串
xhr.send(postData);  // 发送数据给服务器

什么时候用 XMLHttpRequest（XHR）？

兼容老浏览器，比如IE浏览器、旧版的安卓或苹果手机浏览器，它们只支持XHR，不支持新API。

需要精细控制，比如你想监听上传文件的进度条，XHR提供更详细的事件。

维护老代码，如果你项目里有很多用XHR写的代码，继续用它比较方便，保持兼容。

两种比XHR更现代、用起来更方便的网络请求方法：

Fetch API （现代替代方案）

Fetch API 是浏览器内置的，语法简单，基于 Promise，写起来很直观。

fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) throw new Error('网络错误');
return response.json();  // 把响应转换成JSON对象
})
.then(data => console.log(data))  // 打印数据
.catch(error => console.error('错误:', error));  // 处理错误

Axios （流行的第三方库） 

Axios 是一个很受欢迎的库，封装了网络请求，比Fetch更方便，支持更多功能（比如自动转换JSON、支持取消请求等）。

axios.get('https://api.example.com/data')
.then(response => console.log(response.data))  // 直接拿到数据
.catch(error => console.error('错误:', error));

Fetch API 

Fetch API 是现代浏览器里用来发网络请求的新方法，比以前的 XMLHttpRequest 更强大、灵活。它基于 Promise，这让我们处理异步数据变得更简单和清晰。

Fetch API 的特点：

• 基于 Promise：发请求后返回一个 Promise，对响应数据的处理更方便。

• 更灵活：能处理多种数据格式，比如 JSON、纯文本（text）、二进制（blob）等。

• 更强大：代码更简洁，更容易管理各种 HTTP 请求。

• 替代 XMLHttpRequest：现在推荐用 Fetch 代替旧的 XMLHttpRequest。

基本语法 

 fetch(url, options)
.then(response => response.json())    // 把服务器返回的数据转成JSON格式
.then(data => console.log(data))       // 打印出这个数据
.catch(error => console.error('Error:', error));  // 如果请求出错，就打印错误信息

• url：你要请求的地址（API接口）

• options（可选）：告诉请求方式（GET、POST等）、请求头、传的数据等

• response.json()：把服务器返回的内容转换成JSON对象

• .catch(error)：捕捉请求过程中的错误

Fetch API是怎么工作的？

1. 你发出请求，告诉服务器你要访问哪个URL。

2. 服务器接收到请求，处理它，给你返回数据。

3. 你用 .json() 方法把返回的数据变成JSON格式。

4. 用 .catch() 捕获任何可能发生的错误。

常见的HTTP请求方法（就是告诉服务器你要干啥）

• GET：拿数据

• POST：新增数据

• PUT：更新数据

• DELETE：删除数据

async/await

用 async/await 可以让你写异步代码（比如 fetch 请求）变得更简洁、更像同步代码，看起来更容易理解。

 async function getP() {
try {
const response = await fetch('https://fakestoreapi.com/products');  // 等待 fetch 请求完成
if (response.ok) {  // 如果请求成功
const data = await response.json();  // 等待把响应转成 JSON
console.log(data);  // 打印数据
} else {
throw new Error('Failed to fetch data');  // 请求失败，抛出错误
}
} catch (error) {
console.error('Error:', error);  // 捕获并打印错误
}
}

getP();  // 调用函数开始执行

• async 标记函数为异步函数。

• await 等待异步操作完成，不会阻塞页面。

• 用 try...catch 来处理请求失败或出错的情况。

 关键点：

1. async function getP()：
   定义了一个异步函数，表示它可以执行不会阻塞程序的任务，比如获取远程数据。

2. await fetch()：
   await 会暂停函数的执行，直到 fetch() 请求完成，确保拿到数据后再往下执行。

3. response.ok：
   检查请求是否成功，状态码在 200 到 299 之间就算成功。

4. await response.json()：
   如果请求成功，等待把服务器返回的 JSON 格式数据转换成 JavaScript 对象。

5. try/catch 结构：
   捕获请求过程中可能出现的错误（比如网络问题），防止程序崩溃，并打印错误信息。

应用 

 这段代码是用 Fetch API 从一个网络接口获取数据，然后把数据显示到网页上的一个元素里。

fetch('https://jsonplaceholder.typicode.com/posts/1')  
.then(response => response.json())  // 把服务器返回的响应转成JSON格式  
.then(data => {  
// 拿到数据后，把标题和内容放到网页里id为'result'的地方显示  
document.getElementById('result').innerHTML = `
<h3>${data.title}</h3>
<p>${data.body}</p>
`;  
})  
.catch(error => console.error('Error:', error)); // 如果请求失败，打印错误

简单说：

• fetch 去请求网址，拿数据

• .then(response => response.json()) 把数据格式变成JavaScript能用的对象

• 第二个 .then 拿到转换好的数据，放进网页里

• .catch 捕捉异常，如果有错，就打印错误信息

“实时拼写检查器”代码 

代码整体功能：

• 用户在textarea里输入英文

• 输入停止超过800毫秒后（防抖），发送请求到 LanguageTool 拼写检查API

• 得到结果后动态显示拼写错误提示或“没有拼写错误”的消息

<h1>Real-Time Spelling Checker</h1>
<p class="subtitle">US English spelling suggestions as you type</p>
<textarea id="textInput" placeholder="Start typing to check spelling..."></textarea>
<div id="results"><p class="correct">No spelling errors detected</p>
</div>
<div class="info"><p>This tool uses the LanguageTool API to check for spelling and grammar errors in real-time. It focuses on US English spellings.</p>
</div><script>const textInput = document.getElementById('textInput');const resultsDiv = document.getElementById('results');let debounceTimer;let lastCheckedText = '';// 1. 监听输入事件textInput.addEventListener('input', function () {// 2. 清除上一次的定时器，避免频繁请求clearTimeout(debounceTimer);// 3. 获取当前输入，去除前后空白const text = this.value.trim();// 4. 如果文本为空或未发生变化，显示默认信息或不检查if (!text || text === lastCheckedText) {if (!text) {resultsDiv.innerHTML = '<p class="correct">No spelling errors detected</p>';}return;}// 5. 显示加载动画resultsDiv.innerHTML = `<div class="loading"><div class="spinner"></div><span>Checking spelling...</span></div>`;// 6. 设置防抖，等待800毫秒没有输入再发送请求debounceTimer = setTimeout(() => {checkSpelling(text);}, 800);});// 7. 异步调用API检查拼写async function checkSpelling(text) {lastCheckedText = text;try {const response = await fetch('https://api.languagetool.org/v2/check', {method: 'POST',headers: {'Content-Type': 'application/x-www-form-urlencoded','Accept': 'application/json'},body: new URLSearchParams({text: text,language: 'en-US',enabledOnly: 'false'})});if (!response.ok) {throw new Error(`API request failed with status ${response.status}`);}const data = await response.json();// 8. 显示结果displayResults(data);} catch (error) {console.error('Error checking spelling:', error);resultsDiv.innerHTML = `<div class="error">Error checking spelling: ${error.message}</div>`;}}// 9. 显示拼写错误的函数（你可以根据需求自己写）function displayResults(data) {if (data.matches.length === 0) {resultsDiv.innerHTML = '<p class="correct">No spelling errors detected</p>';} else {let html = '<ul>';data.matches.forEach(match => {html += `<li>Possible error at position ${match.offset}: ${match.message}</li>`;});html += '</ul>';resultsDiv.innerHTML = html;}}
</script>

说明

• 防抖(debounce)：用户输入后，程序等待800毫秒确认没继续输入才发请求，避免过多网络请求

• LanguageTool API 是免费的拼写和语法检查接口

• displayResults 函数负责把返回的错误信息显示给用户

• 可以加CSS样式做loading动画和错误显示的美化