js-21http协议
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/productlist
3.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;f
08.请求头
请求头 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
