AJAX學(xué)習(xí)day-1

：本人CSDN賬戶為：小白一枚2號(hào)，發(fā)這里主要是想賺點(diǎn)廣告錢

（tmd打個(gè)勾八暑假工，學(xué)到技術(shù)才是硬道理）

注：文件布局：

一、AJAX的概念：

AJAX是瀏覽器與服務(wù)器進(jìn)行數(shù)據(jù)通信的技術(shù) =>把數(shù)據(jù)變活

二、AJAX的使用：

使用axios庫(kù)，與服務(wù)器進(jìn)行數(shù)據(jù)通信

基于XMLHttpRequest封裝，代碼簡(jiǎn)單
Vue,React項(xiàng)目使用

學(xué)習(xí)XMLHttpRequest對(duì)象，了解AJAX底層原理

1.axios庫(kù)的初步使用：

（非頭條內(nèi)部地址不讓傳，只好用這種形式）

引入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函數(shù)詳解：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:'目標(biāo)資源地址'
        }).then((result)=>{
            //對(duì)服務(wù)器返回的數(shù)據(jù)做后續(xù)處理
        })
    </script>
</body>
</html>

目標(biāo)資源：http://hmajax.itheima.net/api/province：省份列表數(shù)據(jù)

2.使用URL進(jìn)行參數(shù)查詢：

URL后加 ?pname=河北省

語(yǔ)法：http://xxx.com/xxx/xxx?參數(shù)名1=值1&參數(shù)名2=值2

