AJAX 的相关知识，内容包括 AJAX 概念、Node.js、使用 AJAX 方式加载不同内容、JSON 概念、JSON的使用。
一、AJAX 概念
AJAX 全名是“Async JavaScript and XML”，它的内容为“JS 发请求和收响应”。
1. AJAX 是浏览器的功能
浏览器可以发请求，收响应，浏览器在 window 上加了一个 XMLHttpRequest 函数，用这个构造函数（类）可以构造一个对象 Node.js，JS 通过它实现发请求，收响应
使用 server.js 作为我们的服务器，下载或复制代码即可用 node server.js 8888 启动，添加 index.html / main.js 两个路由。
2. 我对 AJAX 的理解
我原本以为 AJAX 的内容影响着后端代码的书写，后来发现是我错了，在后端照样还是要写不同的路径无变化，AJAX 不影响后端，照样还是前端里面的操作。
AJAX 是把写在 HTML 中有相关路径内容，转移到 JS 里，HTML 里面做一个标记或者不做，当有请求时再给它显示出来到 HTML。
AJAX 可以做到轻量级的请求。
二、Node.js
复习一下 HTTP 知识中使用 node.js 设置响应。
if (path ==='/index.html'){
response.statusCode=200
response.setHeader('Content-Type', 'text/html;charset=utf-8')
response.write(`balabala`)
response.end()
} else if (path ==='/style.css'){
response.statusCode=200
response.setHeader('Content-Type', 'text/style;charset=utf-8')
response.write(`balabal`)
response.end()
} else if(path ==== 'main.js'){
response.statusCode=200
response.setHeader('Content', 'text/javascript;charset=utf-8')
response.write('balabala')
response.end()
} else{
response.statusCode=404
response.setHeader('Content', 'text/html;charset=utf-8')
response.write(`你访问的页面不存在`)
}
三、使用 AJAX 方式加载不同内容
1. 加载 CSS
getCSS.onclick = () => {
const request = new XMLHttpRequest();
request.open("GET", "/style.css");
request.onreadystatechange = () => {
console.log(request.status);
// 下载完成但不知道是成功 200 - 300，还是失败 4xx,5xx
if (request.readyState === 4) {
if (request.status >= 200 && request.status < 300) {
console.log("成功了");
// 创建 style 标签
const style = document.createElement("style");
// 填写 style 内容
style.innerHTML = request.response;
// 插到头里面
document.head.appendChild(style);
} else {
alert("加载CSS失败");
}
}
};
request.send();
};
2. 加载 JS
getJS.onclick = () => {
const request = new XMLHttpRequest();
request.open("GET", "/2.js");
request.onload = () => {
// 创建 script 标签
const script = document.createElement("script");
// 填写 script 内容
script.innerHTML = request.response;
// 插入到身体里
document.body.appendChild(script);
};
request.error = () => {};
request.send();
};
3. 加载 HTML
getHTML.onclick = () => {
const request = new XMLHttpRequest();
request.open("GET", "/3.html");
request.onload = () => {
console.log(request.response);
const div = document.createElement("div");
div.innerHTML = request.response;
document.body.appendChild(div);
};
request.error = () => {};
request.send();
};
4. 加载 XML
getXML.onclick = () => {
const request = new XMLHttpRequest();
request.open("GET", "4.xml");
request.onreadystatechange = () => {
if (request.readyState === 4) {
if (request.status >= 200 && request.status < 300) {
const dom = request.responseXML;
const text = dom.getElementsByTagName("warning")[0].textContent;
console.log(text.trim());
}
}
};
request.send();
};
四、JSON 概念
JSON 是一门语言，跟 HTML、CSS、XML、JS 一样，是一门独立的语言
JSON 不是编程语言，是标记语言，跟 HTML、XML、Markdown 一样，用来展示数据
1. JSON 语法
中文官网：→ 点击这里
一页纸就说明了 JSON 的所有语法
2. JSON 支持的数据类型
string -- 只支持双引号，不支持单引号和无引号
number -- 支持科学计数法
bool -- true 和 false
null -- 没有 undefined
object
array
// 就这六种，注意跟 JS 的七种数据类型区别开来
不支持函数，不支持变量（所以也不支持引用）
五、JSON 的使用
1. 加载 JSON
四个步骤：
- 创建 HttpRequest 对象（全称是 XMLHttpRequest）
- 调用对象的 open 方法
- 监听对象的 onreadystatechange 事件
- 调用对象的 send 方法（发送请求）
// 举例
// main.js
getJSON.onclick = () => {
const request = new XMLHttpRequest();
request.open("GET", "/5.json");
request.onreadystatechange = () => {
if (request.readyState === 4) {
if (request.status >= 200 && request.status < 300) {
const object = JSON.parse(request.response);
myName.textContent = object.name;
}
}
};
request.send();
};
2. window.JSON
1. JSON.parse
将符合 JSON 语法的字符串转换成 JS 对应类型的数据，JSON 字符串 => JS 数据，由于 JSON 只有六种类型，所以转成的数据也只有 6 种，如果不符合 JSON 语法，则直接抛出一个 Error 对象，一般用 try catch 捕获错误。
2. JSON.stringify
是 JSON.prase 的逆运算，JS 数据 => JSON 字符串，由于 JS 的数据类型比 JSON 多，所以不一定能成功，如果失败，就抛出一个 Error 对象。
「资料来源：©饥人谷」
