7-1前后分离（使用AJAX加载 CSS、JS、HTML、XML）

AJAX

• Async（异步） JavaScript And XML
• 只需要记住AJAX是一种技术，也是一种类似马后炮的总结
• AJAX的全部内容：用JS发请求和收响应（http里面的请求和响应）

1.背景

1.1 AJAX是浏览器上的功能

• 浏览器可以发请求，收响应
  如：输入baidu.com就是在向百度发了一个请求，然后页面展示是因为百度的HTML响应被浏览器接收了
• 浏览器有这个功能，可以把这个功能暴露给JS的开发者
• 达到：用JS来控制浏览器的发请求和收响应
• 于是：浏览器就在 window 上添加了一个 XMLHttpRequest 的全局函数
• 用这个构造函数可以构造出一个对象
• JS通过这个对象来实现：控制浏览器的发请求和收响应

1.2 准备一个服务器

• 浏览器需要向服务器发送请求
• 利用 server.js 做一个最简单的服务器，访问什么路径就可以通过JS来控制
  这是服务器端的JS，这不算AJAX，算是node.js
• 终端运行：node server.js
• 给一个端口： node server.js 8888 启动
• 问题：如果在里面修改了内容，想要重新接收必须要重启 node server.js 很麻烦
• 解决：安装node-dev （开发时用的命令，可以自动重启）
  yarn global add node-dev
  安装之后用 node-dev代替node，就会自动重启，方便开发
• 这样我们根据访问的路径不同，就会返回不同的东西
• 添加 index.html / main.js 两个路由
  什么是路由：就是一个if else
  网页上路径请求了什么，这边路径就走什么，返回相应的响应
  
  

1.3 Node.js和server.js是什么？

• node.js是什么？Node.js是什么？
  1.Node.js 是一个基于 Chrome V8 引擎的JS运行环境，或者是一个JS语言的解释器
  2.最初是用来写后端服务器的，Node.js诞生后JS就可以前后通吃
  3.Node.js是react和Vue这些开发环境的基础
  4.以前的JS文件只能在浏览器中运行，现在可以提前在Node.js中运行，两者是没有任何关系，且有一定差异的（比如：document 对象是用来操作页面的，所以只有浏览器环境下才可以直接使用。但是如果是要放到 Node.js 环境下运行代码，就不要使用 document 。同样的道理，Node.js 中可以直接拿来使用的 http 对象，在浏览器环境下就没有。）
• 在server.js文件中，response.write()里面只接收字符串，可以把HTML内容加反引号直接写在里面
  1。但我们通常习惯采用新建一个public目录，将所有前段文件都放到里面，然后将 index.html 文件放到 public
  2。想要把 index.html 文件write进去要使用 node.js的一个模块，可以把文件变成字符串（因为write只接收字符串）
  response.write(fs.readFileSync(public/index.html))
  这样写就可以把文件读成字符串，然后把字符串传递给write
  3。平时写的文件以为是文件，但对于Node.js服务器来说就是字符串

2.挑战1

2.1 加载CSS

• 以前我们在HTML中使用link标签
  1.引入CSS
  2.然后在服务器中增加一个 style.css 的路由
  3.即可请求到CSS文件，并渲染到HTML中
• 现在可以用AJAX加载CSS
  1.不在HTML中使用link标签
  2.使用JS来请求CSS

2.2 4个步骤

• 创建 HttpRequest 对象（全称是：XMLHttpRequest）
  1.就是创建一个 http请求 对象
  2.const request = new XMLHttpRequest()
• 调用对象 open 的方法
  1.request.open();
  2.对于open的用法可以去找mdnMDN open，然后复制语法第一个（千万不要用后面的参数）
  3.request.open(method, url);
  4.request.open('GET','/style.css')
  ——获取资源都用get,后面是获取资源的路径
• 监听监听它的成功和失败
  1.一个请求可能成功，也可能失败
  2.request 的 onload & onerror 事件
  ——onload和onerror不能完美适配AJAX
  ——专业前端会改用 onreadystatechange 事件
  ——在事件处理函数里操作CSS文件内容
• 调用对象的 send 方法（发送请求）

const request = new XMLHttpRequest()  //创建对象
request.open('GET','/style.css') //调用open
request.onload=()=>{ //监听请求成功与否
  console.log('成功了')
}
request.onerror=()=>{
  console.log('失败了')
}
request.send() //发送请求

2.3 请求成功后如何生效

• 在页面上创建一个按钮来控制发送请求
  监听它的点击事件即可
• 请求成功CSS文件之后能否拿到内容？
  可以，拿到请求的响应内容：request.response（可以log出来）
• 如何生效：在HTML创建一个style标签，将CSS内容放进去

getCSS.onclick = () => {//监听按钮，点击之后就会进行4步骤
  const request = new XMLHttpRequest(); 
  request.open("GET", "/style.css"); 
  //监听request调用成功还是失败
  request.onload = () => {//请求成功完成时调用的函数。
    //创建 style 标签
    const style = document.createElement('style')
    //填写 style 内容
    style.innerHTML = request.response
    //插到 头 里面
    document.head.appendChild(style)
  };
  request.onerror = () => {
    console.log("失败了");
  };
  request.send(); //发送请求
}; 

