ajax
XML 指可擴展標記語言(eXtensible Markup Language)。
XML 被設計用來傳輸和存儲數(shù)據(jù),不用于表現(xiàn)和展示數(shù)據(jù),HTML 則用來表現(xiàn)數(shù)據(jù)。
是前后臺交互的能力也就是我們客戶端給服務端發(fā)送消息的?具,以及接受響應的?具 AJAX 不是新的編程語言,而是一種使用現(xiàn)有標準的新方法。 AJAX 是與服務器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術,在不重新加載整個頁面的情況下。 是?個默認異步執(zhí)行機制的功能,AJAX分為同步(async = false)和異步(async = true)
- 什么是同步請求?(false) 定義:發(fā)送一個請求后,必須等待該請求的響應返回,才能繼續(xù)發(fā)送下一個請求。同步交互相當于排隊,輪到下一個的情況會因為前一個而有所不同。?客戶端向服務器端發(fā)送請求,必須等待結(jié)果返回,才能向服務器端發(fā)送下一次請求。 優(yōu)點: 簡單直觀 結(jié)果即時可見 缺點: 在網(wǎng)絡延遲或處理時間長時效率低下 占用較多系統(tǒng)資源 也就是說,當JS代碼加載到當前AJAX的時候會把頁面里所有的代碼停止加載,頁面處于一個假死狀態(tài),當這個AJAX執(zhí)行完畢后才會繼續(xù)運行其他代碼頁面解除假死狀態(tài) - 什么是異步請求?(默認:true) 定義:發(fā)送請求后,無需等待響應即可繼續(xù)執(zhí)行其他任務。響應通過回調(diào)函數(shù)、事件監(jiān)聽等方式處理。同步交互與異步交互的區(qū)別在于同步交互需要等待結(jié)果,而異步交互不需要等待。 客戶端向服務器端發(fā)送請求,必須等待結(jié)果返回,才能向服務器端發(fā)送下一次請求。 說明:異步交互就是第二次請求不需要等待第一次請求結(jié)束之后就可以開始。 優(yōu)點: 支持高效并發(fā)處理 提高資源利用率 提升用戶體驗,減少等待時間 缺點: 實現(xiàn)相對復雜 錯誤處理較為困難 增加開發(fā)和維護成本 默認異步:異步請求就當發(fā)出請求的同時,瀏覽器可以繼續(xù)做任何事, Ajax發(fā)送請求并不會影響頁面的加載與用戶的操作,相當于是在兩條線上,各走各的,互不影響。 一般默認值為true,異步。異步請求可以完全不影響用戶的體驗效果,無論請求的時間長或者短,用戶都在專心的操作頁面的其他內(nèi)容,并不會有等待的感覺。 - 選擇策略 在決定使用同步還是異步交互時,應考慮以下因素: 性能需求:如果系統(tǒng)需要處理大量并發(fā)請求,異步交互是更好的選擇。 用戶體驗:為了提升應用的響應速度和流暢度,減少用戶等待時間,異步交互是優(yōu)選。 開發(fā)成本:如果項目時間緊迫或開發(fā)資源有限,同步交互可能更合適,因為它實現(xiàn)簡單。 業(yè)務邏輯:根據(jù)具體業(yè)務場景和需求,靈活選擇最適合的交互方式。
1. AJAX 的優(yōu)勢
不需要插件的支持,原生 js 就可以使用
用戶體驗好(不需要刷新頁面就可以更新數(shù)據(jù))
減輕服務端和帶寬的負擔
缺點:搜索引擎的支持度不夠,因為數(shù)據(jù)都不在頁面上,搜索引擎搜索不到
2. AJAX 的操作流程

