英雄联盟竞猜平台,雷火竞技官网入口,雷火首页

來源：互聯網

AJAX的全稱為“Asynchronous ECMAScript and XML”（異步JavaScript和XML），是指一種創建交互式Web應用的網頁開發的技術，它綜合利用了已經存在的各種技術，包括：HTML或XHTML、層疊樣式表、JavaScript、DOM、XML、XSLT、以及最重要的XMLHttpRequest對象，從而生成一種全新的應用。它可以與服務器通信、交換數據并更新頁面，而無需刷新頁面。

AJAX最早應用于1998年，由微軟的小組寫的一個組件使得AJAX技術成功應用于商業應用程序，但是當時并沒有AJAX這個概念的產生。后來于2005年被谷歌公司用于開發交互式應用程序而被廣泛應用，同年，Jesse James Garrett在一篇文章中首次提出了AJAX這個名詞，并且闡明了所包含的技術和應用定位，AJAX技術的交互式特性使得其成為Web2.0的核心技術。

AJAX技術是使用客戶端腳本與Web服務器交換數據的Web應用開發方法，使得Web的應用程序像桌面應用程序一樣擁有直接、高可用、更豐富、更動態的Web用戶界面。而AJAX的技術融合性使得其有利也有弊，在提供高效率的同時也帶來了一些安全性的問題。

發展歷程

最初的Web頁面都是靜態的，這個階段的Web應用程序不能與客戶產生任何互動，為滿足客戶需求，動態的腳本語言開始出現，如JSP、ASP和PHP等。1995年，網景添加了一項稱為LiveScript（也就是后來的ECMAScript）的功能，該功能允許人們將小腳本放在網頁中，以便可以在下載后繼續執行操作。LiveScript更名為JavaScript后，開啟了動態HTML技術的發展，豐富了頁面和交互能力。在后來Mozilla Application Suite的早期版本中，Netscape展示了一種新的技術，使用一段XML數據通過JavaScript呈現給客戶，這意味著渲染可以即實的更改了。

AJAX技術在1998年前后得到應用。微軟為其Outlook Web Access 2000 版本創建了 XMLHTTP ActiveX 對象，意在為Exchange Server提供基于Web的訪問。部分觀察家認為，Outlook Web Access是第一個應用了AJAX技術的成功的商業應用程序。1999年3月，Microsoft在Internet Explorer 5.0中發布了XMLHttpRequest 的原始形式，這允許瀏覽器向服務器發出 HTTP 請求，并在后臺以 XML 格式取回一些數據，意味著可以在頁面上刷新數據，而無需完全重新加載。

AJAX被廣泛應用是于2005年。2005年2月，Jesse James Garrett在《Ajax: A New Approach to Web Applications》一文中首次提出了AJAX這個名詞，并將其應用于一種新的Web開發方法。Garrett的文章中提出了一個理念：使用AJAX消除Web應用程序和桌面應用程序在系統的人機交互方面存在的差距，他將ECMAScript、XHTML、層疊樣式表、DOM、XMLHttpRequest、XML和XSTL綜合運用的技術成為AJAX。而用戶互動是Web 2.0的典型功能，所以AJAX成為了Web 2.0中的核心技術。同年，谷歌在其交互式應用程序（如谷歌地圖、谷歌學術搜索等）中使用AJAX技術，實現了快速的地圖加載和交互式操作，AJAX技術開始被廣泛應用到程序開發中。

隨著AJAX技術的廣泛應用，各種前端框架和庫開始涌現。2006年，John Resig發布了jQuery框架，其中封裝了很多方法讓開發人員能夠快速地實現動畫，并且能夠簡潔地發送AJAX，簡化了AJAX的使用。后來AJAX概念的進一步發展，不再局限于使用XML作為數據交換，而是開始支持使用其他格式，比如JSON。它是一種輕量級的數據交換格式，相較于XML而言，它的結構簡潔，解析起來更快；占用的存儲空間少，網絡傳輸也更快。

