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)]
同步和異步
-
同步 阻塞類型
代碼的執(zhí)行方式 從上往下 一步一步執(zhí)行
console.log(1) console.log(2)
-
異步 非阻塞類型
代碼可以同時執(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
問后端要
請求方式
請求參數(shù)
看后端給的接口文檔
axios 發(fā)送請求
get 請求 獲取數(shù)據(jù)
發(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ù)
請求的參數(shù) 用data 來傳遞
axios({
url : 'http://www.itcbc.com:3006/api/addbook',
method : 'post',
data : {
bookname : '入門到放棄',
author : '黑馬',
publisher : '白馬',
appkey : 'wushizhao'
}
})
delete 請求 刪除
參數(shù)用params
axios({
url : 'http://www.itcbc.com:3006/api/delbook',
method : 'DELETE',
params : {
appkey : 'wushizhao',
id,
}
})
put 修改 側(cè)重完整更新
參數(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)試