axios({
                url: 'http://hmajax.itheima.net/api/area',
                params: {
                    pname: `${query1.value}`,// 參數(shù)1
                    cname: `${query2.value}` // 參數(shù)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.常用的請(qǐng)求方法與數(shù)據(jù)提交：

概念：對(duì)服務(wù)器資源要執(zhí)行的操作

axios的請(qǐng)求配置：

請(qǐng)求方法	操作
GET(get)	獲取數(shù)據(jù)
POST(post)	提交數(shù)據(jù)
PUT(put)	修改數(shù)據(jù)（全部）
DELETE(delete)	刪除數(shù)據(jù)
PATCH(patch)	修改數(shù)據(jù)（部分）

url ：請(qǐng)求的URL網(wǎng)址

method ：請(qǐng)求的方法，GET可以省略（不區(qū)分大小寫）

params：查詢參數(shù)

data：提交的數(shù)據(jù)

//獲取數(shù)據(jù)
axios({
            url: '目標(biāo)資源地址',
            //method: 'get',
            params:{
                參數(shù)名:值
            }
        }).then((result) => {
            //對(duì)返回的數(shù)據(jù)的處理
        })

//提交數(shù)據(jù)        
axios({
            url: '目標(biāo)資源地址',
            method: 'post',
            data: {
                參數(shù)名: 值
            }
        }).then((result) => {
            //對(duì)返回的數(shù)據(jù)的處理
        })

4.axios的錯(cuò)誤處理：

服務(wù)器返回的信息：Uncaught大對(duì)象里的data

語(yǔ)法格式：

 axios({
            //請(qǐng)求項(xiàng)
        }).then(result=>{
            //處理數(shù)據(jù)
        }).catch(error=>{
            //處理錯(cuò)誤
        })

三、HTTP協(xié)議：

大佬方法：

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

1.請(qǐng)求報(bào)文：

HTTP協(xié)議：規(guī)定了瀏覽器發(fā)送及服務(wù)器返回內(nèi)容的格式

請(qǐng)求報(bào)文：瀏覽器按照HTTP協(xié)議要求的格式，發(fā)送給服務(wù)器的內(nèi)容

請(qǐng)求報(bào)文樣例：

組成部分：

請(qǐng)求行：請(qǐng)求方法，URL，協(xié)議
請(qǐng)求頭：以鍵值對(duì)格式攜帶的附加信息，例如：Content-Type（本次瀏覽器攜帶的內(nèi)容類型）
空行：分割請(qǐng)求頭和內(nèi)容數(shù)據(jù)，空行后是內(nèi)容數(shù)據(jù)（發(fā)給服務(wù)器的資源）
請(qǐng)求體：發(fā)送的資源

查看請(qǐng)求報(bào)文：

如同所示：就是請(qǐng)求報(bào)文經(jīng)過(guò)計(jì)算機(jī)解析后的形式

2.用請(qǐng)求報(bào)文排查錯(cuò)誤：

查看提交的信息，判斷錯(cuò)誤位置

3.響應(yīng)報(bào)文：

HTTP協(xié)議：規(guī)定了瀏覽器發(fā)送及服務(wù)器返回內(nèi)容的格式

響應(yīng)報(bào)文：服務(wù)器按照HTTP協(xié)議要求的格式，發(fā)送給瀏覽器的內(nèi)容

響應(yīng)行（狀態(tài)行）：協(xié)議，HTTP響應(yīng)狀態(tài)碼（400表示響應(yīng)失敗）、狀態(tài)信息
響應(yīng)頭：以鍵值對(duì)的格式攜帶的附加信息，如：Conttent-Type
空行：分割響應(yīng)頭
響應(yīng)體：返回的資源

查看響應(yīng)報(bào)文：

HTTP狀態(tài)碼：用來(lái)表明，請(qǐng)求是否成功

狀態(tài)碼	說(shuō)明
1xx	信息
2xx	成功
3xx	重新定向消息
4xx	客戶端錯(cuò)誤
5xx	服務(wù)端錯(cuò)誤

常見(jiàn)狀態(tài)碼：

200：成功

404：服務(wù)器找不到資源

四、接口文檔：

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

接口：使用AJAX和服務(wù)器通訊是使用的URL，請(qǐng)求方法，及參數(shù)

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用來(lái)確定區(qū)間

name是鍵名

value是值

其中：hash 設(shè)置獲取的數(shù)據(jù)結(jié)構(gòu)：

true：獲取得到JS對(duì)象
false：獲取得到查詢字符串

empty 設(shè)置是否獲取空值：

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('用戶名或密碼錯(cuò)誤')

            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('用戶名長(zhǎng)度不能少于8位', 0)

                return //阻止代碼繼續(xù)執(zhí)行
            }
            else if (data.password.length < 6) {
                alertFn('密碼長(zhǎng)度不能少于6位', 0)

                return //阻止代碼繼續(xù)執(zhí)行
            }
            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.直接登入時(shí)或用戶名長(zhǎng)度少于8位時(shí)（直接點(diǎn)提交）：

3.無(wú)密碼時(shí)或密碼少于6位時(shí)（用戶名為 : itheima007）：

4.登入失敗時(shí)：

5.成功登入（用戶名：itheima007 密碼：7654321）：

了一整晚三個(gè)小時(shí)給大家整合的配色網(wǎng)站合集

希望看完可以評(píng)論點(diǎn)贊收藏或者轉(zhuǎn)發(fā)都可以

adobe color

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

搜索過(guò)去4000年來(lái)使用的180個(gè)調(diào)色板

https://colorleap.app/home

Picular是使用谷歌圖像搜索的火箭快速原色發(fā)生器

https://picular.co/

自定義配色網(wǎng)站-我進(jìn)去就蒙了

https://colourco.de/

對(duì)比度測(cè)試網(wǎng)站

https://colorable.jxnblk.com

Palettte App-最終的調(diào)色板編輯和重新映射工具

https://palettte.app

Colorinspire-精選色彩靈感

https://www.colorinspire.io

ColorSpace-調(diào)色板生成器和顏色漸變工具

https://mycolor.space

Pigment-大力推薦，誰(shuí)用誰(shuí)知道

https://pigment.shapefactory.co

Adobe Color-教科書式的取色（同類色、互補(bǔ)色、對(duì)比色...）

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

Colors & Fonts-調(diào)色板和字體配對(duì)靈感的集合

https://www.colorsandfonts.com

HueSnap-創(chuàng)建調(diào)色板并與他人共享

https://www.huesnap.com

Culrs-好像沒(méi)什么特別

https://culrs.com/#/

Eva Design System-有點(diǎn)卡

https://eva.design

Scale-我詞窮了，但是真的很棒

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

Site Palette-真的編不下去了

https://palette.site

BrandColors-要不你們來(lái)試試？

https://brandcolors.net

Colorwise-Product Hunt中搜索投票最多的產(chǎn)品

https://colorwise.io

HTML Color Codes-作用不是太大

https://htmlcolorcodes.com

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

https://www.colorbox.io

Generate — Coolors.co-一個(gè)打開(kāi)很快的配色網(wǎng)站

https://coolors.co

Cloudflare Design-用于界面設(shè)計(jì)的調(diào)色板工具

https://cloudflare.design/color/

Instant Duotone Effect Generator-雙色圖

https://medialoot.com/duotones/

Color Tool-為UI創(chuàng)建和共享調(diào)色板

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

Blendy-類似ps色彩蒙版

https://blendy.ml

LOL Colors-水滴形調(diào)色盤

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

Color Hunt-誰(shuí)用誰(shuí)知道

https://colorhunt.co

ColorMe-可視化CSS顏色功能

https://colorme.io

Gradient Hunt-漸變色

https://gradienthunt.com

ColorSpark-隨機(jī)生成單色/漸變

https://colorspark.app

Sip-適用于Mac的Sip Color Picker

https://sipapp.io

CoolHue 2.0-獲得免費(fèi)的草圖漸變顏色插件和漸變集合調(diào)色板

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

Color Koala-打開(kāi)迅速

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-超級(jí)牛逼的網(wǎng)站一定要試試大力推薦*****

隨便下載一個(gè)都能去昵圖上賣共享分你信我!!!

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-輕松計(jì)算顏色對(duì)比度

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

言：萬(wàn)物之始，大道至簡(jiǎn)，演化至繁。水滴不染塵世浮華，方能純凈如冰川靈動(dòng)如絲絨。落紅不逐春日絢爛，方有一年春盡一年春。

一、html5的介紹

1.1介紹

html號(hào)稱超文本標(biāo)記語(yǔ)言，代表著瀏覽器技術(shù)發(fā)展的一個(gè)階段。html版本1到版本5的更新迭代都是由組織W3C管理的。當(dāng)時(shí)到html4.1的時(shí)候，W3C組織就聲稱不再更新版本了。而改用XHTML。但是由于瀏覽器的各種不兼容的問(wèn)題，于是乎W3C這個(gè)組織就和其他的瀏覽器產(chǎn)商一起聯(lián)合起來(lái)將這門語(yǔ)言再次更新到html5

比喻：

html5 >機(jī)器人的骨骼

css3 >機(jī)器人的外在修飾

js > 機(jī)器人的行為如行走、抬腿

Jquery > 封裝好的控制行為的庫(kù)，可以提高效率

1.2優(yōu)勢(shì)

易用性
支持視頻和音頻
互動(dòng)性高
支持移動(dòng)設(shè)備
未來(lái)的趨勢(shì)

1.3開(kāi)發(fā)工具

HBuild、WebStrom、sublime Text

二、代碼規(guī)范

2.1代碼規(guī)范

新建一個(gè)Web項(xiàng)目

相比html4來(lái)說(shuō)，html5的語(yǔ)法更加簡(jiǎn)潔并且在規(guī)定上也更加寬松。

單標(biāo)簽不用寫關(guān)閉符號(hào)
雙標(biāo)簽省略結(jié)束標(biāo)簽
html、head、body、colgroup、tbody可以完全省略
刪除其中一些，打開(kāi)瀏覽器的檢查元素功能，也不會(huì)報(bào)錯(cuò)

三、各類標(biāo)簽

3.1文本標(biāo)簽

b標(biāo)簽：表示關(guān)鍵字和產(chǎn)品名稱。<b>html</b>其實(shí)它的實(shí)際作用就是將一段文字加粗。但是并不是特別強(qiáng)調(diào)它的重要性。比如說(shuō)：在一段文字當(dāng)中出現(xiàn)的某些關(guān)鍵字或者產(chǎn)品的名稱就可以用b標(biāo)簽
strong標(biāo)簽：表示比較重要的文字<strong>html</strong>它的作用也是加粗，只是它在強(qiáng)調(diào)一段比較重要的文本
br單標(biāo)簽：換行
wbr標(biāo)簽：安全換行you've no idea how worried <wbr> i was當(dāng)用戶對(duì)網(wǎng)頁(yè)進(jìn)行縮放的時(shí)候可能會(huì)有一些單詞被擠到下一行。如果不行某個(gè)單詞被分離的話，可以使用安全換行標(biāo)簽
i標(biāo)簽：傾斜。em標(biāo)簽語(yǔ)義一樣，但em表示強(qiáng)調(diào)<i>傾斜標(biāo)簽</i>它用于表示外文詞匯或科技術(shù)語(yǔ)
s標(biāo)簽：刪除線。del標(biāo)簽表示強(qiáng)調(diào)。<s>html</s>刪除線
u標(biāo)簽：給文字加下劃線。ins標(biāo)簽表示強(qiáng)調(diào)<u>html</u>下劃線
small標(biāo)簽：添加小號(hào)字體<small>放小一號(hào)</small>將文本放小一號(hào)。通常用于免責(zé)聲明和澄清聲明。
sub和sup標(biāo)簽：添加上標(biāo)和下標(biāo)X<sub>5</sub>和Y<sup>2</sup>（sub和sup長(zhǎng)差不多，這個(gè)要如何去記憶呢？大家可以看到b的肚子在下面，所以呢它是下標(biāo)，而p的頭部在上方，所以記錄是上標(biāo)。那這樣一來(lái)是不是就感覺(jué)清晰了許多呢）
q標(biāo)簽：引用來(lái)自其它出處的內(nèi)容<q>有朋自遠(yuǎn)方來(lái)</q>
ruby標(biāo)簽：語(yǔ)言元素。常用于幫助讀者正確發(fā)音。<ruby>夔<rp>（</rp><rt>kui</rt><rp>）</rp></ruby><rp><rt>用來(lái)幫助讀者掌握表意語(yǔ)言文字的正確發(fā)音。比如說(shuō)漢語(yǔ)拼音在文字的上方。
bdo標(biāo)簽：設(shè)置文字方向<bdo dir="rtl">設(shè)置文字方向</bdo>dbo必須使用屬性dir才可以設(shè)置，一共兩個(gè)值：rtl從右到左和ltr從左到右。一般默認(rèn)是ltr。還有一個(gè)bdi元素也是處理方向的，由于是特殊語(yǔ)言的效果，并且主流瀏覽器有些不支持，所以可以忽略。
mark標(biāo)簽：突出顯示文本<mark>突出顯示文本</mark>加上一個(gè)黃色的背景，黑色的字。從語(yǔ)義上來(lái)看，與上下文相關(guān)而突出的文本，用于記號(hào)。
a標(biāo)簽：超鏈接a元素屬于文本元素，有一些私有屬性。
href屬性 <a >百度</a> 這個(gè)屬性是必須的，否則a元素就變得毫無(wú)意義。它的屬性值意味著點(diǎn)擊跳轉(zhuǎn)到指定的外部網(wǎng)站去。
target屬性<a target="_blank">百度</a> 這個(gè)屬性告訴瀏覽器希望打開(kāi)的新窗口顯示在哪里。_blank表示在新窗口中打開(kāi)文檔。_self表示在當(dāng)前窗口打開(kāi)文檔。默認(rèn)_self。(_parent和_top這些要結(jié)合框架來(lái)使用，但是基本上用得已經(jīng)很少了。)
錨點(diǎn)設(shè)置：用于將同一個(gè)文檔中的另一個(gè)元素移入視野。說(shuō)通俗一點(diǎn)就是通過(guò)點(diǎn)擊這個(gè)錨點(diǎn)定位到頁(yè)面中的某個(gè)位置。

</br>