Ajax是技術還是框架？走進Ajax的前世今生

寫在前面

看小伙伴寫文章把AJAX當框架定義，和Promise，axios放到一起講

個人感覺還是有些偏差的

這里分享一篇上學時的讀書筆記

希望通過本文小伙伴們可以對AJAX有清晰的定義

博文內容主要為閱讀《Ajax基礎教程》整理筆記

時間決定你會在生命中遇到誰，你的心決定你想要誰出現在你的生命里，而你的行為決定最后誰能留下————《瓦爾登湖》

Web簡史

Berners-lee發明了標準通用語言(Standard Generalized Markup language,SGML)的一個子集稱為超文本標記語言(HyperText Markup Language,HTML)，

創建了稱為 超文本傳輸協議(HyperText Transfer Protocol,HTTP) 的簡單協議，

還發明了第一個Web瀏覽器，叫做WorldWideWeb。

Web發展例程：

最初的Web頁面都是靜態的，為了讓Web動態，引入的 CGI(Common Gateway Interfase,通用網關接口)， 使用CGI在服務器端創建程序，CGI腳本可以使用多種語言編寫。

對CGI的改進有了 applet，applet允許開發人員編寫可嵌入在Web頁面的小應用程序，在瀏覽器的Java虛擬機(JVM)中運行applet

后來Netscape創建了一種動態腳本語言，最終命名為 JavaScript，設計JavaScript是為了讓不太熟悉Java和Web的開發人員能夠更輕松的開發applet，Microsoft也推出了 VBScript

在Java出現一年以后，sun引入 Servlet 即Java代碼不用像apple那樣的客戶端瀏覽器中運行了，把它控制在一個應用服務器上運行，但是servlet設計界面很不方便，需要以打印流來輸出，

為了將表示與業務邏輯分離，出現了 JSP(JavaScript Pages),Microsoft也推出了ASP。用來設計頁面

并不是只有Microsoft和Sun在努力尋找辦法來解決動態Web頁面問題。1996年夏天,FutureWave發布了一個名叫 FutureSplash Animator的產品。這個產品起源于一個基于Java的動畫播放器, FutureWave很快被Macromedia兼并,Macromedia則將這個產品改名為 Flash。

Flash：利用flash可以發布高度交互的應用。**

當Microsoft和Netscape發布其各自瀏覽器的第4版時,Web開發人員有了一個新的選擇:動態HTML (Dynamic HTML, DHTML)。DHTML 不是 W3C 標準。

DHTML革命：動態HTML(Dynamic HTML，DHTML) 結合HTML 層疊式樣式表(Cascading Style sheets,CSS),JavaScript,DOM。

Microsoft對于交互式應用有一定了解,而且對于這種標準請求/響應模式的限制一直都不滿意,因此提出了遠程腳本 ，但是同步頁面刷新問題一直沒有很好的解決方案。

Ajax不只是一個特定的技術,更應算是一種技巧,JavaScript是其主要組件。

Ajax相關的術語就是XMLHttpRequest 對象(XHR),它早在IE5 (于1999年春天發布)中就已經出現了,是作為Active X控件露面的。不過,最近出現的新現象是瀏覽器的支持。原先,XHR對象只在IE中得到支持(因此限制了它的使用)

但是從Mozilla 1.0和Safari 1.2開始,對XHR對象的支持開始普及。這個很少使用的對象和相關的基本概念甚至已經出現在W3C標準中:DOM Level 3加載和保存規約(DOM Level 3 Load and Save Specification)。特別是隨著Google Maps. Google Suggest, Gmail, Flickr, Netflix 和A9等應用變得越來越多手可熱,XHR也已經成為事實上的標準。

是誰發明了Ajax?

2005年2月, Adaptive Path的Jesse James Garrett最早創造了這個詞。在他的文章Ajax:A New Approach to Web Applications (Ajax: Web應用的一種新方法)中,Garrett討論了如何消除胖客戶(或桌面)應用與瘦客戶(或Web)應用之間的界限。

當然,當Google GoogleLabs發布Google Maps和 Google Suggest時,這個技術才真正為人所認識,而且此前已經有許多這方面的文章了。

但確實是Garrett最早提出了這個好名字,否則我們就得啰啰嗉嗉地說上大堆:異步(Asynchronous)、 XMLHttpRequest、 JavaScript. CSS、DOM 等等。

盡管原來把Ajax認為是Asynchronous JavaScript + XML (異步 JavaScript + XML)的縮寫,但如今,這個詞的覆蓋面有所擴展,

把允許瀏覽器與服務器通信而無需刷新當前頁面的技術都涵蓋在內

所以如何定義AJAX:即AJAX是基于 XMLHttprequest對象(XHR),消除胖客戶(桌面應用)與瘦客戶(Web應用)應用之間的界線。通過異步通信，允許瀏覽器與服務器通信而無需刷新當前頁面的技術。