2012年，W3C組織發布了HTML5規范，包括了新的Web API，支持AJAX的文件上傳，進一步劃分清楚了HTML和層疊樣式表在AJAX應用中的職責，隨著Web 3.0時代的到來，互聯網朝著移動化的方向發展，AJAX技術因能夠解決移動應用的很多問題，逐漸應用于移動端的開發，包括網絡連接間斷、帶寬限制、補全輸入、應用程序移植于無障礙發布等問題。

工作原理

AJAX提供了同步和異步兩種類型的請求，其中同步請求將阻塞 ECMAScript 代碼的執行，直到響應到達為止。異步請求可以允許網站提供不間斷的服務，異步通信機制原理是不等待服務器生成響應，JavaScript便繼續執行其他的工作，使頁面在處理響應時具有響應性，這一步通過調用open方法中設置的async參數來實現。這種異步交互的方式消除了同步交互方式中出現的“處理->等待->處理->等待”缺陷。發送請求時，AJAX把JavaScript技術和XMLHttpRequest對象放在Web表單和服務器之間，當用戶填寫表單時，數據發送給一些JavaScript代碼而不是直接發送給服務器，JavaScript代碼捕獲表單數據并向服務器發出請求。

實質上AJAX遵循了Request/Server模式，首先創建XMLHttpRequest對象，然后通過對這個對象進行各種操作來完成和服務器的通信。成功創建XMLHttpRequest對象之后，使用ECMAScript代碼向服務器發送請求，服務器接收到用戶的請求之后，可以根據請求內容進行相應的操作，然后把數據以合適的格式返回給客戶端。

當服務器結束對用戶請求的處理以后，會把處理的結果返回給用戶，在客戶端對返回的內容進行處理，然后根據其處理結果對頁面進行調整，到這一步，客戶端對服務器的異步通信就完成了。服務器用XML文檔返回邏輯處理的結果，在客戶端可以通過XMLHttpRequest對象的responseXML屬性取出服務器返回的相應文檔。然后在ECMAScript中，可以用DOM方式分析這個XML文檔，從而取出用戶需要的內容。

XMLHttpRequest對象的status屬性返回的HTTP狀態碼可以判斷服務響應的數據是否完成了傳遞，當狀態碼為數字“4”時，即表示服務器響應的數據完成了傳遞。

關鍵技術

JavaScript

ECMAScript綁定和處理所有數據。ECMAScript是客戶端的一種基于對象的解釋型腳本語言，不需要編譯，可以直接由瀏覽器來解釋執行。它可以改變HTML網頁的內容、HTML標記的屬性、HTML的樣式以及對網頁數據進行驗證。通過ECMAScript可以實現回應客戶的需求事件不用任何的網絡回傳資料，即當客戶輸入一項資料時，不用經過傳給服務器端處理再傳回來的過程，而可以直接被客戶端的應用程序所處理。

在AJAX開發中可以通過JavaScript管理操作 XMLHttpRequest對象的方法或屬性來跟數據庫進行數據交換，而且JavaScript不允許訪問本地的HDD，不能將數據存到服務器上，不會對網絡文檔修改和刪除，只能通過瀏覽器實現信息瀏覽或動態交互，所以它能夠有效的防止數據丟失。

XMLHttpRequest

使用XMLHttpRequest進行異步數據讀取。XMLHttpRequest是一個內置的瀏覽器對象，用于在后臺與服務器交換數據。它是AJAX的核心技術，允許在ECMAScript中發出HTTP請求。通過這個對象，AJAX可以像桌面應用程序一樣只同服務器進行數據層面的交換，而不用每次都刷新界面，減輕了服務器的負擔又加快了響應速度。它可以對任何數據進行操作，有同步和異步兩種操作模式，使用AJAX發送HTTP請求有三個步驟：Create（創建）->（Initialize）初始化->（send out）發送。示例代碼如下：

