-Moody- - Ajax
type: channel
link: https://coder.cm/index.php/tag/Ajax/
items: Ajax

Ajax
type: item
date: 2021-06-20T18:53:00+08:00
description: Http请求消息 http请求消息：发送请求的时候发送了啥消息内容给了服务器 （请求报文） 请求报文由三部分组成： 请求行 请求头 请求体 =================== 请求行（第一行） =================== GET /v1/get?name=admin&pwd=1234 HTTP/1.1 GET 提交方式 /v1/get 提交地址 ?name=admin&pwd=1234 提交的数据 在地址的后面 HTTP/1.1 http协议版本号 =================== 请求头 =================== 遵守键值对格式 忽略即可，因为都是浏览器自己设置添加的 Host: 111.229.6.231:9996 Connection: keep-alive Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9 Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q=0.9,en;q=0.8 =================== 请求体 =================== 放置要发送的数据 get方式，由于数据在url地址后面，所以get方式没有请求体 响应报文响应报文 响应回来的内容 响应不分GET POST三部分：响应行 响应头 响应体 ================== 响应行（状态行） 第一行 ================== HTTP/1.1 200 OK 200 状态码 404 Not Found 500 服务器异常 菜鸟教程 https://www.runoob.com/http/http-status-codes.html ================== 响应头 ================== Access-Control-Allow-Origin: * Access-Control-Allow-Headers: Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild Access-Control-Allow-Methods: PUT, POST, GET, DELETE, OPTIONS Content-Type: text/plain; charset=utf-8 Content-Length: 12 Date: Sun, 20 Jun 2021 02:44:26 GMT Connection: keep-alive ================== 响应体 ================== 响应回来的数据 登录成功 响应报文：关注于响应行 （有状态码） 响应体（响应回来的数据） 无论是请求报文还是响应报文 都是三部分组成 请求 行 头 体 响应 行 头 体 查询字符串：在url地址后面通过?带数据 数据格式： 参数=值，多个数据使用&链接 参数=值&参数=值&参数=值 什么是Ajax? ajax： Asynchronous JavaScript and XML 使用异步的js方式与服务器进行通信，由于使用的是异步，所以ajax这个事情不会影响到其他事情。 ajax通信遵守http协议规则（请求 + 响应） synchronous：同步 事情是一件件的来执行的 Asynchronous：异步 可以同时做多个事情，多个事情之间不会有阻塞问题 比喻: 在家自己做饭 同步 洗米：1分钟 煮饭：30分钟 买菜： 10分钟 洗菜：2分钟 切菜炒菜： 15分钟 总耗时：58分钟 异步： 洗米：1分钟 煮饭：30分钟 在煮饭就可以做其他事情了 31分钟 异步做事效率高，用户体验更好 不会刷新不会跳转页面 小案例 ajax发送GET请求 点击发送ajax请求（get请求） 处理响应 点击发送ajax请求（get请求） 发送POST请求 点击发送ajax请求（post方式） JQ的ajax方法 JQ发送POST方法