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

http://yzkb.51969.com/

文章目錄

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

二、使用步驟XNLHttpRequest對象完整代碼

總結(jié)

前言

本文主要記錄Ajax技術的簡介，以及用法。

一、Ajax

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

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

優(yōu)點：

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

缺點：

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

二、使用步驟

XNLHttpRequest對象

創(chuàng)建對象xhr：

const xhr = new XMLHttpRequest()

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

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

setRequestHeader方法:用于為請求的HTTP頭設置值。

setRequestHeader("header", "value")

onreadystatechange方法：監(jiān)聽服務端返回的數(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)用，服務端接收到請求3：正在接收，服務器正在處理請求并返回數(shù)據(jù)4：完成，服務端已完成數(shù)據(jù)傳輸 status屬性: 200成功 400參數(shù)錯誤 403沒有權(quán)限 401token找不到 404未找到 500服務器錯誤send方法：給服務端發(fā)送的數(shù)據(jù)

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

abort方法:用于停止或放棄當前異步請求。必須在open方法后,無法恢復。

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

xhr.abort()

})

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

getResponseHeader("headerLabel")

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

getAllResponseHeaders()

監(jiān)聽進度：

給xhr對象添加一個progress事件，返回event

event.loaded：當前進度 event.total：總進度

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

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

})

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

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

alert('請求超時')

})

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

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

console.log('請求中斷')

})

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

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

if (xhr.status === 200){

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

}

})

post請求：請求參數(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請求

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

}

})

})

// 預檢請求放行

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第三方庫對Ajax做了一些封裝，本文主要記錄了Ajax的介紹與使用。

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

http://yzkb.51969.com/

精彩鏈接