AJAX的概述 ,同步和異步的區別 ,AJAX 的交互模型和傳統交互模型的區別

一. AJAX的概述

1.1 什么是ajax

同步:

在這里插入圖片描述

異步:

在這里插入圖片描述

在這里插入圖片描述

1.AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。

? 說明:異步:就是不同步。例如我們向后臺發送請求,同步的方式是后臺必須返回響應數據才可以在瀏覽器上進行下一步操作,而異步方式可以在不需要等待后臺服務器響應數據,直接可以進行其他操作。

2.AJAX 不是新的編程語言,而是一種使用現有標準的新方法。

3.AJAX 是與服務器交換數據并更新部分網頁的技術,在不重新加載整個頁面的情況下。

小結:

簡而言之:ajax就是一項通過js技術發送異步請求 的技術。 異步請求,局部更新,不是整個網頁更新。

1.2 同步和異步的區別

#同步
1. 瀏覽器與服務器是串行的操作,瀏覽器發起請求的時候,服務器在處理該請求的時候,瀏覽器只能等待。響應返回,然后才能夠發送下一個請求,如果該請求沒有響應,不能發送下一個請求,客戶端會處于一直等待過程中。
2. 缺點:執行效率低,用戶體驗差。
#異步
1. 瀏覽器與服務器是并行工作的,瀏覽器發送一個請求,不需要等待響應返回,隨時可以再發送下一個請求,即不需要等待。
2. 優點:執行效率高,用戶體驗更好。

在這里插入圖片描述

? AJAX使用異步的提交方式,瀏覽器與服務器可以并行操作,即瀏覽器后臺發送數據給服務器。用戶在前臺還是可以繼續工作。用戶感覺不到瀏覽器已經將數據發送給了服務器,并且服務器也已經返回了數據。

在這里插入圖片描述

小結:

【1】同步請求存在的問題:

  1. 阻塞:請求發出后必須得等到響應結束才能操作頁面信息。
  2. 全部更新:整個頁面更新。

【2】異步請求好處:

? 1.非阻塞:請求發出后不用等到響應結束才能操作頁面信息。隨時可以操作。

? 2.局部更新:頁面的局部位置更新

1.3 AJAX的應用場景

? Ajax通常用需要發送異步請求的地方,如表單的異步校驗,搜索框的自動補全,異步加載數據;

1.3.1 注冊表單的用戶名異步校驗

? 很多站點的注冊頁面都具備自動檢測用戶名是否存在的友好提示,當用戶輸入的賬號已經存在,那么在輸入框位置會出現提示信息。該功能整體頁面并沒有刷新,但仍然可以異步與服務器端進行數據交換,查詢用戶的輸入的用戶名是否在數據庫中已經存在。

在這里插入圖片描述

1.3.2 內容自動補全

? 不管是專注于搜索的百度,還是站點內商品搜索的京東,都有搜索功能,在搜索框輸入查詢關鍵字時,整個頁面沒有刷新,但會根據關鍵字顯示相關查詢字條,這個過程是異步的。

在這里插入圖片描述

二.AJAX 的交互模型和傳統交互模型的區別

AJAX 的交互模型和傳統交互模型的區別如下圖所示:

在這里插入圖片描述

【1】傳統交互模型:瀏覽器客戶端向服務器直接發送請求數據,然后后臺服務器接收到請求,處理請求數據,期間瀏覽器客戶端只能等待服務器處理數據,并響應數據,最后服務器將響應數據響應給瀏覽器客戶端,瀏覽器接收到響應之后才可以繼續下一步操作。

【2】AJAX 的交互模型:就是瀏覽器內部多了一個ajax引擎,瀏覽器客戶端向服務器發送請求的數據,都是先由瀏覽器將請求數據交給ajax引擎,注意,ajax引擎位于瀏覽器內部,是由js編寫的一個軟件。然后接下來都是由ajax引擎和服務器進行交互,此時用戶可以在瀏覽器上進行其他操作,如果再次向服務器發送請求,那么依然是交給ajax引擎處理,并且服務器響應的數據也是交給ajax引擎處理,由ajax引擎來分配瀏覽器的操作。

注意:ajax引擎內部具有一個核心對象:XMLHttpRequest。都是由該對象進行異步請求交互數據的。 new XMLHttpRequest()啟用ajax引擎

