一、AJAX是干什么的

（1）简介

AJAX全称为（Asynchronous JavaScript and XML），是一套综合了多项技术的浏览器端网页开发技术。
简单点说，就是通过JS发请求和接受响应
AJAX是浏览器上的功能，浏览器在window上加了一个XMLHttpRequest函数
用这个构造函数（类）可以构造出一个对象，JS通过它实现发请求和接受响应

（2）怎么用

准备一个服务器，这里我使用的是server.js文件作为我的服务器
然后打开终端，用node server.js 8888启动服务器
添加index.html 和 main.js 两个路由
需要注意的是，每次更新了代码都需要重启

    if (path === '/index.html') {
        response.statusCode = 200
        response.setHeader('Content-Type', 'text/html;charset=utf-8')
        response.write(fs.readFileSync('public/index.html'))
        response.end()
    } else if (path === '/main.js') {
        response.statusCode = 200
        response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
        response.write(fs.readFileSync('public/main.js'))
        response.end()
    }else {
        response.statusCode = 404
        response.setHeader('Content-Type', 'text/html;charset=utf-8')
        response.write(`你输入的路径不存在对应的内容`)
        response.end()
    }

这样就实现了用JS发请求和接受响应
但这样不是通过AJAX接受的响应

二、用AJAX加载文件

四个步骤

不管用AJAX加载什么都不能跳过这四个步骤
创建HttpRequest对象（全称是XMLHttpRequest）
调用对象的open方法
监听对象的onload&onerror事件，推荐用onreadyStateChange事件，在事件处理函数内操作CSS对象，更专业，更好用
调用对象的send方法（发送请求）
其他的方法可以看onreadystatechange接口参考 | MDN
监听onload&onerror事件代码

    const request = new XMLHttpRequest()
    request.open('GET', '/style.css')
    request.onload = () => { 
        console.log('请求成功啦')
    }
    request.onerror = () => { 
        console.log('请求失败啦')
    }
    request.send() // 发送请求

监听onreadyStateChange事件代码

    const request = new XMLHttpRequest()
    request.open('GET', '/style.css')
    request.onreadystatechange = () => {
        console.log(request.readyState); 
        if (request.readyState === 4) { //下载完成了再做操作，因为没下载完做操作没有意义
            if (request.status >= 200 && request.status < 300) /* 以2开头的都表示成功 */ {
                const style = document.createElement('style') // 创建style 标签
                style.innerHTML = request.response // 填写 style 内容
                document.head.appendChild(style) // 把标签插入到头里面
            } else {
                alert('加载 CSS 失败')
            }

        }
    }
    request.send() // 发送请求 readyState = 2

readyState能表示一个请求的一生

进度值
new XMLHttpRequest 函数时值为 0
调用open方法时值为 1
发送send时值为 2
开始下载第一个信息时值为 3
下载完成时值为 4
status表示状态码
一般只认为200-300之间的状态码为成功

进度	值
new XMLHttpRequest 函数时	值为 0
调用open方法时	值为 1
发送send时	值为 2
开始下载第一个信息时	值为 3
下载完成时	值为 4

ⅡⅢⅣⅤⅥ

用AJAX加载CSS

以前加载CSS用的是<link rel = stylesheet href="1.css"/>
接下来用AJAX试一下

getCss.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/style.css')
    request.onreadystatechange = () => {
        //下载完成，但不知道是成功 2xx 还是失败 4xx 5xx
        console.log(request.readyState);
        if (request.readyState === 4) { //下载完成了再做操作，因为没下载完做操作没有意义
            if (request.status >= 200 && request.status < 300) /* 以2开头的都表示成功 */ {
                const style = document.createElement('style') // 创建style 标签
                style.innerHTML = request.response // 填写 style 内容
                document.head.appendChild(style) // 把标签插入到头里面
            } else {
                alert('加载 CSS 失败')
            }

        }
    }
    request.send() // 发送请求 readyState = 2
}

用AJAX加载XML

getXml.onclick = () => {
    const request = new XMLHttpRequest();
    request.open('GET', '/4.xml')
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200) {
            const dom = request.responseXML //有这个方法可以直接用来转化XML
            const text = dom.getElementsByTagName('warning')[0].textContent
            console.log(text.trim() /*去掉空格和回车*/ );
        }
    }
    request.send()
}

用AJAX加载JSON

getJson.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/5.json')
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200) {
            console.log(request.response);
            const object = JSON.parse(request.response) //把符合json语法的字符串变成对象或其他东西
            console.log(object);
            myName.textContent = object.name
        }
    }
    request.send()
}

总结

HTTP是个框，什么都能往里装，可以装HTML、CSS、js、XML...
记得设置正确的Content-Type，这是一个好习惯
只要知道怎么解析这些内容，就可以使用这些内容

解析方法

得到CSS后生成style标签，插入
得到JS后生成script标签，插入
得到HTML后使用innerHTML和DOM api
得到XML后使用responseXML和DOM api
不同类型的文件有不同类型的解析方法

三、JSON入门

JSON是一门语言

全称为JavaScript Object Notation JS对象标记语言

语法

JSON中文官网看铁轨图

支持的数据类型

string —— 只支持双引号，不支持单引号和无引号
number —— 支持科学计数法
bool —— true 和 false
null - 没有 undefined
Object
array
只有这六种，需要和JS七种数据类型区别开
不支持函数，不支持变量（不支持引用）

`window.JSON`

`JSON.parse`

将复合JSON语法的字符串转换成js对应类型的数据
JSON字符串 => JS数据
由于JSON只有六种数据类型，所以转换成的数据也只有6种
如果不符合JSON语法，则直接抛出一个Error对象
一般用try和catch捕获错误

let object
try {
    object = JSON.parse(`{'name':'jackey'}`)
} catch (error) {
    console.log('出错了，错误详情是')
    console.log(error);
    object = {
        'name': 'no name'
    }
}

// try catch 捕获错误
console.log(object);

`JSON.stringify`

是JSON.parse的逆运算
JS数据 => JSON字符串
由于js的数据类型比JSON多，所以不一定能成功
如果失败，就抛出一个Error对象
也可以用try和catch捕获错误

AJAX原理学习和JSON入门学习

目录

AJAX是干什么的

用AJAX加载文件

JSON入门

一、AJAX是干什么的

（1）简介

（2）怎么用

二、用AJAX加载文件

四个步骤

用AJAX加载CSS

用AJAX加载XML

用AJAX加载JSON

总结

解析方法

三、JSON入门

JSON是一门语言

语法

支持的数据类型

`window.JSON`

`JSON.parse`

`JSON.stringify`