具體操作流程:
首先通過PHP頁面將數(shù)據(jù)庫中的數(shù)據(jù)取出
取出后轉(zhuǎn)成json格式的字符串,后利用ajax把字符串返還給前臺
再利用json.parse解析通過循環(huán)添加到頁面上
那么反之,前端的數(shù)據(jù)可以利用ajax提交到后臺
但是后臺是沒有辦法直接把這些數(shù)據(jù)插入到數(shù)據(jù)庫中,所以要先提交到PHP頁面上
最后再由PHP將數(shù)據(jù)插入到數(shù)據(jù)庫中
3. AJAX 的使用
在 js 中有內(nèi)置的構(gòu)造函數(shù)來創(chuàng)建 ajax 對象
創(chuàng)建 ajax 對象以后,我們就使? ajax 對象的方法去發(fā)送請求和接受響應
Ajax的一個最大的特點是無需刷新頁面便可向服務器傳輸或讀寫數(shù)據(jù)(又稱無刷新更新頁面),這一特點主要得益于XMLHTTP組件XMLHTTPRequest對象。
事件,對象,屬性,方法 事件event對象是指在瀏覽器中觸發(fā)事件時,瀏覽器會自動創(chuàng)建一個event對象,其中存儲了本次事件相關的信息,包括事件類型、事件目標、觸發(fā)元素等等。瀏覽器創(chuàng)建完event對象之后,會自動將該對象作為參數(shù)傳遞給綁定的事件處理函數(shù),我們可以在事件處理函數(shù)中通過訪問event對象的屬性和方法,來獲取事件的相關信息,并做出后續(xù)的邏輯處理。 ? 事件可以由用戶操作觸發(fā),例如:鼠標事件、鍵盤事件等等;也可以通過 JS 腳本代碼來觸發(fā),例如:通過element.click()方法,觸發(fā)對應元素的點擊事件;還可以由API生成,例如:動畫完成后觸發(fā)對應事件、視頻播放被暫停時觸發(fā)對應事件;最后還可以通過自定義事件來進行觸發(fā)。這四種方式都會創(chuàng)建并傳遞event對象。 ? 除了我們自己綁定的事件處理函數(shù)之外,瀏覽器會對某些元素的某些事件存在默認處理,例如: a 標簽的click點擊事件,默認處理為跳轉(zhuǎn)到鏈接的地址。當然我們也可以通過event對象的preventDefault() 方法來阻止瀏覽器的默認處理。 ? 我們還需要注意元素的嵌套關系,因為由于元素結(jié)構(gòu)上的重疊,事件會隨著嵌套關系依次傳遞,也就是事件冒泡和事件捕獲。 Event對象示例和常用屬性見可參考文章:JS 之 事件Event對象詳解(屬性、方法、自定義事件)_js event-CSDN博客 三個事件的觸發(fā)時機 mousedown 當鼠標指針移動到元素上方,并按下鼠標按鍵(左、右鍵均可)時,會發(fā)生 mousedown 事件。 與 click 事件不同,mousedown 事件僅需要按鍵被按下,而不需要松開即可發(fā)生。 mouseup 當在元素上松開鼠標按鍵(左、右鍵均可)時,會發(fā)生 mouseup 事件。 與 click 事件不同,mouseup 事件僅需要松開按鈕。當鼠標指針位于元素上方時,放松鼠標按鈕就會觸發(fā)該事件。 click 當鼠標指針停留在元素上方,然后按下并松開鼠標左鍵時,就會發(fā)生一次 click 事件。 注意:觸發(fā)click事件的條件是按下并松開鼠標左鍵!,按下并松開鼠標右鍵并不會觸發(fā)click事件。 三個事件的觸發(fā)順序 若在同一個元素上按下并松開鼠標左鍵,會依次觸發(fā)mousedown、mouseup、click,前一個事件執(zhí)行完畢才會執(zhí)行下一個事件 若在同一個元素上按下并松開鼠標右鍵,會依次觸發(fā)mousedown、mouseup,前一個事件執(zhí)行完畢才會執(zhí)行下一個事件,不會觸發(fā)click事件

浙公網(wǎng)安備 33010602011771號