3.挑战2
3.1 加载JS

• 以前在HTML中写：
  记得在server.js中做 2.js 的路由
• 现在用AJAX
  1.不用 script 标签，直接在JS里面请求

3.2 步骤

• 还是四个步骤
• 和请求CSS文件一样，只是把相关参数名和路径改了

3.3 代码生效

• 创建一个 script 标签
• 填写内容，插入到身体body里面

//创建 script 标签
const script = document.createElement('script')
//填写 script 内容
script.innerHTML = request.response
//插到 身体 里面
document.body.appendChild(script)

4挑战3

4.1 加载HTML

• 以前不会加载HTML
• 现在要加载 3.html 文件
  1.如果页面中有一块内容是动态展示，需要用户点击之后才动态展示
  2.CSS可以直接展示在页面中，而JS可以执行
  3.还是需要创建 3.html的路由

4.2 步骤

• 和前两者相同，创建一个 3.html
• 请求成功之后，在控制台的Network中
  Preview：预览响应内容
  Response：查看响应的源代码
  

4.3 生效

• 在页面中创建一个div，将HTML放到里面

const div = document.createElement('div')
div.innerHTML = request.response
document.body.appendChild(div)

• 把页面拆成不同的部分，然后用户点击的时候去请求这个部分的HTML
• 以前可以用 link 请求 CSS，用 script 请求 JS，但不能单独请求一小块 HTML（iframe是请求一个新的窗口，更加臃肿）
• 而AJAX更加轻量级，想请求什么都可以

5.如果触发错误怎么办？

• 当代码出现错误（比如open输入路径不对），服务器就会响应出状态码为404
  
• onerror没有触发：原因是onerror并没有很好的匹配AJAX，onerror是先发明的，一开始用来监听 图片 文件 之类的请求失败
• 解决办法：专业前端会改用 onreadystatechange 事件（因为 onload 和 onerror 太简陋了，不够用）MDN onreadystatechange

5.1 onreadystatechange

• XMLHttpRequest.onreadystatechange
• 只要 readyState 属性发生变化就会触发
• readyState：一共有5个值
  
  
• 不用 onload 和 onerror，改成 onreadystatechange
  request.onreadystatechange = () =>{}
• 在函数中打出 request.readyState，由于监听的时候已经open调用了，因此没有0和1
  send()：发送请求为2
  开始响应：3
  响应结束：4
  
• 一般只在下载完成后才能获得响应response，也就是readyState=4
• 但当请求失败（如：路径写错了），请求也会完成得到响应，不过是失败的响应
• 如何区分响应式成功还是失败？
  通过状态码：requst.status
• 监听状态码：
  1.当状态码为 200~299时，以2开头一般表示请求成功，执行生效标签
  2.当状态码不是两百多，就是加载失败
  

getJS.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "/2.js"); // readyState = 1

  request.onreadystatechange = () => {
    console.log(request.readyState);
    if (request.readyState === 4) { //下载完成
      if (request.status >= 200 && request.status < 300) {
        const script = document.createElement("script");
        script.innerHTML = request.response;
        document.body.appendChild(script);
      } else {
        alert("加载 JS 失败");
      }
    }
  };
  request.send(); // readyState = 2
};

6.加载XML

• 之前不加载XML
• 因为JSON还没出生，只能用XML传递数据
  JSON是一种取代XML的数据结构

6.1 步骤

• 创建一个 4.xml文件（直接去mdn复制一个example）
• 其他步骤同上，记得使用 onreadyStatechange监听
• 有一个特别之处
  可以直接请求XMLrequest.responseXML（因为AJAX的发明之初就是为了XML，只是后来JSON替代了它）
  这样打出来的直接就是一个 dom 对象（因为dom对象应用于两种对象，HTML和XML）
• 就可以直接声明 dom对象，和HTML一样对于XML可以获取到里面的标签

<message>
    <warning>
         Hello World
    warning>
message>

getXML.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "/4.xml");
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      if (request.status >= 200 && request.status < 300) {
        const dom = request.responseXML;
        const text = dom.getElementsByTagName("warning")[0].textContent;
        console.log(text.trim()); //trim没有周围的回车
      }
    }
  };
  request.send();
};

7.总结

7.1 HTTP是一个框，什么都能往里装

• 可以装 HTML、CSS、JS、XML…
• 记得设置正确的 Content-Type
• 只要知道怎么正确解析这些内容，就可以使用这些内容

7.2 解析方法

• 得到 CSS 后生成 style 标签
• 得到 JS 后生成 script 标签
• 得到 HTML 后生成 innerHTML 和 DOM API
• 得到 XML 后使用 responseXML 和 DOM API
• 不同类型的数据有不同类型的解析办法

7.3 AJAX

• AJAX的厉害之处：只要HTTP支持，就都可以请求