标签：前后 重定向 分离 ajax js xhr JSON var
如何用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>
在java中，把所有的外设数据源（非内存数据）都抽象成一个个的输入流〈(InputStream)
响应的重定向(redirect)
direct(指定方向) ，重定向也叫跳转（从浏览器看起来的行为)
重定向的概念分类:
- 临时重定向（买白菜，白菜最近没有，3、5天以后才有，最近先买菠菜)
- 永久重定向（买石头记，因为改名，以后应该永远买红楼梦)
是否保留方法：
- 保留方法的重定向
- 不保留方法的重定向
HTTP协议怎么实现重定向:
通过状态码(3XX)＋响应头(Location:重定向后的资源URL)
3XX =>区分:永久vs临时,保留vs不保留
- 请求发表文章资源时，需要用户先登录
当用户没有登录时，重定向到登陆页面
当用户登录成功时，重定向到首页
标签：前后,重定向,分离,ajax,js,xhr,JSON,var 来源： https://blog.csdn.net/qq_57574258/article/details/122217487
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。