首頁 web前端 js教程 ajax的適用場景有哪些? ajax的不適用場景有哪些?

ajax的適用場景有哪些? ajax的不適用場景有哪些?

Sep 10, 2018 pm 04:11 PM
ajax

這篇文章主要的向大家介紹了關於ajax的使用場景和ajax的不適用場景,讓我們知道ajax到底該在什麼地方用。現在我們來一起看這篇文章吧

Ajax適用場景 
  1.表單驅動的互動 
  傳統的表單提交,在文字方塊輸入內容後,點選按鈕,後台處理完畢後,頁面刷新,再回頭檢查是否刷新結果正確。使用Ajax,在點擊sunmit按鈕後,立刻進行非同步處理,並在頁面上快速顯示了更新後的結果,這裡沒有整個頁面刷新的問題。
2.深層的樹的導航 
  深層的級聯選單(樹)的遍歷是一項非常複雜的任務,使用JavaScript來控制顯示邏輯,使用Ajax延遲載入更深層的資料可以有效的減輕伺服器的負擔。
  我們先前的對級聯選單的處理多數是這樣的: 
  為了避免每次對選單的操作所引起的重載頁面,不採用每次呼叫後台的方式,而是一次將級聯選單的所有資料全部讀取出來並寫入數組,然後根據使用者的操作用JavaScript來控制它的子集項目的呈現,這樣雖然解決了操作響應速度、不重載頁面以及避免向伺服器頻繁發送請求的問題,但是如果用戶不對選單進行操作或只對選單中的一部分進行操作的話,那讀取的資料中的一部分就會成為冗餘資料而浪費使用者的資源,特別是在選單結構複雜、資料量大的情況下(例如選單有 很多級、每一級菜又有上百個項目),這種弊端就更為突出。
  如果在此案中應用Ajax後,結果就會有所改觀: 
  在初始化頁面時我們只讀出它的第一層的所有數據並顯示,在使用者操作一級選單其中一項時,會透過Ajax向後台請求目前一級項目所屬的二級子選單的所有數據,如果再繼續請求已經呈現的二級選單中的一項時,再向後面請求所操作二級選單項目對應的所有三級選單的所有數據,以此類推…這樣,用什麼就取什麼、用多少就取 多少,就不會有資料的冗餘和浪費,減少了資料下載總量,而且更新頁面時不用重載全部內容,只更新需要更新的那部分即可,相對於後台處理並重載的方式縮短了用戶等待時間,也把資源的浪費降到最低。
  3.快速的用戶與用戶間的交流響應 
  在眾多人參與的交流討論的場景下,最不爽的事情就是讓用戶一遍又一遍刷新頁面以便知道是否有新的討論出現。新的回覆應該以最快的速度顯示出來,而把使用者從分神的刷新中解脫出來,Ajax是最好的選擇。
  4.類似投票、yes/no等無關痛癢的場景 
  對於類似這樣的場景中,如果提交過程需要達到40秒,很多的用戶就會直接忽略過去而不會參與,但是Ajax可以把時間控制在1秒之內,因此更多的使用者會加入進來。 
  5.將資料過濾與操縱相關資料的場景 
  對資料使用過濾器,按照時間排序,或依照時間和名稱排序,開關過濾器等等。任何要求具備很高互動性資料操縱的場合都應該用JavaScript,而不是用一系列的伺服器請求來完成。在每次資料更新後,再進行查找和處理需要耗費較多的時間,而Ajax可以加速這個過程。 (想看更多就到PHP中文網AJAX開發手冊欄位中學習)

  6.普通的文字輸入提示與自動完成的場景 
  在文字方塊等輸入表單中給予輸入提示,或自動完成,可以有效的改善使用者體驗,尤其是那些自動完成的資料可能來自於伺服器端的場合,Ajax是很好的選擇。
 Ajax不適用場景 
  1.部分簡單的表單 
  雖然表單提交可以從Ajax獲得最大的益處,但一個簡單的評論表單極少能從Ajax得到什麼明顯的改善。而一些較少用到的表單提交,Ajax則幫不上忙。
  2.搜尋 
  有些使用了Ajax的搜尋引擎如Start.com和Live.com不允許使用瀏覽器的後退按鈕來查看前一次搜尋的結果,這對已經養成搜尋習慣的用戶來說是不可原諒的。 
  現在Dojo透過iframe來解決這個問題。
  3.基本的導航 
#  使用Ajax來做網站內的導覽是一個壞主意,為什麼不把時間放在讓系統程式作的更好上呢?
  4.取代大量的文字 
#  使用Ajax可以實現頁面的局部刷新,但是如果頁面的每個部分都改變了,為什麼不重新做一次伺服器請求呢?
  5.對呈現的操縱 
#  Ajax看起來像是純粹的UI技術,但事實上它不是。它實際上是一個資料同步、操縱和傳輸的技術。對於可維護的乾淨的web應用,不使用Ajax來控制頁面呈現是一個不錯的主意。 JavaScript可以很簡單的處理XHMTL/HTML/DOM,使用CSS規則可以很好的表達資料顯示。 

  存在的問題 
  1.用JavaScript作的Ajax引擎,JavaScript的兼容性和DeBug都是讓人頭痛的事; 