小結:ajax支持異步訪問,網頁局部刷新。主要是依賴于核心對象:XMLHttpRequest。Ajax就是通過XMLHttpRequest對象來發送異步的請求。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/39793.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/39793.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/39793.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

日語筆記——jy

敬語尊敬自兼丁寧するされるいたすします先生が詳細に説明されるご説明いたします説明しますいうおっしゃる申す言うお名まえはなんとおっしゃいますかほかのことは申すまでもない親の言う事をよく聞く行くいらっしゃる參る行きます先生もいらっしゃるのですかご一緒に參りまし…

Node.js學習路線

Node.js是一個基于Chrome V8引擎的JavaScript運行環境,它允許JavaScript在服務器端運行。Node.js的核心內容和高階內容涵蓋了多個方面,以下是對Node.js的詳細解析、核心內容以及高階內容的歸納: 一、Node.js簡介 運行環境:Node.…

svn忽略上傳文件node_modules文件

文章目錄 1.點擊svn項目右鍵-》選中svn的屬性2. 點擊 新建3. 點擊其他4. 選擇屬性 svn:global-ignores5. 輸入忽略文件 1.點擊svn項目右鍵-》選中svn的屬性 2. 點擊 新建 3. 點擊其他 4. 選擇屬性 svn:global-ignores 5. 輸入忽略文件

四、【源碼】Bean屬性注入

源碼地址:https://github.com/spring-projects/spring-framework 倉庫地址:https://gitcode.net/qq_42665745/spring/-/tree/04-porperty-inject Bean屬性注入 屬性注入相關的類 1.PropertyValue:屬性對象,name:value 2.Prope…

【Asterinas】Asterinas 進程啟動與切換

Asterinas 進程啟動與切換 進程啟動 進程創建&#xff1a; Rust pub fn spawn_user_process( executable_path: &str, argv: Vec, envp: Vec, ) -> Result<Arc> { // spawn user process should give an absolute path debug_assert!(executable_path.starts_with…

數據結構 —— 二叉樹

1.樹的概念及結構 1.1樹的概念 樹是一種非線性的數據結構&#xff0c;它有著多分支&#xff0c;層次性的特點。 由于其形態類似于自然界中倒過來的數&#xff0c;所以我們將這種數據結構稱為“樹形結構” 注意&#xff1a; 樹形結構中&#xff0c;子樹之間不能有交集&#x…

降重工具大揭秘:AI如何幫你輕松搞定論文重寫?

已經天臨五年了&#xff0c;大學生們還在為論文降重煩惱……手動降重確實是個難題&#xff0c;必須要先付點小經費去靠譜的網站查重&#xff0c;再對著紅字標注去改&#xff0c;后面每一次的論文呢查重結果都像賭//博&#xff0c;誰也不知道明明是同一篇文章&#xff0c;第二次…

2024鯤鵬昇騰創新大賽集訓營Ascend C算子學習筆記

異構計算架構&#xff08;CANN&#xff09; 對標英偉達的CUDA CuDNN的核心軟件層&#xff0c;向上支持多種AI框架&#xff0c;向下服務AI處理器&#xff0c;發揮承上啟下的關鍵作用&#xff0c;是提升昇騰AI處理器計算效率的關鍵平臺。主要包括有各種引擎、編譯器、執行器、算…

(番外篇)指針的一些相關習題講解(速進,干貨滿滿)(2)

前言&#xff1a; 小編感覺最近有點太墮落&#xff0c;于是我開始從事這篇文章的撰寫&#xff0c;現在也是進入七月份了&#xff0c;我現在文章開頭定一個小目標&#xff0c;我決定在七月份發布至少十篇文章&#xff0c;希望我可以說到做到&#xff08;我前面就口頭欠了不少文章…

OpenSSL的一些使用案例

目錄 一、介紹 二、基本使用 1、Shell &#xff08;1&#xff09;文件加解密 &#xff08;2&#xff09;生成密鑰文件 2、API &#xff08;1&#xff09;md5sum &#xff08;2&#xff09;AES256加解密 一、介紹 本篇博客重點不是詳細描述 OpenSSL 的用法&#xff0c;只…

什么是校園氣象站

