AJAX 是Asynchronous JavaScript And XML的縮寫，
它不是一種編程語言，它是一種基于HTML、CSS、JavaScript 和 XML，讓開發更好、更快和更有互動的 Web 應用的技術，
什么是ajax
認識前后端互動
前后端互動就是前端與后端的一種通訊方式，主要使用的技術堆疊就是ajax (async javascript and xml
ajax 特點
使用 ajax 技術網頁應用能夠快速的將新內容呈現在用戶界面，并且不需要重繪整個頁面, 也就是能夠讓頁面有 "無刷更新" 的效果
注意點
前后端互動只能互動字串，并且有自己的固定步驟
創建ajax 基本步驟的是什么
1.創建 ajax 物件
const xhr = new XMLHttpRequest()
2.配置 ajax 物件
// xhr.open('請求的方式', '請求的地址', 是否異步)
xhr.open('GET', 'http://localhost:8888/test/first', true)
3.發送請求
xhr.send()
4.接收回應
xhr.onload = function () {
console.log('請求回來了~~~~~~~~')
console.log(xhr.responseText)
}
ajax 狀態碼有哪些
簡單來說其實就是用一個數字表明了當前 ajax 運行到哪一步了
語法: xhr.readyState
0: 創建 ajax 成功
1: 當前 ajax 配置成功
2: 當前 ajax 發送成功(回應已經回到瀏覽器了)
3: 表示瀏覽器當前正在決議本次回應, 但可能還沒完成
4: 表示瀏覽器已經完成決議本次回應, 可以正常使用 responseText 了
0 和 1, 比較好列印, 2/3/4 這幾個我們可以借助一個事件去列印
readyStatechange 事件
通過事件名其實就可以看出, 當 readyState 發生改變時就會執行
const xhr = new XMLHttpRequest()
console.log(xhr.readyState) // 0
xhr.open('GET', 'http://localhost:8888/test/first', true) console.log(xhr.readyState) // 1
xhr.onreadystatechange = function () {
if (xhr.readyState === 2) console.log(xhr.responseText)
if (xhr.readyState === 3) console.log(xhr.responseText)
if (xhr.readyState === 4) console.log(xhr.responseText)
}
xhr.send()
ajax 常見請求方式有哪些
GET
○表示向服務器獲取資源
POST
表示向服務器提交資訊，通常用于產生新的資料，比如注冊
PUT
表示希望修改服務器的資料, 通常用于修改某資料
DELETE
表示希望洗掉服務器的資料
OPTIONS
發生在跨域的預檢請求中，表示客戶端向服務器申請跨域提交
ajax 中 get 和 post 請求攜帶引數的方式
GET
直接拼接在請求路徑后, 以 ? 間隔, 使用 key=value 的形式書寫, 當有多個引數的時候用 & 連接
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://localhost:8888/test/third?name=QF666&age=18') xhr.send()
xhr.onload = function () {
let res = JSON.parse(xhr.responseText)
console.log(res) }
POST
在請求體內攜帶引數(其實就是 send 小括號內部)
并且需要設定請求頭內部的 content-type
■ 如果引數為 查詢字串, 需要添加:
● 'xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')'
■ 如果引數為 JSON 字串, 需要添加:
● 'xhr.setRequestHeader('content-type', 'application/json')'
const xhr = new XMLHttpRequest()
xhr.open('POST', 'http://localhost:8888/test/fourth')
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send('name=QF666&age=18')
xhr.onload = function () {
let res = JSON.parse(xhr.responseText)
console.log(res)
}
ajax 中 get 和 post 的區別有哪些
1.攜帶引數的位置
a.GET: 直接在地址后面書寫
b.POST: 在請求體內書寫
2.攜帶引數的大小
a.GET: 2kb(左右)
b.POST: 原則上不限制大小, 但是服務器可以做出限制
3.攜帶引數的格式
a.GET: 只能攜帶查詢字串格式
b.POST: 原則上不限制格式, 但是需要在請求報文的 content-type 做出配置
4.安全性(相對)
a.GET: 明文發送, 相對不安全
b.POST: 暗文發送, 相對安全
由于內容比較多，我們Ajax分為上下兩部分內容，以上就是我們JavaScript講解Ajax上部分的內容啦，下期精彩繼續！大家可以持續關注~
更多技術類內容，點我主頁查看
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/552864.html
標籤：其他
上一篇：使用taro+canvas實作微信小程式的圖片分享功能
下一篇：返回列表