使用XMLHTTPrequest對象

使用XMLHttpRequest對象發送請求和處理響應之前，必須先寫JavaScript創建一個XMLHttpRequest對象。

由于XMLHttpRequest并不是一個W3C標準，可以采用多種方法創建，Internet Explorer把XMLHttpRequest實現為一個ActiveXObject對象，其他瀏覽器把它實現為本地的Javascript對象。

var xmlHttp function createXMLHttpRequest(){ if(window.ActiveXObject){ //IE瀏覽器 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ //其他瀏覽器 xmlHttp = new XMLHttprequest(); } }

方法和屬性

交互實例

如何發送簡單請求

使用XMLHttprequest對象發送請求的基本步驟：

得到XMLHttpRequest對象的實例引用，可以創建新實例，也可以訪問已有的實例變量。

把對象的onreadystatechange屬性設置為指向事件函數的指針。

指定請求的屬性，open()方法

將請求發送給服務器，send()方法，如果沒有數據作為請求體的一部分發送，使用null；

與服務器通信

處理服務器響應：XMLHttpRequest對象提供responseText將響應提供為一個串，responseXML將響應提供為一個XML對象。

將響應解析為純文本文件。

document.getElementBiId("idName").innerHTML = xmlHttp.responseText; //以字符串的方式返回響應的內容，并寫入到IDName中。

將響應 解析為XML文件：

要使服務器按XML格式響應數據，需要Content_Type首部為text/xml，當為純文本時：text/piain

用于處理XML文檔的DOM元素的屬性方法

var XMLDoc= xmlHttp.responseXML; //響應以XML格式返回。

發送請求參數：

post方法將參數放到請求體中發送，get方法將講參數追加到URL中發送。當使用post方法時，需要調用XMLHttpRequest對象的send()方法時發送字符串。

function doRequestUsingGET(){ createXMLHttpRequest(); var queryString = "請求地址？"; queryString = queryString + createQueryString() +"&timeStamp="+new Date().getTime(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET","queryString",true); xmlHttp.send(null); } function doRequestUsingPOST(){ carterXMLHttpRequest();//獲取XMLHttp對象。 var url = "請求地址？timeStamp="+new Date().getTime(); var queryString = createQueryString();//獲取參數字符串 xmlHttp.open("post",url,true); xmlHttp.onreadystatechange = handleStateChange;//觸發判斷狀態方法。 xmlHttp.setRequestHeader("Content-type"，"application/x-www-form-urlencoded;");//確保服務器中知道請求體中有請求參數。 xmlHttp.send(quweyString);調用send()方法將查詢串作為參數傳遞。 }

為什么要把時間戳追加到目標URl：有時瀏覽器會把多個XMLHttpRequest請求的結果緩存在同一個URL，如果對每個請求的響應不同，就會帶來好的結果，把當前時間戳追加到YR來的最后，就能保證URL的唯一性。

請求參數作為XML發送

將請求參數以xml的格式作為請求體的一部分發送到服務器，與POST請求中將查詢串作為請求體的一部分進行發送異曲同工，不同的是由XMLHttpRequest對象的send方法發送xml串。

結束標記中斜線前面的反斜線：xml = xml + “”;SGML規約中提供一個技巧，可以識別出script元素中的結束標記，但其他內容不能識別，使用反斜線可以避免把串解析為標記，根據嚴格的XHTML標準，應該使用反斜線。

在Java代碼中，xml參數通過request對象獲取，轉換為字符流，字節流，通過 DocumentBuilderFactory對象方法轉換為DOM對象，然后通過NodeList 對象解析獲得數據。

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException { doGet(request, response); String xml = readXMLFromRequestBody(request); Document xmlDoc = null; xmlDoc = DocumentBuilderFactory.newInstance().newDocumentBuilder() .parse(new ByteArrayInputStream(xml.getBytes())); }catch(ParserConfigurationException e) { e.printStackTrace(); }catch(SAXException e) { e.printStackTrace(); } NodeList selectedPetTypes = xmlDoc.getElementsByTagName("type"); String type =null; String responseText = "Selectsd Pets"; for(int i =0;i< selectedPetTypes.getLength();i++) { type = selectedPetTypes.item(i).getFirstChild().getNodeValue(); responseText = responseText+" "+type; } response.setContentType("text/xml"); response.getWriter().print(responseText); System.out.println(responseText); } private String readXMLFromRequestBody(HttpServletRequest request) { StringBuffer xml = new StringBuffer();//實例化一個字符緩存區對象； String line = null; try { BufferedReader reader = request.getReader();//請求字符緩存輸入流，從字符輸入流中讀取文件，一次讀取一行。 while((line =reader.readLine())!=null) {//循環讀取一個文本行 xml.append(line); } }catch( Exception e) { e.printStackTrace(); } return xml.toString(); }

實現基本的Ajax技術

function validate(){ createXMLHttpRequest(); var date = document.getElementById("birthDate"); var url = "ValidationServlet?birthDate=" + escape(date.value); xmlHttp.open("GET",url,true); xmlHttp.onreadystatechange = callback; xmlHttp.send(null); } function callback(){ if(xmlHttp.readyState ==4){ if(xmlHttp.status == 200){ var mes = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data; var val = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data; setMessage(mes,val); } } } function setMessage(message,isvalid){ var messageArea = document.getElementById("dateMessage"); var fontColor = "red"; if(isvalid == "true"){ fontColor = "green"; } messageArea.innerHTML = ""+message+""; }

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); boolean passed = validateDate(request.getParameter("birthDate")); response.setContentType("text/xml;charset=UTF-8"); response.setHeader("Cache-Control", "no-cache"); String message = "You have entered an invalid date"; if(passed){ message ="You have entered an invalid date"; } out.println(""); out.println(""+Boolean.toString(passed)+""); out.println(""+message+""); out.println(""); out.close(); } private boolean validateDate(String date) {//判斷字符串符合指定的日期格式 boolean isValid=true; if(date!=null) { SimpleDateFormat formatter = new SimpleDateFormat("MM/dd/YYYY"); try { formatter.parse(date); //解析字符串的文本，生成 Date, }catch(ParseException e) { e.printStackTrace(); isValid=false; } }else { isValid=false; } return isValid; }

獲取當前時間的的字符串格式。

讀取響應首部

當服務器對HEAD請求做出響應時，它只發送響應首部忽略響應內容。

function handleStateChange(){ if(xmlHttp.readyState == 4){ if(requestType =="allResponseHeaders"){ getAllRequestHeaders(); }else if(requestType =="lastModified"){ getLastModified(); }else if(requestType =="isResourceAvailable"){ getIsResourceAvailable(); } } } function getAllRequestHeaders(){ alert(xmlHttp.getAllResponseHeaders()); } function getLastModified(){ alert("Last Modified:"+xmlHttp.getResponseHeader("Last-Modified")); } function getIsResourceAvailable(){ if(xmlHttp.status ==200){ alert("Successful^_^"); }else if(xmlHttp.status == 404){ alert("Resource is unavailable"); }else{ alert("Unexpected response status :"+xmlHttp.status); }

Ajax在開發中有很多的應用場景，比如下面的一些場景

動態加載列表框

創建自動刷新頁面：

創建工具提示：

動態更新Web頁面

jQuery對Ajax的實現：

通過jQuery Ajax方法，能夠使數據HTTP GET或HTTP POST請求從遠程服務器上請求文本，HTML，XML，JSON，數據，同時能夠把這些外部數據載入網頁的被選元素中。

ajax()方法：jQuery的底層實現，$.ajax()方法返回其創建的XMLHttpReuqst對象，大多數無需操作該對象，特殊情況手動終止。只有一個參數：參數為key/value對象，$.ajax(options)。參數可選。

$.ajax({ url:'/ExampleServlet', type:'post', dataType:'json', success:function(data){alert('成功！');alert(data);}, error:function(){alert('內部錯誤');} });

$.ajax({ async:false; type:'post'; url:"example.jsp", data:"name=Jfn&location=boss" }).success(function(msg){alert("Data Saved:"+msg) }).error(function(xmlHttpRequest,statusText,errorThrown){ alert("You form submission failed.\n\n" +"XMLHttpRequest:" +JSON.stringify(xmlHttpRequest) +",\nStatusText:"+statusText +",\nErroeThrown:"+errorThrown); });

load()方法從服務器加載數據，并把返回的數據放入被選元素：

url：必須參數，指定需要加載的URL

data：可選，規定與請求一同發送的查詢字符串鍵/值對集合。

callback：可選，請求成功完成的回調函數。

get(),post():用于通過HTTP GET或POST請求從服務器請求數據，

getJSON()：通過HTTP GET 請求載入JSON數據，并嘗試將其轉為對應的JavaScript對象。

Promise 對象實現的 Ajax 操作

function ajax(URL) { return new Promise(function (resolve, reject) { var req = new XMLHttpRequest(); req.open('GET', URL, true); req.onload = function () { if (req.status === 200) { resolve(req.responseText); } else { reject(new Error(req.statusText)); } }; req.onerror = function () { reject(new Error(req.statusText)); }; req.send(); }); } var URL = "/try/ajax/testpromise.php"; ajax(URL).then(function onFulfilled(value){ document.write('內容是：' + value); }).catch(function onRejected(error){ document.write('錯誤：' + error); });

關于AJAX和小伙伴們分享到這里

Ajax Java

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。