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

发布时间:2023-10-14 12:00

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
    网页上路径请求了什么,这边路径就走什么,返回相应的响应
    \"7-1前后分离(使用AJAX加载
    \"7-1前后分离(使用AJAX加载

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:查看响应的源代码
    \"7-1前后分离(使用AJAX加载

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
    \"7-1前后分离(使用AJAX加载
  • onerror没有触发:原因是onerror并没有很好的匹配AJAX,onerror是先发明的,一开始用来监听 图片 文件 之类的请求失败
  • 解决办法:专业前端会改用 onreadystatechange 事件(因为 onload 和 onerror 太简陋了,不够用)MDN onreadystatechange

5.1 onreadystatechange

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

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支持,就都可以请求

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号