XMLHttpRequest屬性

XMLHttpRequest方法

HTML和CSS

使用HTML和CSS將Web頁面標準化呈現。HTML（Hyper Text Markup Language）是一種用于制作網頁的HTML，負責制作網頁的內容，在AJAX中，它允許通過ECMAScript來操作HTML元素，并且可以實現動態的網頁效果。HTML的結構分為兩部分：文檔類型聲明和文檔。示例代碼如下：

層疊樣式表即Cascading Style 工作表的簡稱，稱為層疊樣式表，用于指定HTML網頁中一個元素或元素的顯示樣式，如顏色，位置和大小等。CSS在AJAX中的作用是開發統一的界面布局并能隨時修改部分元素的樣式，相當于表現層，通常不會牽扯到任何數據操作。HTML應用CSS有三種方式，分別是行內樣式表、內部樣式表和外部樣式表。示例代碼如下：

DOM

使用DOM實現動態顯示和交互。DOM（Document Object Model）文檔對象模型，是HTML文檔的編程接口，給文檔提供了一個結構化的表述并且定義了一種程序可以對結構樹進行訪問的方式。W3C定義DOM為一種獨立于平臺和語言的獨立接口，允許程序和腳本動態的訪問并修改文檔的內容、結構和風格。在AJAX中，用戶界面的更新主要靠DOM來完成。

DOM中節點分為7種類型，分別是元素、屬性、文本、注釋、文檔、文檔類型和文檔片段節點，每個節點以Node對象進行表示，每一個節點有一個nodeType屬性，用來表示節點的類型，并提供節點操作的屬性和方法。

XML、XSLT與JSON

使用XML和XSLT進行數據交換與處理。XML（Extensible 標記 Language）可擴展型標記語言，它既無標簽集也無語法，是一個用來定義其他語言的源語言，自身定義了語言的核心，提供一種元數據類型框架。

XSLT定義了一套轉換語言，把操作XML數據的層次推向高級語言的境界，也就是說把XML文件轉換成另一個XML文件。XSLT聲明一套符合XSTL語義和語法要求的規則，經過XSLT處理器解釋后，就可以對XML數據做各種處理。

而在演變的過程中，JSON格式的數據傳遞實現相較于XML來說更加簡單方便，XML格式可以將數據結構化，而JSON格式則更加輕量級和易于解析。當數據量比較多，且需要清晰傳遞的情況下，采用JSON格式的數據進行傳遞。但是此種方式傳遞需要將服務器返回的JSON格式字符串先轉化為ECMAScript對象。

服務器端技術

AJAX需要與服務器進行數據交換，服務器端負責接收AJAX請求，處理請求并返回數據給客戶端。常見的服務器端技術包括PHP、Java、ASP.NET等。PHP是一種服務器端、跨平臺、可以嵌入到HTML的腳本語言，用作構建動態網站和應用程序，大多數 Web 服務器使用 PHP 來實現基本指令和配置指令。ASP.NET是一種服務器端腳本技術，它使得嵌入網頁的腳本可由因特網服務器執行，用于使用 HTML、層疊樣式表和 ECMAScript 構建網站和 Web 應用程序。 ASP.NET提供用于創建 Web 應用程序的框架，其中ASP.NET AJAX擴展技術無需對服務器執行完全回發，無需代碼更改和最少的標記更改，即可執行部分或增量頁面更新。Java作為一種面向對象的計算機程序語言，通用高效且易移植，應用范圍廣，適合基于Web的服務器后臺技術的開發。

jQuery函數

寫頁面時需要用到大量的AJAX，為了提高工作效率，需要把AJAX操作封裝起來，而jQuery是一個用ECMAScript構建的框架，它可以同時兼容各種市場上主流的瀏覽器，維持用戶的HTML處于獨立狀態，建立一個高效易擴展的AJAX技術。jQuery庫中封裝了AJAX的操作函數，將jQuery和AJAX兩種方法相結合能夠快速調取函數，使得原來復雜的函數處理工作簡單化。

