HTTP打卡

2023-05-30 00:14| 来源: 网络整理| 查看: 265

HTTP打卡原创

EstherYang 2023-05-28 18:02:21 博主文章分类：技术栈 ©著作权

文章标签客户端数据服务端文章分类 jQuery 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者EstherYang的原创作品，请联系作者获取转载授权，否则将追究法律责任 01. http协议:1.协议=> 超文本传输协议 => 基于请求响应模式的，无状态，无连接的应用层协议,一般应运于web程序中. => 白话: 制定客户端(前端)与服务器(后端)通讯的规则 1.请求响应模式客户端 -请求-> 服务器作用：定位网络中资源 => 格式: 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 }练习ajax1练习异步： 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 = ` ${item.name}

$${item.price}

` }) 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 赞收藏评论分享举报

上一篇：telnet循环探测服务端口

下一篇：正则打卡

【本文地址】

HTTP打卡

HTTP打卡

今日新闻

推荐新闻