AJAX学习day-1

：本人CSDN账户为：小白一枚2号，发这里主要是想赚点广告钱

（tmd打个勾八暑假工，学到技术才是硬道理）

注：文件布局：

一、AJAX的概念：

AJAX是浏览器与服务器进行数据通信的技术 =>把数据变活

二、AJAX的使用：

使用axios库，与服务器进行数据通信

基于XMLHttpRequest封装，代码简单
Vue,React项目使用

学习XMLHttpRequest对象，了解AJAX底层原理

1.axios库的初步使用：

（非头条内部地址不让传，只好用这种形式）

引入JS：https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.min.js 或 https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js

<script src="https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"></script>

使用axios函数详解：https://ykloveyxk.github.io/2017/02/25/axios%E5%85%A8%E6%94%BB%E7%95%A5/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.min.js"></script>
    <script>
        axios({
            url:'目标资源地址'
        }).then((result)=>{
            //对服务器返回的数据做后续处理
        })
    </script>
</body>
</html>

目标资源：http://hmajax.itheima.net/api/province：省份列表数据

2.使用URL进行参数查询：

URL后加 ?pname=河北省

语法：http://xxx.com/xxx/xxx?参数名1=值1&参数名2=值2

axios({
                url: 'http://hmajax.itheima.net/api/area',
                params: {
                    pname: `${query1.value}`,// 参数1
                    cname: `${query2.value}` // 参数2
                }
            }).then((result) => {
                console.log(result.data.list);
                ul.innerHTML = result.data.list.map((x) => `<li>${x}</li>`).join('')
                console.log(result.data.list.map((x) => `<li>${x}</li>`));
            })

3.常用的请求方法与数据提交：

概念：对服务器资源要执行的操作

axios的请求配置：

请求方法	操作
GET(get)	获取数据
POST(post)	提交数据
PUT(put)	修改数据（全部）
DELETE(delete)	删除数据
PATCH(patch)	修改数据（部分）

url ：请求的URL网址

method ：请求的方法，GET可以省略（不区分大小写）

params：查询参数

data：提交的数据

//获取数据
axios({
            url: '目标资源地址',
            //method: 'get',
            params:{
                参数名:值
            }
        }).then((result) => {
            //对返回的数据的处理
        })

//提交数据        
axios({
            url: '目标资源地址',
            method: 'post',
            data: {
                参数名: 值
            }
        }).then((result) => {
            //对返回的数据的处理
        })

4.axios的错误处理：

服务器返回的信息：Uncaught大对象里的data

语法格式：

 axios({
            //请求项
        }).then(result=>{
            //处理数据
        }).catch(error=>{
            //处理错误
        })

三、HTTP协议：

大佬方法：

https://blog.csdn.net/sanda_nd/article/details/125513125

1.请求报文：

HTTP协议：规定了浏览器发送及服务器返回内容的格式

请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容

请求报文样例：

组成部分：

请求行：请求方法，URL，协议
请求头：以键值对格式携带的附加信息，例如：Content-Type（本次浏览器携带的内容类型）
空行：分割请求头和内容数据，空行后是内容数据（发给服务器的资源）
请求体：发送的资源

查看请求报文：

如同所示：就是请求报文经过计算机解析后的形式

2.用请求报文排查错误：

查看提交的信息，判断错误位置

3.响应报文：

HTTP协议：规定了浏览器发送及服务器返回内容的格式

响应报文：服务器按照HTTP协议要求的格式，发送给浏览器的内容

响应行（状态行）：协议，HTTP响应状态码（400表示响应失败）、状态信息
响应头：以键值对的格式携带的附加信息，如：Conttent-Type
空行：分割响应头
响应体：返回的资源

查看响应报文：

HTTP状态码：用来表明，请求是否成功

状态码	说明
1xx	信息
2xx	成功
3xx	重新定向消息
4xx	客户端错误
5xx	服务端错误

常见状态码：

200：成功

404：服务器找不到资源

四、接口文档：

接口文档：描述接口的文章

接口：使用AJAX和服务器通讯是使用的URL，请求方法，及参数

AJAXS接口：欢迎使用 - AJAX阶段 (apifox.com)

