http协议&ajax基础用法

于 2022-12-05 19:09:26 发布
阅读量241 收藏
点赞数
文章标签： ajax http javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sosadtoday/article/details/128191650
版权

typora-root-url: img

数组坍塌

let arr = [1, 2, 3, 4];
    // 循环删除数组中每一个元素 从而实现清空数组
    // i=0 判断i<4成立  删除数组元素1 最终为[2,3,4] i++
    // i=1 判断i<3成立  删除数组元素3 最终为[2,4] i++
    // i=2 判断i<2不成立
    // 根本原因是因为每次使用splice方法后数组会重建索引(下标)
    // for (let i = 0; i < arr.length; i++) {
    //     arr.splice(i,1);
    // }
    // console.log(arr);
    // 1、每次删除 i--
    // for (let i = 0; i < arr.length; i++) {
    //     arr.splice(i,1);
    //     i--;
    // }
    // 2、根据数组长度删除
    // while(arr.length>0){
    //     arr.splice(0,1);
    // }
    // 3、反向删除
    for (let i = arr.length - 1; i >= 0; i--) {
        arr.splice(i, 1);
    }
    console.log(arr)

观察者模式

观察者模式的理解

1、观察者模式介绍

例如教室后的摄像头，班主任老师在监控后观察每一个人的情况
如果有同学出现睡觉 班主任老师立马可以记录下名单 进行其他的处理
事件监听 就是观察者模式的一种使用

2、观察者模式功能

1、实现 观察者类 可以生成出观察者对象
2、实现添加观察者观察类型，好像事件监听一样指定行为名称与处理程序
3、实现解除观察 类似事件解绑
4、实现触发

代码实现

核心代码

class Watch{
    constructor(){

    }
    // 通知观察者对象观察那些行为
    bindEvent(){

    }
    // 解除观察者对象观察的行为
    removeEvent(){

    }
    // 清除观察者模式观察行为
    clear(){

    }
    // 触发行为
    trigger(){

    }
}

bindEvent实现

1、增加构造函数属性

constructor() {
                // 记录当前观察者需要观察的行为有那些，每一种行为都有自己的处理方式所以存在对应关系 events 一定要使用对象格式 将行为名称作为属性名称 由于处理程序可能存在多个所以最终的值应该是数组，数组中每一个元素就是处理程序(函数)
                this.events = {};
            }

2、实现方法

// typeName 表示观察行为的名 handler表示行为如果触发后处理程序
bindEvent(typeName, handler) {
    if (this.events[typeName] == undefined) {
        // 说明目前没有记录需要观察者这种行为
        this.events[typeName] = [handler];
    }else{
        // 说明以前已经记录过了  再次添加新的处理程序
        // this.events[typeName]绝对是一个数组
        this.events[typeName].push(handler);

    }
}

clear实现

// 清除观察者模式观察行为
clear(typeName) {
    if(this.events[typeName]){
        delete this.events[typeName]
    }
}

removeEvent实现

// 解除观察者对象观察的行为
removeEvent(typeName, handler) {
    if (this.events[typeName] == undefined) {
        // 说明目前没有监视这种行为 无须解除
        return;
    }
    for (let i = 0; i < this.events[typeName].length; i++) {
        // this.events是对象 this.events[typeName]对象下的属性值 由于是数组 所以可以配合下标i  this.events[typeName][i] 表示每一个元素 也就是函数
        if(this.events[typeName][i] == handler){
            this.events[typeName].splice(i,1);
            i--;
        }
    }

}

trigger实现

// 触发行为
trigger(typeName, event) {
    if(this.events[typeName] == undefined){
        return;
    }
    // 触发处理程序 就是将函数调用
    this.events[typeName].forEach(handler=>handler(event))
}

触发代码

w.trigger('sleep', {
    name: '张三',
    start: '2022-12-05 10:10:10',
    end: '2023-1-1 00:00:00'
})

前后端交互概述

项目开发流程

1、产品设计项目原型，通过原型可以分析出项目需要实现的功能

2、UI进行设计

3、前端后端一起实现功能逻辑

4、测试

5、打包到线上使用

前后端分离

对于一个项目最重要是数据（在页面上见到的可以动态改变的内容）。但是前端没有存储大量数据能力。只有后端

才可以。所以项目必须前后端分离。后端只要能够给我们提供好数据即可。我们前端实现与用户的功能交互

例如以用户登录为例

1、需要一份完整的代码 让用户可以看到界面 例如login.html让用户可以访问(需要将代码发布到线上服务器或者

本地模拟)

2、代码中需要接受到用户输入的内容

3、由于前端没有数据库记录所有的用户信息 所以需要将数据给后端比对（发送请求）

4、后端将得到的结果发送给前端(响应请求)

5、前端在根据后端的结果相应的进行逻辑处理

http协议

协议属于规定了的约束，是大家都需要遵守的准则

客户端与服务度

客户端就是需求的发起者 对于项目中用户的浏览器
服务端就是接受者，后端

通信过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vOpVx6lC-1670238468916)(/1670211225820.png)]

三次握手(记忆)

建立连接过程是通过三次握手完成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rO0UGRZR-1670238468918)(/1670211780673.png)]

三次握手就是客户端与服务端三次收发内容可以确保自己以及对方都可以正常接受发送数据
1、客户端给服务端发送内容 服务端收到了
	客户端：什么都不知道
    服务端：
    	客户端：可以发送消息
        服务端：可以接受消息
