柚子快報(bào)激活碼778899分享：前端 AJAX總結(jié)
柚子快報(bào)激活碼778899分享：前端 AJAX總結(jié)
AJAX
1、什么是Ajax
ajax 全名 async javascript and XML(異步JavaScript和XML)
是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)
是前后臺(tái)交互的能? 也就是我們客戶端給服務(wù)端發(fā)送消息的?具，以及接受響應(yīng)的?具
AJAX 不是新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。
AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術(shù)，在不重新加載整個(gè)頁面的情況下。
是?個(gè) 默認(rèn)異步執(zhí)?機(jī)制的功能,AJAX分為同步（async = false）和異步（async = true）
2、同步與異步的區(qū)別
什么是同步請(qǐng)求？(false)
同步請(qǐng)求是指當(dāng)前發(fā)出請(qǐng)求后，瀏覽器什么都不能做， 必須得等到請(qǐng)求完成返回?cái)?shù)據(jù)之后，才會(huì)執(zhí)行后續(xù)的代碼， 相當(dāng)于生活中的排隊(duì)，必須等待前一個(gè)人完成自己的事物，后一個(gè)人才能接著辦。 也就是說，當(dāng)JS代碼加載到當(dāng)前AJAX的時(shí)候會(huì)把頁面里所有的代碼停止加載，頁面處于一個(gè)假死狀態(tài)， 當(dāng)這個(gè)AJAX執(zhí)行完畢后才會(huì)繼續(xù)運(yùn)行其他代碼頁面解除假死狀態(tài)
什么是異步請(qǐng)求？(默認(rèn):true)
默認(rèn)異步：異步請(qǐng)求就當(dāng)發(fā)出請(qǐng)求的同時(shí)，瀏覽器可以繼續(xù)做任何事， Ajax發(fā)送請(qǐng)求并不會(huì)影響頁面的加載與用戶的操作，相當(dāng)于是在兩條線上，各走各的，互不影響。 一般默認(rèn)值為true，異步。異步請(qǐng)求可以完全不影響用戶的體驗(yàn)效果， 無論請(qǐng)求的時(shí)間長或者短，用戶都在專心的操作頁面的其他內(nèi)容，并不會(huì)有等待的感覺。
3.AJAX 的優(yōu)勢(shì)
不需要插件的?持，原? js 就可以使? ?戶體驗(yàn)好（不需要刷新??就可以更新數(shù)據(jù)） 減輕服務(wù)端和帶寬的負(fù)擔(dān) 缺點(diǎn)：搜索引擎的?持度不夠，因?yàn)閿?shù)據(jù)都不在??上，搜索引擎搜索不到
4.實(shí)現(xiàn)AJAX的基本步驟
要完整實(shí)現(xiàn)一個(gè)AJAX異步調(diào)用和局部刷新,通常需要以下幾個(gè)步驟:
創(chuàng)建XMLHttpRequest對(duì)象,即創(chuàng)建一個(gè)異步調(diào)用對(duì)象. 創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法、URL及驗(yàn)證信息. 設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù). 發(fā)送HTTP請(qǐng)求. 獲取異步調(diào)用返回的數(shù)據(jù). 使用JavaScript和DOM實(shí)現(xiàn)局部刷新.
5.AJAX 的使用
在 js 中有內(nèi)置的構(gòu)造函數(shù)來創(chuàng)建 ajax 對(duì)象
創(chuàng)建 ajax 對(duì)象以后，我們就使? ajax 對(duì)象的?法去發(fā)送請(qǐng)求和接受響應(yīng)
Ajax的一個(gè)最大的特點(diǎn)是無需刷新頁面便可向服務(wù)器傳輸或讀寫數(shù)據(jù)(又稱無刷新更新頁面),這一特點(diǎn)主要得益于XMLHTTP組件XMLHTTPRequest對(duì)象。?
XMLHttpRequest 對(duì)象方法描述
1.創(chuàng)建?個(gè) ajax 對(duì)象
?const xhr = new XMLHttpRequest()
上?就有了?個(gè) ajax 對(duì)象 我們就可以使?這個(gè) xhr 對(duì)象來發(fā)送 ajax 請(qǐng)求了
2.配置鏈接信息
XMLHttpRequest 對(duì)象屬性描述(用于和服務(wù)器交換數(shù)據(jù))
?const xhr = new XMLHttpRequest()
?// xhr 對(duì)象中的 open ?法是來配置請(qǐng)求信息的
?// 第?個(gè)參數(shù)是本次請(qǐng)求的請(qǐng)求?式 get / post / put / ...
?// 第?個(gè)參數(shù)是本次請(qǐng)求的 url
?// 第三個(gè)參數(shù)是本次請(qǐng)求是否異步，默認(rèn) true 表示異步，false 表示同步
?// xhr.open('請(qǐng)求?式', '請(qǐng)求地址', 是否異步)
?xhr.open('get', './data.php')
上?的代碼執(zhí)?完畢以后，本次請(qǐng)求的基本配置信息就寫完了
3.發(fā)送請(qǐng)求
?//如需將請(qǐng)求發(fā)送到服務(wù)器，我們使用 XMLHttpRequest 對(duì)象的 open() 和 send() 方法：
?const xhr = new XMLHttpRequest()
?xhr.open('get', './data.php')
?// 使? xhr 對(duì)象中的 send ?法來發(fā)送請(qǐng)求
?xhr.send()
上面代碼是把配置好信息的 ajax 對(duì)象發(fā)送到服務(wù)端
一個(gè)最基本的 ajax 請(qǐng)求就是上面三步 但是光有上面的三個(gè)步驟，我們確實(shí)能把請(qǐng)求發(fā)送到服務(wù)端 如果服務(wù)端正常的話，響應(yīng)也能回到客戶端 但是我們拿不到響應(yīng) 如果想要拿到響應(yīng)，我們需要有兩個(gè)前提條件
本次 HTTP 請(qǐng)求是成功的，也就是我們下面要說的 http 狀態(tài)碼為 200 ~ 299 ajax 對(duì)象也有自己的狀態(tài)碼，用來表示本次 ajax 請(qǐng)求中各個(gè)階段
6.AJAX 狀態(tài)碼
ajax 狀態(tài)碼 - xhr.readyState 是用來表示一個(gè) ajax 請(qǐng)求的全部過程中的某一個(gè)狀態(tài)
?readyState === 0 : 表示未初始化完成，也就是 open 方法還沒有執(zhí)行
?readyState === 1 : 表示配置信息已經(jīng)完成，也就是執(zhí)行完 open 之后
?readyState === 2 : 表示 send 方法已經(jīng)執(zhí)行完成
?readyState === 3 : 表示正在解析響應(yīng)內(nèi)容
?readyState === 4 : 表示響應(yīng)內(nèi)容已經(jīng)解析完畢，可以在客戶端使用了
這個(gè)時(shí)候我們就會(huì)發(fā)現(xiàn)，當(dāng)一個(gè) ajax 請(qǐng)求的全部過程中，只有當(dāng) readyState === 4 的時(shí)候，我們才可以正常使用服務(wù)端給我們的數(shù)據(jù) 所以，配合 http 狀態(tài)碼為 200 ~ 299
? 一個(gè) ajax 對(duì)象中有一個(gè)成員叫做 xhr.status
? 這個(gè)成員就是記錄本次請(qǐng)求的 http 狀態(tài)碼的
兩個(gè)條件都滿足的時(shí)候，才是本次請(qǐng)求正常完成
readyStateChange
在 ajax 對(duì)象中有一個(gè)事件，叫做 readyStateChange 事件 這個(gè)事件是專?用來監(jiān)聽 ajax 對(duì)象的 readyState 值改變的的行為 也就是說只要 readyState 的值發(fā)生變化了，那么就會(huì)觸發(fā)該事件 所以我們就在這個(gè)事件中來監(jiān)聽 ajax 的 readyState 是不是到 4 了
? const xhr = new XMLHttpRequest()
? ? xhr.open('get', './data.php')
? xhr.send()
? xhr.onreadyStateChange = function () {
? // 每次 readyState 改變的時(shí)候都會(huì)觸發(fā)該事件
? // 我們就在這里判斷 readyState 的值是不是到 4
? // 并且 http 的狀態(tài)碼是不是 200 ~ 299
? if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
? // 這里表示驗(yàn)證通過
? // 我們就可以獲取服務(wù)端給我們響應(yīng)的內(nèi)容了
? ? }
?}
使用 ajax 發(fā)送請(qǐng)求時(shí)攜帶參數(shù)
我們使用 ajax 發(fā)送請(qǐng)求也是可以攜帶參數(shù)的 參數(shù)就是和后臺(tái)交互的時(shí)候給他的一些信息 但是攜帶參數(shù) get 和 post兩個(gè)方式還是有區(qū)別的
GET 還是 POST？
與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。 然而，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：
? 無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
? 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
? 發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠
柚子快報(bào)激活碼778899分享：前端 AJAX總結(jié)
推薦文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Scoopon勺購優(yōu)選
