前后端分离

最新推荐文章于 2022-09-20 16:45:57 发布

芊芊子

最新推荐文章于 2022-09-20 16:45:57 发布

阅读量904

点赞数 1

文章标签： ajax json javascript

本文链接：https://blog.csdn.net/qq_57574258/article/details/122217487

版权

如何用js发送HTTP请求

ajax （Asynchronous Javascript And Xml），俗称的ajax就是指通过js 发送HTTP请求并处理得到的响应

ajax有很多种，我们会其中一种即可: 使用 XMLHttpRequest 对象进行处理

var xhr = new XMLHttpRequest();
xhr.open("GET". " /user-list.json");//发送GET或者POST都可以
xhr.send(); /发送请求

在这里插入图片描述

为了安全，默认只允许在同域页面下发送ajax，如 www.baidu.com/hello，只能在www.baidu.com的页面上发送ajax

如何处理接收到的响应

XMLHttpRequest 提供了几种事件，但只关心load事件

oReq.addEventListener("load", reqListener);
oReq.onload = reqListener;

在响应成功时执行：

xhr.onload = function(){...}

xhr.send()之前，为xhr 的load事件绑定处理逻辑

xhr.onload = function() {
xhr.responseText;//得到响应正文
this.responseText;//得到响应正文
//xhr == this;
};

在这里插入图片描述
JSON的优势
在js可以通过json格式的文本，直接得到js对象、数组、其他类型的数据

JSON.parse(json文本);//解析JSON文本，得到js数据

xhr.onload = function () { 
    var r = JSON.parse(this.responseText); 
    console.log(r); 
}

数组样式
在这里插入图片描述

结合js的修改DOM的功能+ ajax的功能，我们可以做到利用js，从后端获取数据，并修改页面展示的效果!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送ajax</title>
</head>
<body>
  <table border="1">
      <thead>
          <tr>
              <th>ID</th>
              <th>姓名</th>
              <th>年龄</th>
          </tr>
      </thead>
      <tbody>

      </tbody>
  </table>

  <script>
      var tbody=document.querySelector("tbody");
      alert("下一步，发起向后端的请求");
      //准备发送 GET /user-list.json请求
      var xhr=new XMLHttpRequest();
      xhr.open("GET","/user-list.json");
      xhr.onload=function(){
          alert("服务端成功响应，下一步，修改DOM结构");
          var userList=JSON.parse(this.responseText);
          console.log(userList);

          //遍历userList
          for(var i in userList){
              var user=userList[i];
              console.log(user);
              alert("点击，添加新用户到table中");

              //修改DOM树，浏览器并不能保证立即看到修改效果
              var html=`<tr><td>${user.uid}</td><td>${user.name}</td><td>${user.age}</td></tr>`
              tbody.innerHTML+=html;
          }
          alert("所有用户都添加到了table中，实现了利用js动态生成网页内容的效果");
      }
      xhr.send();
  </script>
</body>
</html>

在这里插入图片描述

前后端分离

前后端分离:前端和后端之间，以HTTP协议作为数据载体，以JSON作为数据格式，进行职责分离的一种技术方案!（当下流行的前后端分离的技术方案90%以上的做产品都是前后端方式）

在这里插入图片描述

由于前端的逻辑变得负责了，前端也出现了很多框架，降低应用复杂性比如vue …
后端基本退化成类似数据库管理系统的角色只负责提供权限校验、数据的增删查改等功能
开发一个大型产品是需要很多人一起配合完成的，比如中型项目，需要5-10个人
早期方案，后端负责生成HTML内容，并且需要完成基本的js操作(5-10个人需要学html、css、 js、java)
前后端分离的方案:后端负责提供数据，前端负责获取、展示数据
【前端组(5人)】 : html、css、js、http
【后端组(5人)】: java、http

通过ajax向后端发送数据

发送JSON格式的数据
在这里插入图片描述
举例：

  <script>
      var data={
          id:999,
          name:"走走走",
          age:19
      };
      //把js中的数据序列化成文本格式
      dataStr=JSON.stringify(data);
      var xhr=new XMLHttpRequest();
      xhr.open("post","/submit-json");
      xhr.setRequestHeader("Content-Type","application/json");//请求体的格式是JSON
      xhr.send(dataStr);//把 dataStr作为响应体发送出去
  </script>