ajax01

// 通过ajax技术去找服务器来获取数据，将数据渲染到页面中

<!-- 表单同步提交 -->

<!-- action 提交的地址 接口-->

<!-- 说明：需要传递两个参数

\1. name 用户名 , 正确的结果为admin

\2. pwd 密码, 正确的结果为123456 -->

<!-- name 告知服务器获取的是社么数据 -->

<!-- methtod 表单的提交方式 常见的GET（默认值） POST -->

3.<!-- action 提交的地址 -->

<!-- name 告知服务器获取的是啥数据 -->

<!-- method 表单的提交方式 常见 GET（默认值）POST -->

<!-- 最直观的区别

GET方式：会把提交的数据直接放在地址栏，不安全

地址栏中是有长度限制的，所以使用get方式来提交有大小限制

POST方式：提交的数据不在地址栏中，相比GET方式比较安全（放到请求体）

使用POST 方式提交的数据没有大小限制

使用场景：

get:有获取的含义，一般始找服务器来获取数据使用get方式

POST：一般用于给服务器来提交数据

-->

1. http协议

客户端与服务器之间通信的时候需要遵守的规则（约定）

2部分：请求 + 响应

 

 

请求：发送的所有的内容 叫做http请求消息（请求报文）

 

请求报文：三部分： 请求行 请求头 请求体

 

================== 请求行（第一行） ==================

GET /v1/get?name=ewfewf&pwd=qwdwqdwqd HTTP/1.1

GET 请求方式

/v1/get url地址 在url地址后面以?隔开了要提交到服务器上数据

数据的格式：name=ewfewf&pwd=qwdwqdwqd

查询字符串

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方式没有请求体

1. post方式的http请求消息 （请求报文）

 

行 头 体三部分

 

===================== 请求行（第一行）=====================

POST /v1/post HTTP/1.1

POST 请求方式

/v1/post 请求的url的地址 在地址后面没有要发送的数据

 

===================== 请求头 =====================

POST请求头会比GET请求头多个关键的头信息

Content-Type: application/x-www-form-urlencoded

 

Host: 111.229.6.231:9996

Connection: keep-alive

Content-Length: 22

Cache-Control: max-age=0

Upgrade-Insecure-Requests: 1

Origin: null

Content-Type: application/x-www-form-urlencoded

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

 

 

===================== 请求体 =====================

要发送的数据

name=admin&pwd=1234567 数据的格式和GET方式的格式类似

不是查询字符串，只是格式和查询字符串类似

 

对比GET和POST的请求报文

 

行

GET方式：GET url地址?数据

POST方式：POST url地址 没有带数据

 

头

POST比GET方式多个关键的头信息

Content-type: application/x-www-form-urlencoded

 

体

放发送的数据

GET方式没有请求体

POST方式的数据在请求体中

-->

1. 响应报文

请求分为GET和POST之分

对于响应是没有GET和POST之分

 

响应报文（响应回来的所有内容）

响应行 响应头 响应体

 

============== 响应行（状态行、第一行） ==============

HTTP/1.1 200 OK

200 状态码 ok 描述解释信息 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: 27

Date: Wed, 12 May 2021 11:45:59 GMT

Connection: keep-alive

 

============== 响应体 ==============

存放响应回来的数据

 

用户名或者密码错误

1. ajax： Asynchronous javascript and xml

 

Asynchronous 异步的

 

ajax到底是个啥：使用js异步的方式和服务器之间进行通信 还是遵守http协议

 

 

synchronous 同步： 同步的方式做事是一件一件的来做

Asynchronous 异步： 同时可以做多个事情 效率高 用户体验好

异步做事效率高 用户体验好

ajax使用异步的方式，不会刷新（跳转）页面，在当前页面就可以获取到数据，数据展示到页面中

 

在家做饭吃 同步

\1. 洗米 1分钟

\2. 煮饭 30分钟

\3. 洗菜 3分钟

\4. 切菜 2分钟

\5. 炒菜 10分钟

耗时：46分钟

 

异步：

\1. 洗米 1分钟

\2. 煮饭 30分钟

煮饭的同时可以去做别的事情

耗时：31分钟