淺瞭解http和https

HTTP協議以名文的方式傳送內容，不會提供任何方式的資料加密。HTTP協議不適合傳輸一些敏感資訊，比如（信用卡號，密碼等支付資訊）

HTTPS則是具有安全性的ssl加密傳輸協議。

HTTP和HTTPS使用的是完全不同的連線方式，用的埠也不一樣，HTTP協議使用的是80埠，HTTPS協議使用的是443.並且HTTPS協議需要使用ca申請證書。

HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸，身份認證的網路協議，要比HTTP協議更加安全一些。

HTTPS協議主要的作用可以分為兩種：一種是建立一個資訊保安通道，來保證資料傳輸的安全；另一種就是確認網站的真實性。

HTTPS在HTTP的基礎上加入了SSL協議，SSL依靠證書來驗證伺服器身份，併為瀏覽器和伺服器之間的通訊加密。

Ajax的作用

在瀏覽器中的地址輸入URL，即可和伺服器進行通訊，但是這種方式頁面會進行重新載入，而Ajax就是可以在不重新整理頁面的請款下，和伺服器進行互動，不會重新整理頁面

初次體驗Ajax

<script>
    // ajax前後端互動程式碼
    axios({
        url: `URL`,
        method:`get`,
    }).then((res) => {
        console.log(res)
        if (res.data.data.errcode === 100){
            alert(`該城市天氣預報未得到`)
        } 
 
else {
            alert(res.data.data.data[0].wea)
        }
    })
    // 匯入了axios網路請求庫
    // 在輸入框按下回車，並且內容不為空時和伺服器互動=>請求地址就是伺服器的資源地址
    // 伺服器內容響應回來之後出發then響應
    // 將獲取到的相應內容設定給then中回撥函式的引數
</script>

介面

介面時後端寫好的伺服器，或者後端寫好的文件資源，我們在後端提供的介面文件中找到介面並且呼叫即可

使用Ajax和伺服器進行通訊時，被請求的URL地址，叫做資料介面

Ajax請求的伺服器一般稱為，介面伺服器

介面伺服器一般提供操作伺服器資料的一系列方法

呼叫介面有點類似於呼叫後端封裝好的函式

Ajax的請求方法

post：向伺服器新增資料（傳遞）

get：從伺服器獲取資料

delete：刪除伺服器上的資料

put：更新伺服器上的資料

path：更新伺服器上的資料

get請求

<h2>git請求+引數更換</h2>
<button class="btn1">測試</button>
<button class="btn2">測試新增引數</button>
<script src="./lib/axios.js"></script>
<script>
  const btn1 = document.querySelector(`.btn1`)
  btn1.addEventListener(`click`,() => {
    // 傳送get請求
    axios.get('http://ajax-api.itheima.net/api/books')
            // 成功進入這裡    // 失敗進入這裡
            .then(res => {console.log(res)})
            .catch(err => {console.log(err)})
  })
  // 如果有引數
  const btn2 = document.querySelector(`.btn2`)
  btn2.addEventListener(`click`,()=>{
    console.log(1)
    // axios.get("http://ajax-api.itheima.net/api/robot?spoken='你吃飯了嗎'")
    axios.get("http://ajax-api.itheima.net/api/robot",{params:{spoken: `你吃飯了嗎`}})
            .then(response => {console.log(response)})
            .catch(error => {console.log(error)
    })
  })
</script>

post請求

<h2>post請求+引數</h2>
<button class="btn1">測試</button>
<script src="./課堂案例/lib/axios.js"></script>
<script>
    const btn1 = document.querySelector(`.btn1`)
    btn1.onclick = () => {
        axios.post('http://ajax-api.itheima.net/api/login', {
            username : `admin`,
            password : `123456`
        })
            .then(function (response) {  //請求成功
                console.log(response);
            })
            .catch(function (error) {   //請求失敗
                console.log(error);
            });
    }

</script>

狀態碼

1** 資訊，伺服器收到請求，需要請求者繼續執行操作

2** 成功，操作被成功接收並處理

3** 重定向，需要進一步的操作以完成處理

4** 客戶端錯誤，請求包含錯誤或者無法完成的請求

5** 伺服器錯誤，伺服器在處理請求的過程中發生了錯誤

200 請求成功

201 資源在伺服器已成功建立

304 資源在客戶端被快取，響應體中不包含任何資源內容

400 客戶端的請求方法，或請求引數有誤，導致失敗

401 客戶端的使用者身份認證未通過，導致此次請求失敗

404 客戶端請求的資源地址錯誤，導致伺服器無法找到資源

500 伺服器內部錯誤，導致本次請求失敗