01. http协议:
1.协议
=> 超文本传输协议
=> 基于请求响应模式的，无状态，无连接的应用层协议,一般应运于web程序中.
=> 白话: 制定客户端(前端)与服务器(后端)通讯的规则
1.请求响应模式
客户端 -请求-> 服务器
<-响应-
2. 无状态
http协议不会保存状态数据，需要自己写代码保存
3. 无连接
每次请求响应完成，连接自动断开http是超文本传输协议，信息是明文传输，
https 则是具有安全性的ssl加密传输协议
http和https使用的是完全不同的连接方式用的端口也不一样,前者是80,后者是443。
http的连接很简单,是无状态的
HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议 要比http协议安全
2.http之url
url: 统一资源定位符
=> 作用： 定位网络中资源
=> 格式: http://ip:port/path/res
http
ip: ip地址
网络中唯一标识一台计算机
10.7.178.117
port: 端口号
区分电脑中不同应用程序
path: 路径
res:资源
=> 如: http://10.7.178.117:3000/productlist3.http工作原理
工作原理:
1. 建立连接, 客户端与服务端建立连接
2. 发送请求, 客户端向服务端发起一个请求
3. 响应数据, 服务端接收到客户端请求之后，响应相应数据给客户端
4. 断开连接,
1. 客户端与服务端建立连接
三次握手协议
=>客户端与服务端之间建立稳定可靠的连接
2. 发送请求, 客户端向服务端发起一个请求
请求是一串有格式的文本信息 - 请求包
三部分: 请求行, 请求头部, 请求正文
-请求行
请求方法method 请求地址url 协议版本
get 客户端获取服务端数据
post 提交数据到服务端
put 修改数据
delete 删除
...
-请求头部
格式: 名称:值
host:10.7.178.117 //主机
content-type : text/html //数据类型
...
-请求正文
username='admin'&password=123
注:只有post请求时，内容参数放请求正文里
如果是get请求，内容参数放url地址后面
http://10.7.178.117:3000/login?username='admin'&password=123
3. 响应数据
有格式的文本信息 - 响应包
响应包: 状态行, 响应头部, 响应正文
状态行: 协议 状态码 状态码描述
200 ok
4xx 客户端出错
404 请求url地址出错
5xx 服务端出错
500 服务端程序出错
401 用户认证
403 服务器拒绝
304 未修改
响应头部: 名称:值
content-type: text/html
响应正文
4. 断开连接
四次握手4.抓包调试工具
查看后端发起的请求
1.chrome
右键 - 检查 - network - （ 请求行）general | (相应内容)response
2.postman工具 - chrome插件
url - 输入 chrome//apps - skip - 输入你想请求的数据05.ajax异步网络通信技术
ajax异步网络通讯技术
现在允许浏览器与服务器通信而无须刷新当前页面的技术.
不需要刷新整个页面，只刷新局部页面的一种异步通讯技术；
ajax核心对象 XMLHttpRequest
XMLHttpRequest
=> new window.XMLHttpRequest()
建立客户端与服务端连接
open(method,url,true|false)
open(method,url)
open()
=>建立客户端与服务端连接
open('post','http://10.7.178.117:3000/productlist')
open('get','http://10.7.178.117:3000/productlist?username:admin&password=123')
发送请求
send()
=>发送请求
=>post参数放send方法作参数发送 send('username:admin&password=123')
=>get send()
处理响应数据
onreadystatechange=function(){
//1.就绪码: readyState 判断当前响应进度
readystate == 4 表示响应完成
//2. 状态码: status , statusText 状态描述
// 3. 响应内容: responseText
}练习ajax
1练习异步：
const btn = document.querySelector('.btn')
const pEle = document.querySelector('p')
btn.addEventListener('click', function () {
//连接后端服务器，获取后端数据
//1.创建XMLHttpRequest对象
let xhr = new window.XMLHttpRequest()
//2.建立连接
xhr.open('get', 'http://10.7.178.117:3000/productlist')
//3.发送请求
xhr.send()
//4.处理响应
xhr.onreadystatechange = function () {
//就绪码
if (xhr.readyState == 4) {
//状态码
if (xhr.status == 200) {
let data = xhr.responseText
//得到的数据是字符串 转换成对象输出
let productList = JSON.parse(data)
//动态渲染
loadProductList(productList) //传参进去
}
}
}
})
解决跨域问题：
//解决跨域问题 == 解决乱码问题
response.setHeader('Access-Control-Allow-Origin','*')
2练习异步动态渲染：
//动态渲染商品列表数据
function loadProductList(productlist) {
var strArr = productlist.map(item => {
return str = `
<div class="pro">
<img src="${item.url}" alt="">
<h2>${item.name}</h2>
<p>$${item.price}</p>
</div>`
})
var str = strArr.join('')
console.log(str);
const divEle = document.querySelector('.product-list')
divEle.innerHTML = str
}06.接口文档
一个应用程序中有很多接口
一个应用程序都会有一个接口文档
每个接口对应一个业务
在接口中定义：
请求url地址
请求方法
请求参数
username | password
相应数据
ex:
电商网站程序
注册 登录 商品列表 商品详情 购物车 订单 地址 会员
定义业务接口
商品列表接口：
url: http://10.7.178.117:3000/productlist
method: get
参数: 无
响应数据:
[
{
id: 1001,
name: "javascript高级编程",
price: 89,
num: 0,
url: "https://img1.baidu.com/it/u=337910016,91561566&fm=26&fmt=auto"
},
{
id: 1002,
name: "css高级编程",
price: 79,
num: 0,
url: "https://img1.baidu.com/it/u=454394458,1998378568&fm=253&fmt=auto&app=138&f=JPEG"
},
]07.get | post请求区别
get和post请求区别
1. 安全性
get请求参数拼接在url地址后面
post请求参数存储在请求包请求正文本中
post更安全
2. 参数大小
post请求比get传输数更大
3. 参数类型
get字符串类型数据
post传输可以任意类型
文件 图片
面试 get请求一定不能传图片吗?
http://ip:port/base64=asdfaswqerjpava;shdfpawifn/asnfd;asfdhias;fdnas;f08.请求头
请求头 content-type
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
key:value
content-type:application/x-www-form-urlencoded
application/x-www-form-urlencoded
表示参数以名称值对形式组织，
比如: username='admin'&password=123&age=18
application/json
表示参数以json形式组织
比如: {username='admin',password=123}
multipat/formdate
表示参数是文件形式
text/html