JavaScript入门 http协议/三次握手/四次挥手/接口文档/传输内容类型content-type Day25

闻鹤于野

已于 2022-10-10 17:51:56 修改

阅读量91

点赞数

分类专栏：二阶段文章标签： javascript 服务器前端

于 2022-09-21 08:57:38 首次发布

本文链接：https://blog.csdn.net/qq_63354840/article/details/126948423

版权

二阶段专栏收录该内容

34 篇文章 0 订阅

订阅专栏

http协议

概念

html 超文本标记语言

http协议超文本传输协议。规定前后通讯方式，也就html文本或数据如何在网络传输。

http基于请求响应模式的，无状态无连接应用协议

特点

客户端/服务端模式

速度快

灵活传输数据类型任意

无连接

无状态

url地址

统一资源定位符

格式：http://ip:port/path/resoure

ip：网络中唯一标识一台电脑

port：端口号同一台电脑中区分不同应用程序

path：路径

res：资源

域名

http://www.baidu.com:80

默认端口80可以不写

DNS服务器域名解析服务器

www.baidu.com - 10.78.139.23

http工作过程

1.建立连接

建立稳定可靠的连接

三次握手[面试]

2.发送请求

请求包：一串有格式的文本字符串

格式：请求行请求头部请求正文

请求行：method请求方法 url http协议版本

请求头部：key1：value1

key2：value2

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

请求正文

3. 响应数据/响应包

响应包：一串有格式的文本字符串

格式：状态行响应头部响应正文/包体

状态行：版本状态码状态码描述

响应头部：context-type

响应正文

4. 断开连接

四次挥手：

接口文档

client <-> server

1.商品列表接口

url: http://ip:port/goods/list

method: get

参数: 无

响应: { list:[ ] }

<div class="container">
        <!-- 动态渲染 -->
    </div>
    <script src="./js/index.js"></script>

/**
 * 获取商品列表数据
 */
function getProductList(){
    //1.创建XMLHttpRequest对象
    let xhr = new XMLHttpRequest()
    //2. 建立连接
    xhr.open('get','http://10.7.162.67:8888/goods/list')
    //3.发送请求
    xhr.send()
    //4.接收响应数据
     xhr.onreadystatechange = function(){
         if(xhr.readyState === 4){
             if(xhr.status === 200){
                 let res = xhr.responseText
                 res = JSON.parse(res) // json格式字符串转json对象
                 console.log('res ',res)
                 showProductList(res.list)
             }
         }
     }
}
/**
 * 动态渲染商品列表
 */
function showProductList(productList){
    let list = productList.map(item=>{
        return `<div class="product-item" index="${item.goods_id}">
                    <img src="${item.img_big_logo}" alt="pic1">
                    <p>${item.title}</p>
                    <p>￥${item.price}  ${item.goods_number}人已买</p>
                    <button index="${item.goods_id}">详情</button>
                </div>`
    })
    const rootEle = document.querySelector('.container')
    rootEle.innerHTML = list.join('')
    rootEle.addEventListener('click',function(e){
        e = e || window.event
        let target = e.target || e.srcElement
        let id = target.getAttribute('index')
        console.log('id ',id);
        // 跳转详情页
        location.href = './detail.html?id='+id
    })

}
getProductList()

*{padding: 0;margin: 0;}
.container{
    width: 1200px;
    margin: 100px auto;
    display: flex;
    flex-wrap: wrap;
}
.container .product-item{
    width: 260px;
    height: 440px;
    background-color: rgb(242,246,244);
    margin-right: 35px;
}
.container .product-item img{
    width: 100%;
}

2. 商品详情接口

url: http://ip:port/good/item?id=1

method: get

参数： id=1

响应： {{ name:'' , price: 19, ....},"info":{ }}

 <h2>商品详情</h2>
    <div class="detail-wraper">
        <!-- 动态渲染详情 -->
    </div>
    <script src="./js/detail.js"></script>

/**
 *  获取商品id
 * @returns 
 */
function getProductId(){
    let str = location.search// ?id=2
    let id = str.split('=')[1]
    return id
}
/**
 * 获取商品详情
 */
function getProductDetail(){
    let id = getProductId()
    let xhr = new XMLHttpRequest()
    xhr.open('get',`http://10.7.162.67:8888/goods/item?id=${id}`)
    xhr.send()
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status === 200){
                let res = xhr.responseText
                res = JSON.parse(res)
                if(res.code == 1){
                   let detail = res.info // 详情数据
                   showProductDetail(detail)
                }
            }
        }
    }
}
/**
 * 动态渲染详情
 */
function showProductDetail(detail){
    let str = `<img src="${detail.img_big_logo}" width="300" alt="">
            <h2>${detail.title}</h2>
            <p>商品数量${detail.goods_number}</p>
            <p>￥${detail.price}</p>`
    const detailWraper = document.querySelector('.detail-wraper')
    detailWraper.innerHTML = str
}
getProductDetail()

3. 订单接口

4. 购物车接口

5. 支付接口

6. 登录

7. 注册