AJAX的知识梳理
【目录】
一、用AJAX加载CSS
二、用AJAX加载JS
三、用AJAX加载HTML
四、用AJAX加载XML
五、用AJAX加载JSON
【正文】
AJAX的全部内容概括来说的话就是用JS发请求和收响应。
全称 : Async JavaScript And XML
背景 : AJAX是浏览器上的功能
1、浏览器可以发请求，收响应
2、浏览器在window上加了一个XMLHttpRequuest函数
3、用这个构造函数（类）可以构造出一个对象
4、JS通过它实现发请求，收响应
一、用AJAX加载CSS
四个步骤
1、创建HttpRequest对象(全称XMLHttpRequuest)
2、调用对象的open方法
3、监听对象的onload & onerror事件（一般会采用onreadystatechaange事件，在事件处理函数里操作CSS文件内容）
4、调用对象的send方法（发送请求）
代码如下:
getCSS.onclick = () => {
const request = new XMLHttpRequest()
request.open('GET', '/style.css')
request.onreadystatechange = () => {
//下载完成，但是不知道是成功2xx，还是失败4xx 5xx
if (request.readyState === 4) {
if (request.status >= 200 && request.status < 300) {
//创建style标签
const style = document.createElement('style')
//填写style内容
style.innerHTML = request.response
//插到头里面
document.head.appendChild(style)
} else {
alert('加载CSS失败')
}
}
}
request.send()
}
二、用AJAX加载JS
四个步骤
1、创建HttpRequest对象(全称XMLHttpRequuest)
2、调用对象的open方法
3、监听对象的onreadystatechaange事件，在事件处理函数里操作JS文件内容
4、调用对象的send方法（发送请求）
代码如下:
getJS.onclick = () => {
const request = new XMLHttpRequest();
request.open("GET", "/2.js");
request.onreadystatechange = () => {
//下载完成，但是不知道是成功2xx，还是失败4xx 5xx
if (request.readyState === 4) {
if (request.status >= 200 && request.status < 300) {
// 创建 script 标签
const script = document.createElement("script");
// 填写 script 内容
script.innerHTML = request.response;
// 插到身体里
document.body.appendChild(script);
} else {
alert('加载CSS失败')
}
}
}
request.send();
};
三、用AJAX加载HTML
四个步骤
1、创建HttpRequest对象(全称XMLHttpRequuest)
2、调用对象的open方法
3、监听对象的onreadystatechaange事件，在事件处理函数里操作HTML文件内容
4、调用对象的send方法（发送请求）
代码如下:
getHTML.onclick = () => {
const request = new XMLHttpRequest()
request.open('GET', '/3.html')
request.onreadystatechange = () => {
//下载完成，但是不知道是成功2xx，还是失败4xx 5xx
if (request.readyState === 4) {
if (request.status >= 200 && request.status < 300) {
//创建div标签
const div = document.createElement('div')
//填写div内容
div.innerHTML = request.response
//插入到身体里
document.body.appendChild(div)
} else {
alert('加载CSS失败')
}
}
}
request.send()
}
四、用AJAX加载XML
四个步骤
1、创建HttpRequest对象(全称XMLHttpRequuest)
2、调用对象的open方法
3、监听对象的onreadystatechaange事件，在事件处理函数里操作responseXML
4、调用对象的send方法（发送请求）
代码如下:
getXML.onclick = () => {
const request = new XMLHttpRequest()
request.open('GET', '/4.xml')
request.onreadystatechange = () => {
//下载完成，但是不知道是成功2xx，还是失败4xx 5xx
if (request.readyState === 4 && request.status === 200) {
const dom = request.responseXML
const text = dom.getElementsByTagName('warning')[0].textContent
console.log(text.trim())
}
}
request.send()
}
五、用AJAX加载JSON
1、什么是JSON？
全称 : JavaScript Object Notation
- JSON跟HTML、CSS、XML、JS一样，是一门独立的语言。
- JSON不是编程语言，是标记语言。跟HTML、XML、Markdown一样，用来展示数据
2、JSON一些语法图示
1
2
3
3、支持的数据类型
只有以下六种，注意跟JS的七种数据类型区分开，不支持函数，不支持变量（所以也不支持引用）
- string : 只支持双引号，不支持单引号和无引号
- number : 只支持科学计数法
- bool : true和false
- null : 没有undefined
- object
- array
用AJAX加载JSON同样需要四个步骤
1、创建HttpRequest对象(全称XMLHttpRequuest)
2、调用对象的open方法
3、监听对象的onreadystatechaange事件，在事件处理函数里使用JSON.parse
4、调用对象的send方法（发送请求）
代码如下:
getJSON.onclick = () => {
const request = new XMLHttpRequest
request.open('GET', '/5.json')
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
const object = JSON.parse(request.response)
myName.textContent = object.name
}
}
request.send()
}
总结
- HTTP是一个框，什么都可以往里面装
1、可以装HTML、CSS、JS、XML等
2、只要知道了如何解析这些内容，就可以使用这些内容 - 解析方法
1、得到CSS之后生成了style标签
2、得到JS之后生成了script标签
3、得到HTML之后使用innerHTML和DOM API
4、得到XML之后使用responseXML和DOM API
5、不同类型的数据有不同类型的解析方法
window.JSON
-
JSON.parse
1、将符合JSON语法的字符串转换成JS对应类型的数据
2、JSON字符串=>JS数据
3、由于JSON只有六种类型，所以转成的数据也只有6中
4、如果不符合JSON语法，则直接抛出一个Error对象
5、一般用try catch捕获错误 -
JSON.stringify
1、是JSON.parse的逆运算
2、JS数据=>JSON字符串
3、由于JS的数据类型比JSON多，所以不一定能成功
4、如果失败，就抛出一个Error对象
