[Ajax-相濡以沫,不如相忘於江湖] Ajax初識

時間 2019-11-11

原文原文鏈接

Ajax的全稱是 Asynchronous JavaScript And XML，即異步JavaScript和XML。2005年由Jesse James Garrett首先提出。在以後極短的時間內，Ajax被普遍應用到大量B/S結構的應用中，改進了傳統的Web應用。html

Ajax背景及由來：編程

Ajax做用於瀏覽器/服務器模式的Web應用，即B/S結構。而傳統的Web應用中，每一個請求對應一個頁面，無論客戶端以POST仍是GET方式提交請求，每次請求後都會丟棄當前頁面，等待服務器生成新頁面。在等待期間，舊的頁面已經丟棄，新的頁面尚未徹底生成，整個瀏覽器一片空白，用戶什麼都作不了，只能等待，對於用戶而言，這用不連續的體驗，簡直糟糕透了！
瀏覽器

傳統Web應用的優點和缺點歸納:服務器

(1) 獨佔式的請求。用戶在頁面中提交了請求後，請求交由服務器處理，這段時間內用戶一直在等服務器的響應，而瀏覽器一片空白。直到服務器返回結果，重定向到其餘頁面，且瀏覽器實實在在的將新頁面下載後顯示，這樣用戶才能夠看到結果。並且若是前一個請求未處理完，則後一個請求不能發送。
網絡

(2) 頻繁的頁面刷新。傳統的Web應用基本採用請求-頁面的對應模式，每一個請求都須要丟棄當前頁年來從新加載新頁面。頻繁的頁面刷新不只讓用戶處於不連續的體驗中，同時也增長了帶寬流量，服務器的負擔加劇。
架構

(3) 簡陋的頁面。傳統Web應用由於須要頻繁刷新頁面，於是不可能製做出具備豐富表現功能的頁面。豐富表現功能的頁面文件過大，下載速度慢，並且頁面頻繁刷新，如此係統開銷至關大。於是傳統Web引用的頁面不可能很是出色。
異步

因爲傳統Web應用帶來的種種弊端及缺點，新技術的出現迫在眉睫！就這樣一段時間後出現了Ajax，而且Ajax技術從2005年問世以來，已在業界獲得迅速推廣，到如今已很難找到沒有使用Ajax的B/S應用了。函數

Ajax技術介紹：spa

Ajax經過在瀏覽器和服務器之間添加Ajax中間層，容許瀏覽器異步發送請求，同時容許動態加載服務器響應。用戶的請求再也不直接向服務器提交，而是使用XMLHttpRequest異步地向服務器發送請求，從而避免了丟棄當前頁面。
htm

Ajax的核心是JavaScript對象XMLHttpRequest。該對象在IE 5中首次引入，它提供了發送異步發送請求的能力。整個Ajax應用的工做過程以下:

(1) JavaScript腳本使用XMLHttpRequest對象像服務器發送請求。發送請求時既能夠發送GET請求，也能夠發送POST請求。

(2) JavaScript腳本使用XMLHttpRequest對象解析服務器響應數據。

(3) JavaScript腳本經過DOM動態更新HTML頁面。也能夠爲服務器響應數據動態增長CSS樣式表，在當前網頁的某個部分加以顯示。

Ajax技術核心: XMLHttpRequest：

Ajax技術的核心是異步發送請求，而XMLHttpRequest則是異步發送請求的對象。若是拋開異步發送請求，Ajax的其餘技術將徹底失去原有的意義。

關於XMLHttpRequest對象的實例化，不一樣瀏覽器對此對象的實例化方式不盡相同，但目前全部瀏覽器都支持XMLHttpRequest。2012年7月W3C再次發佈了XMLHttpRequest Level 2的草案，XMLHttpRequest即將成爲規範。實際上，全部的瀏覽器已支持最新的XMLHttpRequest規範。

Ajax的編程腳本: JavaScript語言

JavaScript是一種跨平臺的腳本語言。JavaScript腳本是Ajax技術中另外一個重要部分。JavaScript主要完成以下事情:

建立XMLHttpRequest對象。
經過XMLHttpRequest向服務器發送請求。
建立回調函數，監視服務器響應狀態，在服務器響應完成後，回調函數啓動。
回調函數經過DOM動態更新HTML頁面。

HTML頁面的DOM模型

DOM也是Ajax的核心技術。沒有DOM，JavaScript在獲取服務器數據後沒法動態更新HTML頁面，得到的數據沒法顯示在用戶的當前瀏覽頁面中。事實上，DOM也是JavaScript獲取頁面數據的方式

HTML頁面中DOM模型的主要功能是容許JavaScript動態操做HTML文檔。經過DOM可將HTML頁面視爲一組包含父子關係的節點。JavaScript能夠訪問每一個節點，修改節點內容及其屬性，也能夠新增節點、刪除節點。

Ajax編程的技術難點

Ajax與傳統Web應用相同，依然是基於請求/響應的架構，都是先由客戶端發送HTTP請求，而後由服務器生成對客戶端的響應。

傳統Web編程和Ajax編程的區別主要在於如下三點:

(1) 客戶端發送請求的方式不一樣

傳統Web應用發送請求一般有兩種方式: 採用提交表單的方式發送GET請求或POST請求；讓瀏覽器直接請求玩過資源發送GET請求。在採用Ajax技術後，應用須要使用XMLHttpRequest對象來發送請求。

(2) 服務器生成的響應不一樣

傳統Web應用中服務器的響應老是完整的HTML頁面，從<html>標籤開始，而後是<head>...</head>，而後是<body>...</body>，最後由</html>結束。在採用Ajax技術後，服務器響應再也不是完整的HTML頁面，而只是必須更新的數據，所以服務器生成的響應可能只是簡單的文本(也多是JSON格式或XLM格式的文本)

(3) 客戶端加載相應的方式不一樣

傳統Web應用具備每一個請求對應一個頁面的關係，並且服務器響應就是一個完整的HTML頁面，全部瀏覽器能夠自動加載並顯示服務器響應。在採用Ajax技術後，服務器相應的只是必須更新的數據，股客戶端必須經過程序來東臺加載服務器響應。

Ajax的特徵

(1) 異步發送請求

異步發送請求是Ajax應用最核心的內容。Ajax給了用戶連續體驗，用戶發送請求後，還能夠在當前頁面瀏覽，或者繼續發送請求，即便服務器響應尚未完成。而服務器響應完成後，瀏覽器並非從新加載整個頁面，而是金價在須要更新的部分。

(2) 服務器響應是數據，而不是頁面內容

在Ajax應用中，網絡負載主要集中在應用加載期，也就是頁面第一次下載時。一旦頁面下載成功，則至關於在客戶端部署了複雜的應用。然後面的操做將是至關迅速的，客戶端的JavaScript負責與服務器通訊，從服務器獲取必須更新的部分數據，而不是整個頁面內容。所以，Ajax的累積網絡流量比傳統Web應用要小不少。

(3) 瀏覽器中的是應用，不是簡單視圖

可將Ajax看作是Ajax應用，由於Ajax應用初始化時，需加載大量的JavaScript代碼。這些代碼包含了部分業務邏輯，將在後臺默默工做，負責處理部分邏輯，異步提交請求，以及讀取服務器相應數據，動態更新頁面。