在科技日新月異的今天&#xff0c;氣象觀測不僅局限于專業的氣象機構&#xff0c;它已經走進了我們的校園&#xff0c;成為了學生們探索自然、學習科學知識的重要平臺。 校園氣象站是設置在學校內部&#xff0c;用于進行氣象觀測、數據記錄和科學實驗的設施。它通常由氣象傳感器…

MySQL之應用層優化和備份與恢復(一)

應用層優化 緩存 作為基礎組件的緩存 緩存有可能成為基礎設施的重要組成部分。也很容易陷入一個陷阱&#xff0c;認為緩存雖然很好用&#xff0c;但并不是重要到非有不可得東西。你也許會辯駁&#xff0c;如果緩存服務器宕機或者緩存被清空&#xff0c;請求也可以直接落在數…

常見鎖策略之可重入鎖VS不可重入鎖

可重入鎖VS不可重入鎖 有一個線程,針對同一把鎖,連續加鎖兩次,如果產生了死鎖,那就是不可重入鎖,如果沒有產生死鎖,那就是可重入鎖. 死鎖 我們之前引入多線程的時候不是講了一個加數字的案例么,我們今天以它來舉例 當我們這樣寫的時候會出現什么問題? 分析:第一個synchron…

前端基礎--Vue3

Vue3基礎 VUE3和VUE2的區別 2020年9月18日&#xff0c;Vue.js發布版3.0版本&#xff0c;代號&#xff1a;One Piece 于 2022 年 2 月 7 日星期一成為新的默認版本! Vue3性能更高,初次渲染快55%, 更新渲染快133% 。體積更小 Vue3.0 打包大小減少41%。 同時Vue3可以更好的支持T…

基于微服務智能推薦健康生活交流平臺的設計與實現(SpringCloud SpringBoot)+文檔

&#x1f497;博主介紹&#x1f497;&#xff1a;?在職Java研發工程師、專注于程序設計、源碼分享、技術交流、專注于Java技術領域和畢業設計? 溫馨提示&#xff1a;文末有 CSDN 平臺官方提供的老師 Wechat / QQ 名片 :) Java精品實戰案例《700套》 2025最新畢業設計選題推薦…

vb 學習簡介

vb 第一節 Visual Basic(簡稱VB)是一種高級編程語言,它最初由微軟公司開發,旨在簡化Windows應用程序的開發過程。下面,我們將介紹Visual Basic編程語言的基礎概念和用途,包括其歷史背景、主要特性以及在現代編程中的應用。 歷史背景 Visual Basic起源于1991年,當時微軟…

代碼隨想錄算法訓練營day72 | 117. 軟件構建、47. 參加科學大會

本次題目來自于卡碼網 117. 軟件構建&#xff08;拓撲排序&#xff09; python設置默認值 from collections import defaultdict aa defaultdict(int) 拓撲排序&#xff1a;找到入度為0的節點&#xff0c;然后移除。如果最后都能移除&#xff0c;則無環&#xff0c;可以排…

C#發票識別接口,再長的稅號錄入都不怕

“十二金”工程是我國政府在信息化建設中的重要一步&#xff0c;“金稅工程”總稱為中國稅收管理信息系統&#xff08;CTAIS&#xff09;&#xff0c;是我國電子政務的核心系統之一,是財政的重要環節。十二金”是面向政府辦公業務建立的十二個重點信息應用系統&#xff0c;按“…

解決使用monaco-editor編譯器,編譯器展示內容沒有超過編譯器高度,但是出現滾動條問題

前言&#xff1a; 最近在完成項目時&#xff0c;有使用編譯器進行在線編輯的功能&#xff0c;就選用了monaco-editor編譯器&#xff0c;但是實現功能之后&#xff0c;發現即使在編譯器展示的內容沒有超過編譯器高度的情況下&#xff0c;編譯器依舊存在滾動條&#xff0c;會展示…

計算機網絡--網絡層

一、網絡層的服務和功能 網絡層主要為應用層提供端對端的數據傳輸服務 網絡層接受運輸層的報文段&#xff0c;添加自己的首部&#xff0c;形成網絡層分組。分組是網絡層的傳輸單元。網絡層分組在各個站點的網絡層之間傳輸&#xff0c;最終到達接收方的網絡層。接收方網絡層將運…