什么是 AJAX?
AJAX 是浏览器上的功能
- 可以发请求,收响应
- 浏览器在 window 上加了 XMLHttpRequest 函数
- 用这个构造函数可以构造出一个对象
- JS 通过它实现发请求,收响应
四个步骤
- 创建 HttpRequest 对象 (全称为 XMLHttpRequest)
const request = new XMLHttpRequest()
- 调用对象的 open 方法
request.open("GET", "URL")
- 监听对象的 onload & onerror 事件
专业前端会改用 onreadystatechange 事件
在事件处理函数里操作文件内容//普通版 request.onload = () => { const div = document.createElement('xxx') xxx.innerHTML = request.response document.body.appendChild(xxx) } request.onerror = () => { console.log('失败了') //专业版 request.onreadystatechange = () => { if (request.readyState === 4) { if (request.status >= 200 && request.status < 300) { const style = document.createElement('xxx') xxx.innerHTML = request.response document.body.appendChild(xxx) } else { console.log("加载css失败") } } }
- 调用对象的 send 方法 (发送请求)
request.send()
解析方法
- 得到 CSS 之后生成 style 标签
- 得到 JS 之后生成 script 标签
- 得到 HTML 之后使用 innerHTML 和 DOM API
- 得到 XML 之后使用 responseXML 和 DOM API
什么是 JSON ?
JSON (JavaScript Object Notation) 是一种独立的标记语言,用于展示数据
JSON 建构于两种结构
- “名称/值”对的集合
- 值的有序列表,在大部分语言中,它被理解为数组
支持的数据类型
- string: 只支持双引号,不支持单引号和无引号
- number: 支持科学计数法
- bool: true 和 false
- null: 没有undefined
- object
- array
- 不支持函数、变量、引用
JSON.parse
- 将符合 JSON 语法的字符串转换成 JS语法对应的数据
- JSON 字符串 => JS 数据
- 由于 JSON 只有6种类型,所以转换成的数据也只有6种
- 如不符合 JSON 语法,则直接抛出一个 error 对象
- 一般用 try catch 捕获错误
JSON.stringify
- 是 JSON.parse 的逆运算
- JS 数据 => JSON 字符串
- 由于 JS 的数据类型比 JSON 多,所以不一定成功.
- 如果失败,就会抛出一个 error 对象
*本文为鲲游北冥的原创文章,著作权归本人和饥人谷所有,转载务必注明来源