AJAX 原理

什么是 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 对象

 *本文为鲲游北冥的原创文章，著作权归本人和饥人谷所有，转载务必注明来源