## 2.Ajax的無刷新重載,由於頁面的變化沒有刷新重載那麼明顯,所以容易給用戶帶來困擾?D?D用戶不太清楚現在的數據是新的還是已經更新過的;現有的解決有:在相關位置提示、資料更新的區域設計得比較明顯、資料更新後給使用者提示等;   3.中間過程不能被bookmark。解決方法:GoogleMaps透過在頁面上提供一個”link to this page」的辦法來解決。另外,也可以透過url連結中加無效的?^標記來解決,但還未驗證。我覺得ibm開發者論壇中有個老大不記得什麼名字了說的不錯 跟j2ee的現有成熟表現層框架結合使用是比較好的一個選擇。因需而用不會給自己斷掉很多後路。一味的嘗試或許就有苦果等待、誘惑、刺激、引導你失去理智。         這篇文章到這就結束了(想看更多就到PHP中文網

AJAX使用手冊###欄位中學習),有問題的可以在下方留言提問。 ###

以上是ajax的適用場景有哪些? ajax的不適用場景有哪些?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

解決jQuery AJAX請求遇到403錯誤的方法 解決jQuery AJAX請求遇到403錯誤的方法 Feb 20, 2024 am 10:07 AM

標題:解決jQueryAJAX請求出現403錯誤的方法及程式碼範例403錯誤是指伺服器禁止存取資源的請求,通常會導致出現這個錯誤的原因是請求缺少權限或被伺服器拒絕。在進行jQueryAJAX請求時,有時會遇到這種情況,本文將介紹如何解決這個問題,並提供程式碼範例。解決方法:檢查權限:首先要確保請求的URL位址是正確的,同時驗證是否有足夠的權限來存取該資

解決jQuery AJAX請求403錯誤的方法 解決jQuery AJAX請求403錯誤的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一個受歡迎的JavaScript函式庫,用來簡化客戶端端的開發。而AJAX則是在不重新載入整個網頁的情況下,透過發送非同步請求和與伺服器互動的技術。然而在使用jQuery進行AJAX請求時,有時會遇到403錯誤。 403錯誤通常是伺服器禁止存取的錯誤,可能是由於安全性原則或權限問題導致的。在本文中,我們將討論如何解決jQueryAJAX請求遭遇403錯誤

如何解決jQuery AJAX報錯403的問題? 如何解決jQuery AJAX報錯403的問題? Feb 23, 2024 pm 04:27 PM

如何解決jQueryAJAX報錯403的問題?在開發網頁應用程式時,經常會使用jQuery來發送非同步請求。然而,有時在使用jQueryAJAX時可能會遇到錯誤代碼403,表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的,但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題,並提供具體的程式碼範例。一、使

PHP 與 Ajax:建立一個自動完成建議引擎 PHP 與 Ajax:建立一個自動完成建議引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax建置自動完成建議引擎:伺服器端腳本:處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本:發送Ajax請求並顯示建議(autocomplete.js)。實戰案例:在HTML頁面中包含腳本並指定search-input元素識別碼。

如何使用Ajax從PHP方法取得變數? 如何使用Ajax從PHP方法取得變數? Mar 09, 2024 pm 05:36 PM

使用Ajax從PHP方法取得變數是Web開發中常見的場景,透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中,將介紹如何使用Ajax從PHP方法中取得變量,並提供具體的程式碼範例。首先,我們需要寫一個PHP檔案來處理Ajax請求,並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼:

PHP 與 Ajax:建立動態載入內容的解決方案 PHP 與 Ajax:建立動態載入內容的解決方案 Jun 06, 2024 pm 01:12 PM

Ajax(非同步JavaScript和XML)允許在不重新載入頁面情況下新增動態內容。使用PHP和Ajax,您可以動態載入產品清單:HTML建立一個帶有容器元素的頁面,Ajax請求載入資料後將資料加入到該元素中。 JavaScript使用Ajax透過XMLHttpRequest向伺服器傳送請求,從伺服器取得JSON格式的產品資料。 PHP使用MySQL從資料庫查詢產品數據,並將其編碼為JSON格式。 JavaScript解析JSON數據,並將其顯示在頁面容器中。點選按鈕觸發Ajax請求,載入產品清單。

ajax版本有哪些 ajax版本有哪些 Nov 22, 2023 pm 02:00 PM

ajax不是一個特定的版本,而是一種使用多種技術的集合來非同步載入和更新網頁內容的技術。 ajax沒有特定的版本號,但是有一些ajax的變體或擴充:1、jQuery AJAX;2、Axios;3、Fetch API;4、JSONP;5、XMLHttpRequest Level 2;6、WebSockets;7、Server-Sent Events;8、GraphQL等等。

PHP 與 Ajax:提升 Ajax 安全性的方法 PHP 與 Ajax:提升 Ajax 安全性的方法 Jun 01, 2024 am 09:34 AM

為了提升Ajax安全性,有幾種方法:CSRF保護:產生令牌並將其傳送到客戶端,在請求中新增至伺服器端進行驗證。 XSS保護:使用htmlspecialchars()過濾輸入,防止惡意腳本注入。 Content-Security-Policy頭:限制惡意資源加載,指定允許載入腳本和樣式表的來源。驗證伺服器端輸入:驗證從Ajax請求接收的輸入,防止攻擊者利用輸入漏洞。使用安全Ajax函式庫:利用jQuery等函式庫提供的自動CSRF保護模組。

See all articles