2、服务端给客户端回复消息 客户端受到之后
	客户端：
    	客户端：可以发送消息，也可以接受消息
        服务端：可以发送消息，也可以接受消息
    服务端：
    	客户端：可以发送消息
        服务端：可以接受消息
 3、客户端给服务端再次发送消息
 		客户端：
            客户端：可以发送消息，也可以接受消息
            服务端：可以发送消息，也可以接受消息
        服务端：
            客户端：可以发送消息，也可以接受消息
            服务端：可以发送消息，也可以接受消息

四次挥手(记忆)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-71UJVjkW-1670238468919)(/1670220297242.png)]

1、客户端主动发起断开连接
2、服务端发送消息 表示可以断开连接
3、服务端再次回复消息 确定资源已经销毁
4、客户端再次确认

http协议

三次握手与四次挥手都是在发送内容(属于已经约定好了)，在进行前后端交互时连接建立与断开无需关注(js已经封

装好了)。每次请求服务端是不是需要通知服务度做什么事情。做什么事情需要明确表示出来并且还需要服务端可

以认识。所以http协议就是在规定发送请求与响应请求的数据格式是什么

每次发送请求不是只发送了需要的一些数据 还有其他的一些数据进行包裹(就好像将手机寄快递)

请求格式由请求行、请求头、空白行、请求体组成

响应格式由响应行、响应头、空白行、响应体组成

Ajax概述

ajax介绍

Ajax全称叫做 async JavaScript and xml表示异步的js代码与xml数据。目前主流交互数据格式都是使用JSON

Ajax是用于实现发送异步请求的

只要你需要使用到数据但是自己没有就需要发送ajax请求找后端

Ajax最大的好处是提升用户的体验

ajax使用步骤

ajax使用步骤

1、建立连接
2、发送请求
3、处理响应结果

演示Ajax使用

1、注册接口

https://www.tianqiapi.com/
以后调用接口 大多都是找自己公司后端 少部分情况是找第三方
在天气API中 找到appid与appsecret

2、阅读文档

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uJUkPeun-1670238468921)(/1670222372361.png)]

3、使用代码测试

<input type="text" >
    <button>查询天气</button>
    <script>
        document.querySelector('button').onclick = function(){
            // 获取到城市名称
            let city = document.querySelector('input').value;
            // 1、创建对象  XMLHttpRequest是内置的对象
            let xhr = new XMLHttpRequest;
            // 2、建立连接 
            // xhr.open(method,url,async) 
            // method 表示请求方式 对应的表示数据操作方式 数据操作就是增(post)删(delete)改(put)查(get) get与delete类似 post与put类似 请求方式属于http协议中所约束的方式 最常用的是上面四种
            // url 表示请求地址
            // async表示是否异步 默认true 就是异步 一般不传递第三个参数
            xhr.open('get','https://v0.yiketianqi.com/api?unescape=1&version=v61&appid=71362535&appsecret=eWd88Bnc&city='+city);
            // 3、发送请求 send方法可以传递字符串表示请求过程中携带的数据 例如 查询的城市，例如邮箱是什么 但是一般 get delete请求参数在url地址上 post请求与put请求参数才在send方法中
            xhr.send();
            // 4、接受结果
            xhr.onreadystatechange = function(){
                if(xhr.status == 200 && xhr.readyState  == 4){
                    // 大多数得到的都是JSON格式的字符串 需要自己转换
                    console.log(xhr.responseText)
                    console.log(JSON.parse(xhr.responseText))
                }
            }

        }
    </script>

Ajax使用注意项(重点)

1、阅读文档

以后在接口文档中一定要找到
请求方式、请求地址、请求参数、是否需要携带请求头信息、响应结果(格式、数据的含义)

2、关于参数传递问题

一般get请求与delete请求参数是设置在请求URL地址后
post与put请求一般是设置在send方法中并且还是字符串格式

3、出错了怎么办

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-azYNYigO-1670238468922)(/1670225267980.png)]

ajax下的属性方法

readState属性

表示Ajax当前的状态

状态值含义
0已经创建对象 但是还没有建立连接
1表示已经调用了open方法
2表示已经调用了send方法 请求已经发送
3表示服务端已经接受 正在发送数据回来的过程中
4表示服务端数据已经发送完毕

status属性(记忆)

表示http协议的状态码。状态码是属于http协议中规定的一些数字 每一个数字都有自己的含义

100-199：请求还在继续

200-299：请求正常 服务端正常的发送了响应结果 200表示服务端正常的将数据发送回来 在调用接口的过程中如果出现了某些错误 服务端也可能会响应200的状态码 表示数据发回 在数据中再通过自定义的状态码表示什么错误

300-399：与重定向有关 301 永久重定向 302临时重定向

400-499：表示客户端错误 404地址错误 403 访问拒绝 401身份验证没通过

500-599：表示服务端错误500表示服务端配置错误(代码写错了)

responseText属性

服务端返回的数据内容 是字符串格式，切记 只要正常拿到服务端的完整结果才去使用该属性

onreadystatechange事件

表示一旦readySate的属性发生改变 会自动执行的函数

setRequestHeader方法

设置请求头 请求头是明确通知服务端当前自身的一些信息
xhr.setRequestHeader(头名称，值)
头名称需要自己查询 一般使用频率最高的是Content-Type

302临时重定向

400-499：表示客户端错误 404地址错误 403 访问拒绝 401身份验证没通过

500-599：表示服务端错误500表示服务端配置错误(代码写错了)

responseText属性

服务端返回的数据内容 是字符串格式，切记 只要正常拿到服务端的完整结果才去使用该属性

onreadystatechange事件

表示一旦readySate的属性发生改变 会自动执行的函数

setRequestHeader方法

设置请求头 请求头是明确通知服务端当前自身的一些信息
xhr.setRequestHeader(头名称，值)
头名称需要自己查询 一般使用频率最高的是Content-Type
Djdhfnfnnf
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值