AJAX的原理与JSON小概
它的全部内容就是：用JS发请求和收响应
加载CSS
1、创建XMLHttpRequest对象
2、调用对象的open方法
如：
request.open("GET", "/style.css")
//一般只用前两个参数，能不用到后面的就别用
详见：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/open，通过文档进行修改
3、监听对象的 onload &（与） onerror 事件
（有能力可以改用 onreadystatechange 事件，在事件处理函数里操作CSS文件内容）
4、调用对象的 send 方法（发送请求）
例如：
getCss.onclick = () => {
const request = new XMLHttpRequest()
request.open("GET", "/style.css")
request.onload = () => {
const style = document.createElement('style')//在页面里创建style标签
style.innerHTML = request.response //把获取到的style内容放进刚才创建的style标签
document.head.appendChild(style) //把style插入到head里
}
request.onerror = () => {
console.log('No')
}
request.send()
}
加载JS
1、创建XMLHttpRequest对象
2、调用对象的open方法
如：
request.open("GET", "/two.js")
//一般只用前两个参数，能不用到后面的就别用
详见：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/open，通过文档进行修改
3、监听对象的 onload &（与） onerror 事件
（有能力可以改用 onreadystatechange 事件，在事件处理函数里操作CSS文件内容）
4、调用对象的 send 方法（发送请求）
getJs.onclick = () => {
const request = new XMLHttpRequest()
request.open('GET','/two.js')
request.onload = () => {
const script = document.createElement('script')
//创建script标签
script.innerHTML = request.response
//填写script内容
document.body.appendChild(script)
//插入到body里
}
request.onerror = () => {}
request.send()
}
ps:我们可以看到与上文中加载css的方法基本是一样的。
加载HTML
1、创建XMLHttpRequest对象
2、调用对象的open方法
如：
request.open("GET", "/three.html")
//一般只用前两个参数，能不用到后面的就别用
详见：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/open，通过文档进行修改
3、监听对象的 onload &（与） onerror 事件
（有能力可以改用 onreadystatechange 事件，在事件处理函数里操作CSS文件内容）
4、调用对象的 send 方法（发送请求）
getHtml.onclick = () => {
const request = new XMLHttpRequest()
request.open('GET','/three.html')
request.onload = () => {
const div = document.createElement('div')
//创建一个div
div.innerHTML = request.response
//把获取到的内容放进刚才创建的div里
document.body.appendChild(div)
//插入到body里
}
request.onerror = () => {}
request.send()
}
ps:我们可以看到与上文中加载css、js的方法基本是一样的,请多练习形成肌肉记忆
XMLHttpRequest.onreadystatechange
首先我们需要知道，它会在readyState属性发生改变时被触发
readyState：
值 状态 描述
0 UNSENT 代理被创建，但尚未调用 open() 方法。
1 OPENED open() 方法已经被调用。
2 HEADERS_RECEIVED send() 方法已经被调用，并且头部和状态已经可获得。
3 LOADING 下载中； responseText 属性已经包含部分数据。
4 DONE 下载操作已完成。
用大白话理解readyState
当我们理解readyState后，我们就可以尝试使用onreadystatechange完成加载css、js、html.......它们了。
例如：
getHtml.onclick = () => {
const request = new XMLHttpRequest()
request.open('GET', '/three.html')
request.onreadystatechange = () => {
if (request.readyState === 4) {
if (request.status >= 200 && request.status < 300) {
const div = document.createElement('div')
//创建一个div
div.innerHTML = request.response
//把获取到的内容放进刚才创建的div里
document.body.appendChild(div)
//插入到body里
}else{
alert('失败')
}
}
}
PS:为什么使用200到300这个区间判定，因为一般成功的请求都是200到300这个区间，错误的话一般是400到599这一类的
加载XML
getXML.onclick = () =>{
const request = new XMLHttpRequest()
request.open('GET','/four.xml')
request.onreadystatechange = () => {
if(request.readyState === 4){
if(request.status >= 200 && request.status < 300){
const dom = request.responseXML
//dom对象由于可以用于HTML和XML两种文档，所以这里用dom表示
const text = dom.getElementsByTagName('warning')[0].textContent
//获取到warning标签内的内容（因为是伪数组，所以要加0）
console.log(text.trim())
//加.trim()取消空格和回车，只保留内容
}
}
}
request.send()
}
小概JSON
一、JSON是什么
JSON跟HTML、CSS、XML、JS一样，是一门独立的语言
JSON不是编程语言，而是标记语言。跟HTML、XML、Markdown一样，是用来展示数据的
JSON的语法，可以看：http://json.org/json-zh.html
二、JSON支持的六种数据类型
string（只支持双引号）
number（支持科学记数法）
bool（true和false）
null（不支持undefined）
object
array
PS：不支持函数，不支持变量（所以也不支持引用）
加载JSON
getJSON.onclick= () => {
const request = new XMLHttpRequest()
request.open('GET','/five.json')
request.onreadystatechange = () =>{
if(request.readyState === 4){
if(request.status >= 200 && request.status < 300){
const object = JSON.parse(request.response)
//把json的内容装入object中。 JSON.parse把获取到的json数据类型转换成合适的js类型，这里转换为了对象，但是不代表只能转换成对象
myName.textContent = object.name
}
}
}
request.send()
}
（1）JSON.parse
将符合json语法的字符串转换成js对应的类型
由于json只有六种类型，所以转换成的数据也只有六种类型。
如果不符合json语法，则会直接抛出一个Error
（2）JSON.stringify
它是JSON。parse的逆运算
将JS数据转换为json字符串，由于js数据类型多于json，所以不一定成功，失败会抛出一个Error
（3）try....catch捕获错误
try....catch捕错
捕获到错误后，不会影响下面的代码的，它自己消化掉了