https://apifox.com/apidoc/project-1937884/doc-1695440

五、from-serialize插件的使用：

作用：快速地搜集表单元素的值

引入插件：form-serialize.js插件下载&引用-CSDN博客

https://blog.csdn.net/ITiT12333/article/details/138261386

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
</head>

<body>
    <form action="javascript" class="example">
        <input type="text" name="un">
        <input type="password" name="pw">
        <!-- <input type="button" class="btn" value="提交"> -->
    </form>
    <button class="btn">提交</button>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"></script>
    <script src="../from-serialize/from-serialize.js"></script>
    <script>
        const input = document.querySelector('.example')
        const btn = document.querySelector('.btn')
        btn.addEventListener('click', () => {
            let data = serialize(input, { hash: true, empty: true })
            console.log(data);
        })
    </script>
</body>

</html>

必须使用：

<form action="javascript" class="example">
        <input type="text" name="un">
        <input type="password" name="pw">
        <!-- <input type="button" class="btn" value="提交"> -->
    </form>

的格式

form用来确定区间

name是键名

value是值

其中：hash 设置获取的数据结构：

true：获取得到JS对象
false：获取得到查询字符串

empty 设置是否获取空值：

true：允许获取空值
false：bu获取空值

六、案例-整合登入：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap-5.3.0-alpha1-dist/css/bootstrap.rtl.min.css">
    <style>
        .banner {
            width: 700px;
            height: 700px;
            margin: 20px auto;
        }

        .row {
            margin-bottom: 15px;
        }

        .alert {
            transition: all .5s;
        }

        .unshow {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="banner">
        <h1>欢迎-登入</h1>
        <div class="alert unshow" role="alert">
        </div>
        <form class="login-form">
            <div class="row g-3 align-items-center">
                <div class="col-auto">
                    <label for="username" class="col-form-label">用户名：</label>
                </div>
                <div class="col-auto">
                    <input type="text" id="username" name="username" class="form-control"
                        aria-describedby="passwordHelpInline">
                </div>
            </div>
            <div class="row g-3 align-items-center">
                <div class="col-auto">
                    <label for="password" class="col-form-label">密码：</label>
                </div>
                <div class="col-auto">
                    <input type="password" id="password" name="password" class="form-control"
                        aria-describedby="passwordHelpInline">
                </div>
                <div class="col-auto">
                    <span id="passwordHelpInline" class="form-text">
                        Must be 6-20 characters long.
                    </span>
                </div>
            </div>
        </form>
        <button class="btn btn-primary">登入</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"></script>
    <script src="../from-serialize/from-serialize.js"></script>
    <script>
        // const un = document.querySelector('#username')
        // const pw = document.querySelector('#password')
        const input = document.querySelector('.login-form')
        const btn = document.querySelector('button')
        const alt = document.querySelector('.alert')

        function alertFn(msg, isSuccess) {
            alt.classList.remove('unshow')
            let bgStyle = isSuccess ? 'alert-success' : 'alert-danger'
            alt.classList.add(bgStyle)
            alt.innerText = msg
            // alert('用户名或密码错误')

            setTimeout(function () {
                alt.classList.add('unshow')
                alt.classList.remove(bgStyle)
            }, 2000)
        }


        btn.addEventListener('click', () => {
            let data = serialize(input, { hash: true, empty: true })
            console.log(data);
            if (data.username.length < 8) {
                alertFn('用户名长度不能少于8位', 0)

                return //阻止代码继续执行
            }
            else if (data.password.length < 6) {
                alertFn('密码长度不能少于6位', 0)

                return //阻止代码继续执行
            }
            axios({
                url: 'https://hmajax.itheima.net/api/login',
                method: 'post',
                data: {
                    username: data.username,
                    password: data.password
                }
            }).then(result => {
                console.log(result);

                alertFn(result.data.message, 1)

            }).catch(error => {
                console.log(error);

                alertFn(error.response.data.message, 0)
            })
        })
    </script>
</body>

</html>

效果：

1.初始界面：

2.直接登入时或用户名长度少于8位时（直接点提交）：

3.无密码时或密码少于6位时（用户名为 : itheima007）：

4.登入失败时：

5.成功登入（用户名：itheima007 密码：7654321）：

了一整晚三个小时给大家整合的配色网站合集

希望看完可以评论点赞收藏或者转发都可以

adobe color

https://color.adobe.com/zh/explore/

搜索过去4000年来使用的180个调色板

https://colorleap.app/home

Picular是使用谷歌图像搜索的火箭快速原色发生器

https://picular.co/

自定义配色网站-我进去就蒙了

https://colourco.de/

对比度测试网站

https://colorable.jxnblk.com

Palettte App-最终的调色板编辑和重新映射工具

https://palettte.app

Colorinspire-精选色彩灵感

https://www.colorinspire.io

ColorSpace-调色板生成器和颜色渐变工具

https://mycolor.space

Pigment-大力推荐，谁用谁知道

https://pigment.shapefactory.co

Adobe Color-教科书式的取色（同类色、互补色、对比色...）

https://color.adobe.com/zh/create/color-wheel/

Colors & Fonts-调色板和字体配对灵感的集合

https://www.colorsandfonts.com

HueSnap-创建调色板并与他人共享

https://www.huesnap.com

Culrs-好像没什么特别

https://culrs.com/#/

Eva Design System-有点卡

https://eva.design

Scale-我词穷了，但是真的很棒

https://hihayk.github.io/scale/

Site Palette-真的编不下去了

https://palette.site

BrandColors-要不你们来试试？

https://brandcolors.net

Colorwise-Product Hunt中搜索投票最多的产品

https://colorwise.io

HTML Color Codes-作用不是太大

https://htmlcolorcodes.com

ColorBox-生成颜色集的颜色工具

https://www.colorbox.io

Generate — Coolors.co-一个打开很快的配色网站

https://coolors.co

Cloudflare Design-用于界面设计的调色板工具

https://cloudflare.design/color/

Instant Duotone Effect Generator-双色图

https://medialoot.com/duotones/

Color Tool-为UI创建和共享调色板

https://material.io/resources/color/#!/?view.left=0&view.right=0

Blendy-类似ps色彩蒙版

https://blendy.ml

LOL Colors-水滴形调色盘

https://www.webdesignrankings.com/resources/lolcolors/

Color Hunt-谁用谁知道

https://colorhunt.co

ColorMe-可视化CSS颜色功能

https://colorme.io

Gradient Hunt-渐变色

https://gradienthunt.com

ColorSpark-随机生成单色/渐变

https://colorspark.app

Sip-适用于Mac的Sip Color Picker

https://sipapp.io

CoolHue 2.0-获得免费的草图渐变颜色插件和渐变集合调色板

https://github.com/webkul/coolhue/releases

Color Koala-打开迅速

https://colorkoala.xyz

SchemeColor-用就完了

https://www.schemecolor.com

Free Mesh Gradient Collection-流体渐变

https://www.ls.graphics/meshgradients

WebGradients-支持下载psd和sketch格式

https://webgradients.com

Gradient Buttons-渐变

https://gradientbuttons.colorion.co

ColorKit-编不下去了，自己试试

https://colorkit.io

Eggradients

https://www.eggradients.com

Cool Backgrounds-超级牛逼的网站一定要试试大力推荐*****

随便下载一个都能去昵图上卖共享分你信我!!!

https://coolbackgrounds.io

GradPad-渐变色

http://ourownthing.co.uk/gradpad.html

Khroma-普通配色

http://khroma.co/train/

Color palettes-配色推荐

https://www.canva.com/colors/color-palettes/

Color Safe-搭配推荐

http://colorsafe.co

Paletton-

https://paletton.com

Colordot-不想配图，自己感受

https://color.hailpixel.com

Colors-

https://klart.io/colors

Contrast Ratio-轻松计算颜色对比度

https://contrast-ratio.com/#red-on-blue

Color Lisa-字体配色

http://colorlisa.com

Color Designer

https://colordesigner.io

Color.review-摸不着头脑

https://color.review

Blend-

http://www.colinkeany.com/blend/

Contrast-

https://usecontrast.com

Grabient-渐变

https://www.grabient.com

言：万物之始，大道至简，演化至繁。水滴不染尘世浮华，方能纯净如冰川灵动如丝绒。落红不逐春日绚烂，方有一年春尽一年春。

一、html5的介绍

1.1介绍

html号称超文本标记语言，代表着浏览器技术发展的一个阶段。html版本1到版本5的更新迭代都是由组织W3C管理的。当时到html4.1的时候，W3C组织就声称不再更新版本了。而改用XHTML。但是由于浏览器的各种不兼容的问题，于是乎W3C这个组织就和其他的浏览器产商一起联合起来将这门语言再次更新到html5

比喻：

html5 >机器人的骨骼

css3 >机器人的外在修饰

js > 机器人的行为如行走、抬腿

Jquery > 封装好的控制行为的库，可以提高效率

1.2优势

易用性
支持视频和音频
互动性高
支持移动设备
未来的趋势

1.3开发工具

HBuild、WebStrom、sublime Text

二、代码规范

2.1代码规范

新建一个Web项目

相比html4来说，html5的语法更加简洁并且在规定上也更加宽松。

单标签不用写关闭符号
双标签省略结束标签
html、head、body、colgroup、tbody可以完全省略
删除其中一些，打开浏览器的检查元素功能，也不会报错

三、各类标签

3.1文本标签

b标签：表示关键字和产品名称。<b>html</b>其实它的实际作用就是将一段文字加粗。但是并不是特别强调它的重要性。比如说：在一段文字当中出现的某些关键字或者产品的名称就可以用b标签
strong标签：表示比较重要的文字<strong>html</strong>它的作用也是加粗，只是它在强调一段比较重要的文本
br单标签：换行
wbr标签：安全换行you've no idea how worried <wbr> i was当用户对网页进行缩放的时候可能会有一些单词被挤到下一行。如果不行某个单词被分离的话，可以使用安全换行标签
i标签：倾斜。em标签语义一样，但em表示强调<i>倾斜标签</i>它用于表示外文词汇或科技术语
s标签：删除线。del标签表示强调。<s>html</s>删除线
u标签：给文字加下划线。ins标签表示强调<u>html</u>下划线
small标签：添加小号字体<small>放小一号</small>将文本放小一号。通常用于免责声明和澄清声明。
sub和sup标签：添加上标和下标X<sub>5</sub>和Y<sup>2</sup>（sub和sup长差不多，这个要如何去记忆呢？大家可以看到b的肚子在下面，所以呢它是下标，而p的头部在上方，所以记录是上标。那这样一来是不是就感觉清晰了许多呢）
q标签：引用来自其它出处的内容<q>有朋自远方来</q>
ruby标签：语言元素。常用于帮助读者正确发音。<ruby>夔<rp>（</rp><rt>kui</rt><rp>）</rp></ruby><rp><rt>用来帮助读者掌握表意语言文字的正确发音。比如说汉语拼音在文字的上方。
bdo标签：设置文字方向<bdo dir="rtl">设置文字方向</bdo>dbo必须使用属性dir才可以设置，一共两个值：rtl从右到左和ltr从左到右。一般默认是ltr。还有一个bdi元素也是处理方向的，由于是特殊语言的效果，并且主流浏览器有些不支持，所以可以忽略。
mark标签：突出显示文本<mark>突出显示文本</mark>加上一个黄色的背景，黑色的字。从语义上来看，与上下文相关而突出的文本，用于记号。
a标签：超链接a元素属于文本元素，有一些私有属性。
href属性 <a href="http://www.baidu.com">百度</a> 这个属性是必须的，否则a元素就变得毫无意义。它的属性值意味着点击跳转到指定的外部网站去。
target属性<a href="http://www.baidu.com" target="_blank">百度</a> 这个属性告诉浏览器希望打开的新窗口显示在哪里。_blank表示在新窗口中打开文档。_self表示在当前窗口打开文档。默认_self。(_parent和_top这些要结合框架来使用，但是基本上用得已经很少了。)
锚点设置：用于将同一个文档中的另一个元素移入视野。说通俗一点就是通过点击这个锚点定位到页面中的某个位置。

</br>