Ajax
什麼是Ajax？
*允許瀏覽器與服務器通信而無須刷新當前頁面的技術。Ajax技術(異步)
同步交互和異步交互的區別？
1）同步是指：發送方發出數據後，等接收方發回響應以後才發下一個數據包的通訊方 式。
2）異步是指：發送方發出數據後，不等接收方發回響應，接着發送下個數據包的通訊 方式。
例子：普通B/S模式(同步) AJAX技術(異步)
* 同步：提交請求->等待服務器處理->處理完畢返回 這個期間客戶端瀏覽器不能幹 任何事
* 異步: 請求通過事件觸發->服務器處理（這時瀏覽器仍然可以作其他事情）->處理
完畢。
Ajax模型比傳統的web模型好在哪裏？
1）頁面數量少，性能高
2）對帶寬的要求低
3）對服務器端造成的壓力小
除了Ajax技術之外，還有哪些技術可以進行異步交互？
1）Flash技術(問題：性能不好;不是瀏覽器原生)
2）框架：如果使用一組框架構造了一個網頁，可以只更新其中一個框架，而不必驚動 整個頁面
3）iframe：Ajax技術出現之前，存在異步交互，實現異步交互的技術就是iframe問題： 實現異步交互之後，處理完畢後，加載的效果依舊還在。
4）XMLHttpRequest：該對象是對 JavaScript 的一個擴展，可使網頁與服務器進行通信。 是創建 Ajax 應用的最佳選擇。實際上通常把 Ajax 當成 XMLHttpRequest 對象的代名詞
Ajax的缺陷：
1）Ajax技術並不適用於任何場景
2）大量使用javascript引擎和Ajax引擎，取決於瀏覽器的支持
3）客戶端與服務器端交互時，不刷新當前頁面。使瀏覽器的前進和後退功能失效，用 戶經常搞不清楚，數據是新的還是舊的。需單獨地拿出一個地方，專門進行提示。
4）對流媒體的支持不太好
擴： AJAX包含的技術：面試題
* Ajax是不是一個技術？不是
* 包含哪些技術：Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest
Ajax的工作原理
Ajax的核心是JavaScript對象XmlHttpRequest。
該對象在Internet Explorer 5中首次引入，它是一種支持異步請求的技術。簡而言之， XmlHttpRequest使您可以使用JavaScript向服務器提出請求並處理響應，而不阻塞用戶。
|
|
1）AJAX採用異步交互過程。AJAX在用戶與服務器之間引入一箇中間媒介，從而消除了
網絡交互過程中的處理—等待—處理—等待缺點。
2）用戶的瀏覽器在執行任務時即裝載了AJAX引擎。AJAX引擎用JavaScript語言編寫，
通常藏在一個隱藏的框架中。它負責編譯用戶界面及與服務器之間的交互。
3）AJAX引擎允許用戶與應用軟件之間的交互過程異步進行，獨立於用戶與網絡服務器
間的交流。現在，可以用Javascript調用AJAX引擎來代替產生一個HTTP的用戶動作
內存中的數據編輯、頁面導航、數據校驗這些不需要重新載入整個頁面的需求可以交
AJAX來執行。
|
|
詳細代碼：
*創建XMLHttpRequest對象：有些筆試題，要求寫出創建的代碼！
|
function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){} } } return xmlHttp; } |
* 註冊監聽
|
* 使用XMLHttpRequest對象的onreadystatechange屬性：監聽服務器端的通信狀態 * 使用XMLHttpRequest對象的readyState屬性：獲取服務器端的通信狀態 0 代表未初始化。 還沒有調用 open 方法 1 代表正在加載。 open 方法已被調用，但 send 方法還沒有被調用 2 代表已加載完畢。send 已被調用。請求已經開始 3 代表交互中。服務器正在發送響應 4 代表完成。響應發送完畢 * 最終關注的狀態爲"4"，響應完畢 * 使用XMLHttpRequest對象的status屬性：獲取響應首部信息中的三位狀態碼： 404 沒找到頁面(not found) 403 禁止訪問(forbidden) 500 內部服務器出錯(internal service error) 200 一切正常(ok) 304 沒有被修改(not modified)(服務器返回304狀態，表示源文件沒有被 修改 ) |
* 客戶端與服務器端之間建立連接:
|
* 使用的是XMLHttpRequest對象的open(method, url, asynch)方法 * 請求類型是GET方式 * method：請求類型，爲"get" * url：請求路徑，可以是絕對路徑或相對路徑 * asynch：表示是否異步加載，true是默認值(異步) * 請求類型是POST方式 * method：請求類型，爲"post" * url：請求路徑，可以是絕對路徑或相對路徑 * asynch：表示是否異步加載，true是默認值(異步) * 需要設置請求首部信息： xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); |
* 向服務器端發送請求數據：
|
* 使用XMLHttpRequest對象的send()方法： * 如果請求類型是GET方式的話，send()方法發送請求數據，服務器端不能接收 * 可以將要發送的請求數據，放置在請求連接的後面 * 該步驟不能省略，寫法：send(null) * 如果請求類型是POST方式的話，send()方法發送請求數據，服務器端可以接收 * 必須要設置請求首部信息的內容：Content-Type |
* 實現Ajax的六個步驟是什麼？
* 創建XMLHttpRequest對象
* 建立連接
* 發送請求
* 註冊監聽
* 獲取服務器端的通信狀態
* 獲取服務器端的響應狀態碼
* 使用Ajax異步交互時，客戶端接收服務器端的響應數據：
* 使用XMLHttpRequest對象的responseText屬性：
|
|
接收的格式是文本內容或HTMlL代碼
* 客戶端接收服務器端的響應時，數據格式：XML
|
* 服務器端： * 設置響應首部信息："Content-Type"爲"text/xml" response.setContentType("text/xml;charset=utf-8"); * 手動構建的xml格式數據：真實開發不可能這樣做 * 構建的數據格式是xml格式，是String類型 * 數據來源於查詢數據庫，封裝在javabean、List、Map和Array集合等
* 如何將javabean、List、Map和Array集合內容轉換成xml數據格式？ * xstream工具包： * xstream-1.4.4.jar包：核心包 * xpp3_min-1.1.4c.jar包：必要依賴包
* 處理邏輯： //1 創建一個XStream的實例 XStream xStream = new XStream(); /* * 2 爲javabean起別名(默認是包結構) * * 利用XStream的實例alias(String name,Class type) * * name：別名 * * type：指定爲哪個javabean其別名 */ xStream.alias("province", Province.class); xStream.alias("city", City.class); /* * 3 將javabean的屬性作爲轉換後的xml格式的標籤屬性使用 * * 利用XStream的實例useAttributeFor(Class type,String fieldName) * * type：指定要使用哪個javabean的屬性 * * fieldName：指定對應javabean的屬性名 */ xStream.useAttributeFor(Province.class, "provinceId"); xStream.useAttributeFor(Province.class, "provinceName"); xStream.useAttributeFor(City.class, "cityId"); xStream.useAttributeFor(City.class, "cityName"); //4 利用XStream的toXML()方法，將javabean轉換成xml數據格式 String xml = xStream.toXML(province1); System.out.println(xml); * 客戶端： * 使用XMLHttpRequest對象的responseXML屬性：接收的格式是XML格式 * 利用DOM解析XML格式數據 |
* 第三種數據格式：json
定義：
1）是JavaScript Object Notation的縮寫
2）是一種輕量級的數據交換格式。
特點：
1）易於人的閱讀和編寫
2）易於機器解析和生成
3）基於ECMA-262標準，採用完全獨立於語言的文本格式。
數據格式和特點：
1）“名稱/值”對的集合：類似於Map集合
* 這種結構其實就是javascript對象的直接量定義方式
* 是以"{}"開始和結束
* 數據是以"key/value"形式
* 多個數據之間，用","隔開
* 訪問形式：json.key或json['key']
2）值的有序列表：類似於數組
* javascript中具有Array類型，內建對象
* 是以"[]"開始和結束的
* 數據之間用","隔開
3）json數據格式：是瀏覽器原生支持
*元素值可具有的類型：string, number, object, array, true, false, null
* 擴展：
* Map集合中嵌套數組結構
* 數組結構中嵌套Map集合
* "key/value"格式和數組格式可以混合嵌套，而且無限嵌套下去
*客戶端接收服務器端的響應時，數據格式：json
|
* 服務器端： * 不需要設置響應首部信息 * 構建的是String類型的json數據格式內容 * 如何將javabean、List、Array和Map集合等轉換成json數據格式？ * json-lib工具包： * json-lib-2.4-jdk15.jar：核心包 * 必要依賴包： * commons-beanutils-1.8.3.jar * commons-collections-3.2.1.jar * commons-lang3-3.1-bin.zip * commons-lang-2.5.jar * commons-logging-1.1.1.jar * ezmorph-1.0.6.jar * morph-1.1.1.jar * morph-sandbox-1.1.1.jar * 使用我們自己的工具類：JSONUtil * 客戶端： * 接收服務器端響應的json數據格式： * 使用XMLHttpRequest對象的responseText屬性 * 將其當做文本格式接收
* 利用eval()函數將其轉換成json數據格式： * 調用eval()函數時，將要轉換成的內容，用"()"進行包裝：(假如傳遞的是"{}") * 利用"()"將其包裝，eval()函數會強行將其轉化成json數據格式(object) * 不用"()"將其包裝，eval()函數會將其解釋爲一個空的語句塊 |
小結：
數據格式(HTML\XML\JSON)
1）HTML
* 優點：
* 在客戶端接收後，不需任何解析
* 可讀性比較好
* 配合innerHTML屬性使用，效率好
* 缺點：
* 更新一個頁面多個部分時，使用Ajax異步交互，HTML不合適
2）XML
* 優點：
* XML 是一種通用的數據格式。
* XML格式是自定義標籤名
* DOM可以解析XML，不需要第三方的工具
* 缺點：
* DOM解析複雜的XML時，代碼量比較大，性能低
* 服務器端，必須設置正確的響應首部信息："Content-Type"爲 "text/xml"
* 如果服務器端構建的xml數據格式不正確，客戶端接收是不報錯 的！
3）JSON
* 優點：
* json更專注數據內容
* 服務器端構建json數據格式時，使用默認設置即可
* 客戶端解析json數據格式，DOM解析json數據格式
* 缺點：
* eval()函數：有可能轉換不成功
擴展內容：反向Ajax
定時發送原理圖：
按需發送原理圖：