柚子快報(bào)激活碼778899分享：okhttp 網(wǎng)絡(luò)-Ajax

http://yzkb.51969.com/

文章目錄

前言一、Ajax優(yōu)點(diǎn)：缺點(diǎn)：

二、使用步驟XNLHttpRequest對(duì)象完整代碼

總結(jié)

前言

本文主要記錄Ajax技術(shù)的簡(jiǎn)介，以及用法。

一、Ajax

Ajax是一組用于在Web瀏覽器和Web服務(wù)器之間進(jìn)行異步通信的Web開發(fā)技術(shù)。 它代表著Asynchronous JavaScript and XML（異步JavaScript和XML），盡管XML并不總是作為數(shù)據(jù)格式使用。 通過Ajax，Web應(yīng)用程序可以在不重新加載整個(gè)頁面的情況下更新頁面的部分內(nèi)容。這樣可以實(shí)現(xiàn)更加交互和響應(yīng)式的用戶體驗(yàn)。 Ajax使用JavaScript發(fā)送請(qǐng)求到服務(wù)器并異步處理響應(yīng)，而不會(huì)阻塞用戶界面。 可以通過 JavaScript 和XNLHttpRequest對(duì)象來向服務(wù)器請(qǐng)求數(shù)據(jù)

Ajax可以用于執(zhí)行各種任務(wù)，例如從服務(wù)器檢索數(shù)據(jù)、提交表單數(shù)據(jù)和動(dòng)態(tài)更新內(nèi)容。 它通常用于現(xiàn)代Web應(yīng)用程序中，用于創(chuàng)建自動(dòng)完成搜索框、實(shí)時(shí)更新和無限滾動(dòng)等交互功能。

優(yōu)點(diǎn)：

提高用戶體驗(yàn)：通過減少頁面重載和刷新，使得網(wǎng)站變得更加靈活和動(dòng)態(tài)減輕服務(wù)器負(fù)載：可以有效減少服務(wù)器接收到的請(qǐng)求次數(shù)和需要響應(yīng)的數(shù)據(jù)量，從而減輕服務(wù)器負(fù)擔(dān)提高響應(yīng)速度：可以異步獲取數(shù)據(jù)并更新頁面，從而提高響應(yīng)速度增加交互：使頁面變得可交互性

缺點(diǎn)：

對(duì)搜索引擎優(yōu)化（SEO）不友好，爬蟲無法抓取Ajax中的內(nèi)容與URL ===>考慮用SSR服務(wù)端渲染技術(shù)需要考慮安全性問題，數(shù)據(jù)和網(wǎng)絡(luò)安全需要采取對(duì)應(yīng)的措施

二、使用步驟

XNLHttpRequest對(duì)象

創(chuàng)建對(duì)象xhr：

const xhr = new XMLHttpRequest()

open方法：接收三個(gè)參數(shù)分別是 請(qǐng)求方式、請(qǐng)求地址、是否異步：默認(rèn)為true

xhr.open('post','http://localhost:3000/api/post',true)

setRequestHeader方法:用于為請(qǐng)求的HTTP頭設(shè)置值。

setRequestHeader("header", "value")

onreadystatechange方法：監(jiān)聽服務(wù)端返回的數(shù)據(jù)

xhr.onreadystatechange = () =>{

console.log(xhr)

if (xhr.readyState === 4 && xhr.status === 200) {

console.log(xhr.responseText)

}

}

readyState屬性：

0：未初始化，XNLHttpRequest已經(jīng)創(chuàng)建，但未調(diào)用open方法1：已打開，open方法已調(diào)用，send方法未調(diào)用2：已發(fā)送，send方法已調(diào)用，服務(wù)端接收到請(qǐng)求3：正在接收，服務(wù)器正在處理請(qǐng)求并返回?cái)?shù)據(jù)4：完成，服務(wù)端已完成數(shù)據(jù)傳輸 status屬性: 200成功 400參數(shù)錯(cuò)誤 403沒有權(quán)限 401token找不到 404未找到 500服務(wù)器錯(cuò)誤send方法：給服務(wù)端發(fā)送的數(shù)據(jù)

xhr.send(JSON.stringify({name:'smz'}))

abort方法:用于停止或放棄當(dāng)前異步請(qǐng)求。必須在open方法后,無法恢復(fù)。

stop.addEventListener('click',()=>{

xhr.abort()

})

getResponseHeader方法:用于以字符串形式返回指定的HTTP頭信息。

getResponseHeader("headerLabel")

getAllResponseHeaders方法:用于以字符串形式返回完整的HTTP頭信息。

getAllResponseHeaders()

監(jiān)聽進(jìn)度：

給xhr對(duì)象添加一個(gè)progress事件，返回event

event.loaded：當(dāng)前進(jìn)度 event.total：總進(jìn)度

xhr.addEventListener('progress',(event)=>{

console.log(event.loaded,event.total)

})

設(shè)置超時(shí)：xhr.timeout = 3000 超時(shí)回調(diào)：監(jiān)聽timeout事件

xhr.addEventListener('timeout',()=>{

alert('請(qǐng)求超時(shí)')

})

中斷回調(diào)：監(jiān)聽abort事件

xhr.addEventListener('abort',()=>{

console.log('請(qǐng)求中斷')

})

監(jiān)聽load事件：也可以監(jiān)聽請(qǐng)求是否成功，就不用判斷readyState的值

xhr.addEventListener('load',()=>{

if (xhr.status === 200){

console.log('請(qǐng)求成功，觸發(fā)onload')

}

})

post請(qǐng)求：請(qǐng)求參數(shù)要放在send()中

完整代碼

前端代碼

后端代碼：這里用的node

const express = require('express')

const app = express()

const multer = require('multer')

const single = multer.diskStorage({

destination: (req, file, cb) => {

cb(null, './upload')

},

filename: (req, file, cb) => {

cb(null, Date.now() + file.originalname)

}

})

const upload = multer({

single

})

app.get('/api/txt',(req,res)=>{

res.setHeader('Access-Control-Allow-Origin','*')

const {name} = req.query // 函數(shù)名

let text = ''

for(let i=0;i<10000;i++){

text += `${name}Ajax`

}

res.send( text)

})

app.use(express.json())

app.use(express.urlencoded({extended:true}))

// post請(qǐng)求

app.post('/api/post',(req,res)=>{

res.setHeader('Access-Control-Allow-Origin','*')

console.log(req.body)

res.json({

code:200,

data:{

name: req.body.name

}

})

})

// 預(yù)檢請(qǐng)求放行

app.options('/api/*', (req,res) => {

res.setHeader("Access-Control-Allow-Origin","*")

res.setHeader("Access-Control-Allow-Headers", "*");

res.end()

})

//傳文件

app.post('/api/upload',upload.single('file'),(req,res)=>{

console.log(req.file)

res.setHeader('Access-Control-Allow-Origin','*')

res.json({

code:200

})

})

app.listen(3000,()=>{

console.log('server is running')

})

總結(jié)

axios第三方庫對(duì)Ajax做了一些封裝，本文主要記錄了Ajax的介紹與使用。

柚子快報(bào)激活碼778899分享：okhttp 網(wǎng)絡(luò)-Ajax

http://yzkb.51969.com/

精彩鏈接