// 通过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:一般用于给服务器来提交数据
-->
-
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方式没有请求体
-
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方式的数据在请求体中
-->
-
响应报文
请求分为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
============== 响应体 ==============
存放响应回来的数据
用户名或者密码错误
-
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分钟