一、 AJAX 和 Fetch 對(duì)比
1.1 AJAX 概述
AJAX 是最早出現(xiàn)請(qǐng)求數(shù)據(jù)的方式,它不需要不需要刷新整個(gè)頁(yè)面即可更新部分?jǐn)?shù)據(jù)。
屬于原生 JS 范疇 ,技術(shù)核心是 XMLHttpRequest 對(duì)象。
AJAX 請(qǐng)求過(guò)程:創(chuàng)建 XMLHttpRequest 對(duì)象、連接服務(wù)器、發(fā)送請(qǐng)求、接收響應(yīng)數(shù)據(jù)
一般使用之前,我們都需要把它們封裝使用,如下:文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-608666.html
const ajax = function() {
// 創(chuàng)建xhr對(duì)象
// 判斷瀏覽器是否支持XMLHttpRequest
let xhr;
if (window.XMLHttpRequest) {
// 高級(jí)瀏覽器
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE低版本
xhr = new ActiveXObject();
} else {
alert('你的瀏覽器不支持ajax')
}
// get 請(qǐng)求
this.get = function(url,param) {
// param 為原始數(shù)據(jù)類(lèi)型
// get請(qǐng)求沒(méi)有請(qǐng)求體,因此常常將數(shù)據(jù)放在地址上,作為請(qǐng)求頭的一部分(query數(shù)據(jù))
xhr.open('get',url + '?param=' + param,true) // 第三個(gè)參數(shù)異步與否
// 監(jiān)聽(tīng)數(shù)據(jù)返回
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-608666.html
到了這里,關(guān)于【前后端數(shù)據(jù)交互】原生JS的Fetch請(qǐng)求封裝的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!