ajax工作的流程和GET、POST请求方法

MM2LYF

已于 2022-06-12 19:09:10 修改

阅读量116

点赞数

分类专栏： Web 文章标签：前端 ajax javascript

于 2022-06-12 19:08:25 首次发布

本文链接：https://blog.csdn.net/MM2LYF/article/details/125174575

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ajax工作的流程

假设ajax.html包含一个<script src="js/script.js"></script>

js/script.js写了ajax代码，请求data/student.json资源

1.用户在浏览器中输入……/ajax.html回车

2.浏览器分析用户的输入，构建HTTP请求（GET请求）

3.Tomcat收到请求，根据资源路径，找到对应的文件/ajax.html 。读取内容，准备响应并发送（200 text.html）

4.读取响应体，根据content-type决定按照html方式对待内容解析HTML中标签

5.在解析过程，看到<script src="……"></script>,构造一个新的HTTP请求（GET/js/script.js）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="js/script.js" ></script>
</body>
</html>

6.Tomcat根据资源路径，找到对应的文件，读取内容，准备HTTP响应（200 application/js……）

// 利用这个对象发起 HTTP 请求
var xhr = new XMLHttpRequest();
xhr.open("get", "data/students.json");
// 以时间驱动的方式，读取响应 —— 当 xhr 完成响应时，执行我们准备好的函数
xhr.onload = function () {
    console.log(this);      // this 就是 xhr 对象
    console.log(this.responseText); // string 类型
    console.log(xhr.responseText);  // string 类型

    // 我们希望把 json 字符串解析成 js 的具体数据类型
    var sts = JSON.parse(this.responseText);
    console.log(sts);
    var body=document.querySelector("body");
    for(var i in sts){
    var st=sts[i];
    body.innerHTML+=`<div>${st.name}</div>`;
    }
}
xhr.send(); // 发送 HTTP 请求

7.浏览器读取响应体，根据content-type，执行js代码，实例化xhr对象，send().

浏览器构建HTTP请求（GET/data/students.json）

8.Tomcat根据资源路径，找到对应的文件，读取内容，准备HTTP响应（ application/json……）

[
  {
    "name": "小明",
    "gender": 2
  },
  {
    "name": "小张",
    "gender": 3
  },
  {
    "name": "小王",
    "gender": 4
  }
]

9.浏览器读取响应，执行JS代码中写的xhr.onload函数

10.浏览器得到最终DOM结构，显示内容

11.用户看到网页的最终形式

如何构建发送GET和POST请求

GET请求：

1.地址栏输入url 回车

2.通过一些标签<img>,<script>,<link> ;还有<a>,<form>

<!--用标签GET请求的方法-->
<!--  <img src="data/students.json">-->
<!--<script src="data/students.json"></script>-->
<!--<link rel="stylesheet" href="data/students.json">-->
<!--<a href="data/students.json">点击</a>-->
<!--<form action="data/students.json">-->
<!--<button>提交</button>-->
<!--</form>-->

3.ajax

4.重定向（redirec）

POST请求：

1.<form method="post">

<!--POST请求方法-->
<form method="post" action="data/students.json">
    <button>提交</button>
</form>

2.ajax

3.重定向

MM2LYF

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax工作的流程和GET、POST请求方法

ajax工作的流程和GET、POST请求方法
复制链接

扫一扫

专栏目录