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 >百度</a> 這個屬性是必須的，否則a元素就變得毫無意義。它的屬性值意味著點擊跳轉到指定的外部網站去。
target屬性<a target="_blank">百度</a> 這個屬性告訴瀏覽器希望打開的新窗口顯示在哪里。_blank表示在新窗口中打開文檔。_self表示在當前窗口打開文檔。默認_self。(_parent和_top這些要結合框架來使用，但是基本上用得已經很少了。)
錨點設置：用于將同一個文檔中的另一個元素移入視野。說通俗一點就是通過點擊這個錨點定位到頁面中的某個位置。

</br>