Ajax 第一天

Ajax第一天

服務(wù)器相關(guān)的基礎(chǔ)概念

服務(wù)器

服務(wù)器本身就是一臺電腦

服務(wù)器作用:

  • 存儲網(wǎng)站文件
  • 提供網(wǎng)站文件給用戶

服務(wù)器上的 網(wǎng)頁(html文件)、圖片、音樂、視頻、字體文件、CSS文件、JS文件等等都稱之為資源。所以資源代指服務(wù)器上存儲的內(nèi)容

客戶端

前端開發(fā)中,客戶端指的 web瀏覽器

常見的瀏覽器

  • Chrome 谷歌瀏覽器
  • Firefox 火狐瀏覽器
  • Edge 微軟
  • Safari 蘋果
  • Opera 歐朋瀏覽器

URL 地址(統(tǒng)一資源定位符)

URL 地址,表示服務(wù)器上每個資源的確切位置

服務(wù)器上的每個資源,都對應(yīng)著獨(dú)一無二的URL地址

客戶端與服務(wù)器通信的過程

分為請求 - 響應(yīng)兩個步驟

  • 請求的概念:客戶端通過網(wǎng)絡(luò)去找服務(wù)器要資源的過程,叫做“請求”

  • 響應(yīng)的概念:服務(wù)器把資源通過網(wǎng)絡(luò)發(fā)送給客戶端的過程,叫做“響應(yīng)”

    [圖片上傳失敗...(image-535355-1652874051481)]

什么是Ajax

Ajax 是瀏覽器中的一種技術(shù),用來實現(xiàn),客戶端網(wǎng)頁向服務(wù)器請求數(shù)據(jù)。

Asynchronous Javascript And XML,簡稱 Ajax (異步的JS和XML)

Ajax過程:用戶發(fā)起請求,通過瀏覽器告知服務(wù)器;服務(wù)器根據(jù)請求內(nèi)容,做出響應(yīng),返回數(shù)據(jù)或資源;再通過瀏覽器解析和呈現(xiàn)給用戶

[圖片上傳失敗...(image-b856e5-1652874051481)]

同步和異步

  1. 同步 阻塞類型

    代碼的執(zhí)行方式 從上往下 一步一步執(zhí)行

    console.log(1)
    console.log(2)
    
  1. 異步 非阻塞類型

    代碼可以同時執(zhí)行多段情況

    Ajax 定時器 延時器

XML

是一種數(shù)據(jù)格式 類似HTML 都是屬于標(biāo)記語言

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

JSON

json 的全稱為:JavaScript Object Notation,是一種輕量級的數(shù)據(jù)交互格式

類似對象的字符串

目前主流的和服務(wù)器交互的數(shù)據(jù)格式

"{"name":"菜鳥教程","url":"www.runoob.com","slogan":"學(xué)的不僅是技術(shù),更是夢想!"}"

瀏覽器和服務(wù)器交互的過程

瀏覽器負(fù)責(zé)發(fā)起請求

服務(wù)器負(fù)責(zé)響應(yīng)數(shù)據(jù)

請求的三大關(guān)鍵

請求地址 url

問后端要

請求方式

3.png

請求參數(shù)

看后端給的接口文檔

axios 發(fā)送請求

get 請求 獲取數(shù)據(jù)

2.png

發(fā)送get請求 帶參數(shù) 有兩種方式

  • 在 URL 上面拼接

    以英文 問號 分割 ? 前面是url地址 后面是參數(shù) a=1 多個參數(shù)用 & 連接 a=1&b=2

     axios({
                url :'http://www.itcbc.com:3006/api/getbooks?bookname=斗破蒼穹134&author=土豆',
                method : 'GET',
            })
    
  • 在params 對象中攜帶

    axios({
                url :'http://www.itcbc.com:3006/api/getbooks',
                method : 'GET',
                params : {
                    bookname :'斗破蒼穹134',
                    author : '土豆'
                }
            })
    

post 請求 新增數(shù)據(jù)

4.png

請求的參數(shù) 用data 來傳遞

axios({
            url : 'http://www.itcbc.com:3006/api/addbook',
            method : 'post',
            data : {
                bookname : '入門到放棄',
                author : '黑馬',
                publisher : '白馬',
                appkey : 'wushizhao'
            }
        })

delete 請求 刪除

6.png

參數(shù)用params

axios({
                  url : 'http://www.itcbc.com:3006/api/delbook',
                  method : 'DELETE',
                  params : {
                      appkey : 'wushizhao',
                      id,
                  }
              })

put 修改 側(cè)重完整更新

7.png

參數(shù) 用data 傳遞

axios({
               url : 'http://www.itcbc.com:3006/api/updatebook',
               method : 'put',
               data :{
                   id,
                   bookname : newBookname,
                   author : newAuthor,
                   publisher : newPublisher,
                   appkey : 'wushizhao'
               }
           })

谷歌瀏覽器調(diào)試

5.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容