兼容性

AJAX使用了大量的JavaScript和AJAX引擎，這些內容需要瀏覽器提供足夠的支持。不同瀏覽器創建XMLHttpRequest對象的方法有所差異，IE瀏覽器使用ActiveXObeject，而其他瀏覽器使用名為XMLHttpRequest的ECMAScript內建對象。對于不同瀏覽器可以采用“try and catch”語句先聲明一個保存XMLHttpRequest對象的變量。實例代碼如下：

XMLHttpRequest對象的瀏覽器兼容性：

安全性

AJAX在融合多技術的優點的同時，也融合了其缺點，從而加劇了傳統Web程序的安全隱患。其中，跨站腳本攻擊XSS和跨站請求偽造攻擊CSRF就是兩種典型的安全隱患。XSS是一種攻擊者利用Web應用程序接收表單輸入的漏洞，將構造的惡意HTML、ECMAScript在用戶顯示的頁面上執行的攻擊方式。CSRF與XSS截然不同，它利用用戶對網站的信任，盜取用戶的個人信息，以用戶的名義進行有目的的請求，例如發送信息和郵件，進行購物和貨幣轉賬等。

AJAX的異步性也會帶來一定的問題，它利用XMLHttpRequest對象在不阻塞客戶端操作的情況下將客戶端請求提交到服務端處理，這種并行處理方式很可能會造成競爭條件和死鎖。

因此，對敏感數據實施加密傳輸、實行資源訪問控制、利用混淆工具混淆代碼、對來自外界的數據進行嚴格的數據校驗、進行嚴格的用戶認證可以減少AJAX技術帶來的一些安全隱患。

技術特點

基本特點

傳統的服務器端Web應用程序專注于為導致對服務器調用的每個客戶端事件生成 HTML 文檔。然后，客戶端將刷新并重新呈現每個響應的完整HTML 頁面。而基于AJAX的客戶端的獨特之處在于，客戶端包含作為ECMAScript技術嵌入的特定于頁面的控制邏輯，該頁面根據加載文檔、鼠標單擊、焦點更改甚至計時器等事件與JavaScript技術進行交互。AJAX 交互允許將表示邏輯與數據明確分離，但是它需要不同的服務器端架構來支持此交互模型。

優點

頁面不需要重新加載就可以更新頁面數據，能夠有效維護網頁的狀態；客戶端只需要向服務器端請求必要的數據，不需要獲得整個頁面，有效減少了數據通信量，降低了帶寬占用，提高了通信效率；AJAX使用ECMAScript腳本語言，可以調用外部數據，實現數據聚合的功能；AJAX使得界面與應用的分離，有利于分工合作，提高了效率和安全性。

缺點

AJAX在進行JSON數據交換和接收外部地址的XML數據對象時，會使得攻擊者將連接注入JSON對象的惡意腳本、修改XML數據、注入惡意代碼等達到攻擊目的。同時，在進行腳本注入時，如果反饋和調用函數的數據沒有經過驗證也會產生安全漏洞。攻擊者還會在跨域訪問采用的第三方代理橋接提供的回調功能中注入惡意代碼進行攻擊，此外，跨域偽造請求中，瀏覽器向其他域發送請求時，惡意攻擊行為會通過瀏覽器調用cookie會話來竊取身份認證信息。

AJAX病毒可以利用XMLHttpRequest對象，在后臺向服務器發送HTTP請求進行DDOS攻擊，AJAX病毒運作時不會影響正常計算機或瀏覽Web站點，可以在網頁上被嵌入執行。多技術的融合創建也使得AJAX病毒能變換出很多攻擊方式，從而竊取用戶敏感信息、造成服務器資源耗盡。拒絕服務而引起宕機等。

