前后端分离

前后端分离,第1张

前后端分离 如何用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,从后端获取数据,并修改页面展示的效果!



    
    发送ajax


  
      
          
              ID
              姓名
              年龄
          
      
      

      
  

  





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

  • 由于前端的逻辑变得负责了,前端也出现了很多框架,降低应用复杂性比如vue …
    后端基本退化成类似数据库管理系统的角色只负责提供权限校验、数据的增删查改等功能

  • 开发一个大型产品是需要很多人一起配合完成的,比如中型项目,需要5-10个人
    早期方案,后端负责生成HTML内容,并且需要完成基本的js *** 作(5-10个人需要学html、css、 js、java)
    前后端分离的方案:后端负责提供数据,前端负责获取、展示数据
    【前端组(5人)】 : html、css、js、http
    【后端组(5人)】: java、http

通过ajax向后端发送数据

发送JSON格式的数据

举例:

  

在java中,把所有的外设数据源(非内存数据)都抽象成一个个的输入流〈(InputStream)

响应的重定向(redirect)

direct(指定方向) ,重定向也叫跳转(从浏览器看起来的行为)

重定向的概念分类:

  1. 临时重定向(买白菜,白菜最近没有,3、5天以后才有,最近先买菠菜)
  2. 永久重定向(买石头记,因为改名,以后应该永远买红楼梦)

是否保留方法:

  1. 保留方法的重定向
  2. 不保留方法的重定向

HTTP协议怎么实现重定向:
通过状态码(3XX)+响应头(Location:重定向后的资源URL)

3XX =>区分:永久vs临时,保留vs不保留

  • 请求发表文章资源时,需要用户先登录
    当用户没有登录时,重定向到登陆页面
    当用户登录成功时,重定向到首页

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5685491.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-17
下一篇 2022-12-17

发表评论

登录后才能评论

评论列表(0条)

保存