摘要:需要注意的是,并不是的替代品,兩者各自有其適應的場景。但為了方便交流,我們通常將獲取資源的一方稱為客戶端主要的工具是瀏覽器,而將派發資源的一方稱為服務端又稱為服務器。它可以幫助我們為之后概念細節的學習打下良好基礎。
“再也不學AJAX了”是一個與AJAX主題相關的文章系列,包含以下三個部分的內容:
AJAX概述:主要回答“AJAX是什么”這個問題;
使用AJAX:介紹如何通過JavaScript發送AJAX請求;
跨域獲取數據:介紹了與“跨域發送AJAX請求”相關的一些內容:比如“瀏覽器同源策略”與四種跨域請求資源的方式:JSONP,CORS,postMessage和webSocket;
希望通過閱讀該系列三個部分的內容,你能夠徹底理解并掌握AJAX技術,從此再也不用專門學習AJAX。
讓我們開始吧 ?。
一、什么是AJAX?AJAX是“Asynchronous JavaScript And XML”的縮寫(即:異步的JavaScript和XML),是一種實現無頁面刷新獲取服務器數據的混合技術。
讓我們停下來好好思考一下這個定義,注意那些醒目的藍色文字,它們出現在那里不是沒有理由的。
好的,相信你已經對這個定義有些印象,現在讓我對那些藍色的文字做些說明:
(一)XML是什么?XML是“Extensible Markup Language”的縮寫(即:可拓展標記語言),是一種特征類似HTML,用來描述數據是什么,并承載數據的標記語言,你可以在中文的維基百科中看到更完整的解釋,但我們現在只要知道它是一種用來承載數據的語言就足夠了。
而JSON僅僅是一種數據格式,在JSON發明之前,人們大量使用XML作為數據傳輸的載體,也正因如此,AJAX技術的最后一個字母為“X”。而如今情況則發生了些變化,JSON這種類似于字符串對象的輕量級的數據格式越來越受到開發者青睞,幾乎變成了AJAX技術的標準數據格式,因此好像AJAX技術如今應該換個名字,叫做“AJAJ”,呃,還是算了吧。
需要注意的是,JSON并不是XML的替代品,兩者各自有其適應的場景。如果你對這兩種數據格式的差異感興趣,可以查看以下鏈接:
為什么XML這么笨重的數據結構仍在廣泛應用?
為什么都反對XML而支持使用JSON
Stop Comparing JSON and XML
JSON and XML comparison
(二)無頁面刷新?我們知道,互聯網最主要的功能在于“資源交換”,當初發明互聯網的科學家們也是基于這個動機。雖然在互聯網中“資源交換”的主體都是計算機。但為了方便交流,我們通常將獲取資源的一方稱為客戶端(主要的工具是瀏覽器),而將派發資源的一方稱為服務端(又稱為“服務器”)。
在AJAX技術出現之前,如果瀏覽器需要從服務器請求資源,其交互模式為“客戶端發出請求 -> 服務端接收請求并返回相應HTML文檔 -> 頁面刷新,客戶端加載新的HTML文檔”。確實,這種交互模式十分簡潔明了,而且非常符合人的直覺,對于那時游走于互聯網中的極客而言,也確實夠用了。但是隨著時代的進步,互聯網漸漸不只是極客們的娛樂場,越來越多商業化網站的出現,使互聯網不再局限于滿足人們“資源交換”的需求,人們開始期待能夠在互聯網中獲得更好的“使用體驗”,而隨著用戶點擊不斷刷新頁面的交互方式顯然很難討人喜歡。
再試想這樣一種情景,當用戶點擊頁面中的某個按鈕向服務器發送請求時,頁面本質上只是一些數據發生了變化,而此時服務器卻要將重繪的整個頁面再返回給瀏覽器加載,這顯然有悖于程序員的“DRY”原則,而且明明只是一些數據的變化卻迫使服務器要返回整個HTML文檔,這本身也會給網絡帶寬帶來不必要的開銷。
有沒有辦法在頁面數據變動時,只向服務器請求新的數據,并且在阻止頁面刷新的情況下,動態的替換頁面中展示的數據呢? -- 答案正是“AJAX”。
AJAX技術的問世,不僅通過阻止瀏覽器接受響應時刷新頁面提升了互聯網用戶的使用體驗,還使開發者能夠以更加微觀的視角重新思考互聯網應用的構建,從此,開發者將在“數據”層面而不是“資源”層面以更高的自由度構建網站和Web應用。
(三)混合技術?是的,AJAX技術并不只是操作XMLHttpRequest對象發起異步請求,而是為了實現“無頁面刷新的資源獲取”的一些列技術的統稱,這些技術包括了:
JavaScript:用來在獲取數據后,通過操作DOM或其他方式達成目標;
客戶端(即瀏覽器)提供的實現異步服務器通信的XMLHttpRequest對象;
服務器端允許瀏覽器向其發起AJAX請求的相關設置;
明白AJAX并不只是操作XMLHttpRequest對象,對于初學者而言是十分必要的。
二、AJAX的意義相信你已經明白了,AJAX技術的意義在于:它能夠使瀏覽器在不刷新頁面的情況下獲取服務器響應,這將大大提升互聯網用戶的使用體驗,同時,由于AJAX請求獲取的是數據而不是HTML文檔,因此它也節省了網絡帶寬,讓互聯網用戶的網絡沖浪體驗變得更加順暢。
同時,我們也應該注意到,由于AJAX技術可以令開發者只向服務器獲取數據(而不是圖片,HTML文檔等資源),互聯網資源的傳輸變得前所未有的輕量級和純粹,這激發了廣大開發者的創造力,使各式各樣功能強大的網絡站點,和互聯網應用如雨后春筍一般冒出,不斷帶給人驚喜。
三、小結本文我們講解了“什么是AJAX”以及“AJAX的意義”,你可能會覺得一篇技術文章沒有代碼實在很古怪,但我覺得在一開始就對某個概念建立起正確的心智模型很重要。它可以幫助我們為之后概念細節的學習打下良好基礎。別著急,在下一篇文章中,我們會花費大量篇幅去討論如何使用AJAX技術,希望你保持耐心,Keep Learning,加油!?
? Hey!喜歡這篇文章嗎?別忘了在下方? 點贊讓我知道。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90063.html
摘要:瀏覽器的同源策略瀏覽器所遵守的同源策略是指限制不同源之間執行特定操作。這正是同源策略想要規避的安全隱患。目前為止,你已經充分了解同源策略這個主題。 我們之前提到過,AJAX技術使開發者能夠專注于互聯網中數據的傳輸,而不再拘泥于數據傳輸的載體。通過AJAX技術,我們獲取數據的方式變得更加靈活,可控和優雅。 但是AJAX技術并不是一把萬能鑰匙,互聯網中的數據隱私和數據安全(例如你的銀行賬號...
摘要:一基于維基百科的定義,是一種在單個連接上進行全雙工通訊的協議。讓我們看看這個模型的具體實現下面是客戶端告知服務端要升級為協議的報頭下面是服務端向客戶端返回的響應報頭想知道這些報頭中的字段中代表什么可以參考維基百科下的說明。 讓我們先簡單回顧一下之前談到的內容,AJAX是一種無頁面刷新的獲取服務器資源的混合技術。而基于瀏覽器的同源策略,不同域之間不可以發送AJAX請求。但是在某些情境下,...
摘要:隨著對象被廣泛的接收,也開始著手制定相應的標準來規范其行為。四設置請求頭每個請求和響應都會帶有相應的頭部信息,包含一些與數據,收發者網絡環境與狀態等相關信息。該方法會令對象實例停止觸發事件,并且不再允許訪問任何和響應有關的對象屬性。 在上一篇文章中我們知道,AJAX是一系列技術的統稱。在本篇中我們將更進一步,詳細解釋如何使用Ajax技術在項目中獲取數據。而為了解釋清楚,我們首先要搞清楚...
摘要:瀏覽器的同源策略固然保障了互聯網世界的數據隱私與數據安全,但是如果當我們需要使用跨域請求資源時,同源策略又會成為開發者的阻礙。我們之前提到過,如果想要繞過瀏覽器同源策略,實現使用技術跨域獲取資源,需要服務端和客戶端的協同合作。 瀏覽器的同源策略固然保障了互聯網世界的數據隱私與數據安全,但是如果當我們需要使用AJAX跨域請求資源時,同源策略又會成為開發者的阻礙。在本文中,我們會簡單介紹需...
摘要:請求數據流程與領導想找小李匯報一下工作類似。表示從客戶端發來的請求在服務器端被正常處理了。表示永久性重定向。該狀態碼表示請求的資源已被分配了新的,以后應使用資源現在所指的。表示服務器端在執行請求時發生了錯誤。 前言 AJAX即Asynchronous Javascript And XML,是指一種創建交互式網頁應用的網頁開發技術。AJAX 是一種用于創建快速動態網頁的技術。它可以令開發...
閱讀 3457·2021-11-17 17:00
閱讀 3818·2021-08-09 13:46
閱讀 2866·2019-08-30 15:54
閱讀 627·2019-08-30 13:54
閱讀 2945·2019-08-29 17:13
閱讀 3218·2019-08-29 14:00
閱讀 2975·2019-08-29 11:11
閱讀 1379·2019-08-26 10:15