與傳統網頁請求的區別

應用場景

AJAX技術主要用于交互式網頁程序的應用開發，可為用戶提供高質高效的瀏覽體驗，它實現了傳統Web程序開發領域中“既不干涉用戶工作，又為用戶提供服務選擇”的理想效果。

實時數據更新

采用AJAX技術，可以在用戶單擊按鈕時，使用ECMAScript和HTML立即更新用戶界面，而且XMLHttpRequset可以作為一個API，允許Web瀏覽器與服務器進行異步通信，并通過它發送HTTP請求來實現網站和服務器之間的數據交換。，當請求返回時，使用JavaScript和層疊樣式表來響應的更新用戶界面，這種方式實現了Web站點的實時響應。谷歌將AJAX技術應用到 GoogleMap中，用戶無需等待刷新即可通過縮小和拖拽看到其他區域。

無刷新交互

AJAX技術使用DOM實現無刷新更新頁面，在讀取數據的過程中顯示的始終是原來的頁面狀態，只有當接收到全部數據后才顯示相應部分的內容，而這種刷新也是瞬間的，用戶幾乎察覺不到，減少了用戶的等待時間，提高了應用的可用性。

單頁面應用

AJAX帶來的單頁面應用（SPA）是前后端分離模式中的一種，它使得用戶能夠在頁面不跳轉的情況下實現與后臺的實時交互。這種模式下，AJAX引擎從服務端獲取XML或者其他格式的數據．便可定制整個Web界面，從而使得服務器只專注于數據邏輯處理，可以讓Web應用開發的前后端分工明確。

發展趨勢與挑戰

挑戰

使用AJAX開發應用程序面對三個挑戰，分別是兼容性相對較弱、可用性考慮和回退功能的問題。因為部分瀏覽器不能夠支持XMLHttpRequest，或由于瀏覽器安全設置而阻止對XMLHttpRequest的使用。而且，在XMLHttpRequest處理過程，用戶無法知道他們的輸入是否已經被注冊并處理，會導致用戶在等待響應時多次點擊按鈕。此外，通過 AJAX更新頁面打斷了瀏覽器“退回前頁”按鈕的正常工作，并且不能使用書簽功能。

另外，使用Ajax界面可能會增加傳遞到服務器的請求數量，所以服務器的負載指標是需要考慮的一個設計因素，而且XMLHttpRequest發送的順序不能被保證依次結束，設計處理異步服務器的響應也是一個需要考慮的因素。

發展趨勢

AJAX技術缺乏標準化組織和良好的基礎，所以標準化和規范化是AJAX在發展過程中的必經之路。應用開發需要全面支撐的控件，比如前臺到后臺、數據到界面、面向數據庫應用開發等方面。基礎層的結構、控件的關聯性與擴展性需要從更高的層面統一規劃，高級構件如數據控件、圖表、報表等方面的發展也很重要。所以整體化、結構化、擴展性和工具化是AJAX發展的整體框架。

AJAX技術解決傳統Web程序開發模式中存在的耦合度較高，串行開發效率低等問題。前后端數據交互使用JSON格式的數據，前端拿到后端數據之后解析數據用AJAX對數據進行渲染，將數據顯示在界面上，而通過返回數據的方式將前后端代碼徹底解耦，再展現到客戶端。

Web 3.0時代，互聯網正在向移動化的方向發展，AJAX能夠實現移動互聯網時代個性優化和精細化的運營。AJAX采取預取模式減少用戶的訪問延遲，提高CPU緩存的命中率。AJAX還能實現自動補全待輸入的內容，緩解了手持移動設備輸入的壓力。而且在整個交互過程中，Web服務器只需要發送最小量必要的交互數據，大幅度的降低帶寬的消耗并縮減數據的傳輸量。此外，AJAX還能夠解決市場份額和應用程序移植與無障礙發布的問題。