【文章內(nèi)容簡介】 交互，也可以方便的和其他類型客戶端交互。 ? 很多時候，在 AJAX模式的程序中使用純文本內(nèi)容或是自定義的數(shù)據(jù)結(jié)構(gòu)進(jìn)行數(shù)據(jù)傳輸會更方便，實(shí)際上Google幾個有名的 AJAX模式產(chǎn)品使用的都不是 XML的數(shù)據(jù)。 北京傳智播客教育 AJAX技術(shù)核心 總結(jié) ——AJAX應(yīng)用的五個步驟： XMLHttpRequest對象 open方法與服務(wù)器建立鏈接 北京傳智播客教育 AJAX技術(shù)核心 需要注意的內(nèi)容： XMLHttpRequest對象的不同的建立方式 3. open方法三個參數(shù)含義，此外還需要注意 GET方式和POST方式服務(wù)器端地址的不同寫法 4. GET方式和 POST方式 send的參數(shù)的不同之處，以及POST方式下 send之前需要設(shè)置請求頭信息的工作 ，此外還要注意如何獲取響應(yīng)數(shù)據(jù)內(nèi)容。 北京傳智播客教育 AJAX技術(shù)核心 ? XMLHttpRequest的一個特殊安全問題： ?IE：訪問跨域頁面時會給出提示，用戶確認(rèn)后會訪問 ?Mozilla FireFox及其他：不允許訪問跨域頁面 北京傳智播客教育 AJAX技術(shù)核心 I n d e x . h t m l瀏 覽 器W e b S e r v e r 1W e b S e r v e r 2獲 取 i n d e x . h t m lX M L H t t p R e q u e s t同 域 訪 問X M L H t t p R e q u e s t跨 域 訪 問北京傳智播客教育 AJAX技術(shù)核心 ? 如何解決跨域問題？ I n d e x . h t m l瀏 覽 器W e b S e r v e r 1 W e b S e r v e r 2獲 取 i n d e x . h t m lX M L H t t p R e q u e s t 跨 域 訪 問代 理獲 取 數(shù) 據(jù)北京傳智播客教育 AJAX技術(shù)核心 在瀏覽器端的代碼中，我們需要在調(diào)用 open方法之前判斷一下要連接的地址是不是以 開頭的，如果是則認(rèn)為要訪問的是跨域的資源，首先將當(dāng)前 url中的” ?”變成” amp?！?，這是因?yàn)閷⒁B接的地址改為” Proxy?url=” + url以后，如果原來 url地址中有參數(shù)的話，新的 url地址中就會有兩個“ ?”這會導(dǎo)致服務(wù)器端解析參數(shù)錯誤，” url=”之后的內(nèi)容表示本來要訪問的跨域資源的地址。 function convertURL(url){ if((0,7) == url = (?,amp。)。 url = Proxy?url= + url。 } return url。 } 北京傳智播客教育 AJAX技術(shù)核心 ? 注意 Proxy中針對 GET方式和 POST方式進(jìn)行了分別的處理，其中 GET方式仍然將參數(shù)信息拼到URL中，而 POST方式則向 HttpURLConnection的數(shù)據(jù)流中添加參數(shù)信息。 ? 由于對本來請求的地址和其包含的參數(shù)進(jìn)行了轉(zhuǎn)換，導(dǎo)致 url參數(shù)中只包含原來請求的地址信息，而原來請求的參數(shù)信息則需要我們解析出來和地址信息一起重新組成本來的請求 URL，因此方法開頭的一段 while就做了這個工作。 北京傳智播客教育 AJAX技術(shù)核心 ? 注意由于進(jìn)入 servelt之前參數(shù)信息已經(jīng)被做過一次 URLDecoder，因此這個時候參數(shù)信息中的中文信息傳到真正要訪問的 servlet時解碼會出現(xiàn)亂碼，因此我們再拼接參數(shù)信息之前又再一次通過了一次編碼，這樣就解決了中文的亂碼問題。 ? 在從遠(yuǎn)端服務(wù)器讀取數(shù)據(jù)時，要顯示的指定輸入流的編碼格式，這樣才可以保證通過BufferReader讀到的內(nèi)容不會有亂碼信息。 北京傳智播客教育 AJAX技術(shù)核心 meta equiv=Expires content=0 meta equiv=Pragma content=nocache meta equiv=CacheControl content=nocache (CacheControl,nocache)。 北京傳智播客教育 AJAX技術(shù)核心 if((?) = 0){ url = url + amp。t= + (new Date()).valueOf()。 } else{ url = url + ?t= + (new Date()).valueOf()。 } ? 一個比較好的方法是給 url地址最后加上時間戳，這樣在瀏覽器看來每次請求的 url地址都不一樣，因此就不會出現(xiàn)緩存問題，我們一般采用如下方式。其中 url是原始請求地址，代碼中根據(jù)原 url中是否已有參數(shù)信息來進(jìn)行時間戳參數(shù)的增加。 北京傳智播客教育 AJAX技術(shù)核心 ? DOM（ Document Object Model）被稱作文檔對象模型，它是語言和平臺中立的接口，允許程序和腳本動態(tài)訪問和更新文檔的內(nèi)容，結(jié)構(gòu)和風(fēng)格。 ? 在 AJAX中， DOM對于我們來說是 HTML 和 XML 文檔的一個應(yīng)用程序接口，它可以把 HTML， XML與 AJAX中的開發(fā)語言 Javascript連接起來。 ? Javascript中的 DOM實(shí)現(xiàn)可以使得我們在 AJAX中通過Javascript代碼對 HTML和 XML數(shù)據(jù)進(jìn)行 DOM方式的操作，從而做到頁面的動態(tài)修改更新和數(shù)據(jù)的提取處理。 北京傳智播客教育 AJAX技術(shù)核心 ? HTML的 DOM和 XML的 DOM在 API接口上基本一致，使用差別不大，但本質(zhì)上有區(qū)別。 ? HTML的 DOM是一個內(nèi)存對象樹，在瀏覽器中只保存一份， HTML的 DOM修改 HTML的內(nèi)容會直接反應(yīng)到瀏覽器中；而 XML的 DOM則可以創(chuàng)建多個，每個可以對應(yīng)一個 XML文本。 北京傳智播客教育 AJAX技術(shù)核心 ? DOM與 HTML 北京傳智播客教育 AJAX技術(shù)核心 ? 在 DOM眼中，HTML是由很多不同類型的節(jié)點(diǎn)組成的，這些節(jié)點(diǎn)都屬于 NODE對象。 ? NODE對象有一個 nodeType的屬性可用于判斷節(jié)點(diǎn)類型 接口 nodeType常量 nodeType值 備注 Element 1 元素節(jié)點(diǎn) Attr 2 節(jié)點(diǎn)屬性 Text 3 文本節(jié)點(diǎn) Comment 8 注釋的文本 Document 9 Document根節(jié)點(diǎn) 北京傳智播客教育 AJAX技術(shù)核心 ? 元素節(jié)點(diǎn)是 HTML中最常見的節(jié)點(diǎn)，頁面中的body,input,div都是元素節(jié)點(diǎn)。 ? 屬性節(jié)點(diǎn)表示的是一個元素節(jié)點(diǎn)的某個屬性，例如 input中的 value屬性就可以被看作一個屬性節(jié)點(diǎn)。 ? 文本節(jié)點(diǎn)表示 HTML頁面中的一段文字信息，例如 divHello World/div，其中的” Hello World”就是一個文本節(jié)點(diǎn)。 北京傳智播客教育 AJAX技術(shù)核心 ? 注釋文本節(jié)點(diǎn)也比較好理解， HTML的注釋信息，!—Comment Message比如這樣一段內(nèi)容就是一個注釋文本節(jié)點(diǎn)。 ? 根節(jié)點(diǎn)顧名思義，表示的是 HTML的根，在Javascript中有一個特殊的對象 document，它可以表示 HTML的根節(jié)點(diǎn)，后面我們會介紹這個特殊對象有很多在 AJAX中非常常用的方法。 北京傳智播客教育 AJAX技術(shù)核心 ? 根節(jié)點(diǎn)的屬性和方法 屬性 描述 documentElement 表示文檔的根元素節(jié)點(diǎn) 在 HTML文檔中，它表示 html這個標(biāo)簽代表的元素節(jié)點(diǎn) 方法 描述 createAttribute() 用指定名字創(chuàng)建新的 Attr節(jié)點(diǎn)對象。 方法參數(shù)為屬性的名字 createComment() 用指定的字符串創(chuàng)建新的 Comment節(jié)點(diǎn)對象。 方法參數(shù)為注釋信息 createElement() 用指定的標(biāo)記名創(chuàng)建新的 Element節(jié)點(diǎn)對象。 方法參數(shù)為節(jié)點(diǎn)標(biāo)簽的名字 北京傳智播客教育 AJAX技術(shù)核心 ? 根節(jié)點(diǎn)的屬性和方法 方法 描述 createTextNode() 用指定的文本創(chuàng)建新的文本節(jié)點(diǎn)對象。 方法參數(shù)為文本信息 getElementById() 返回文檔中具有指定 id屬性的 Element節(jié)點(diǎn)。 方法參數(shù)為節(jié)點(diǎn)的 id屬性值 getElementsByTagName() 以數(shù)組方式返回文檔中具有指定標(biāo)記名的所有Element節(jié)點(diǎn)，其順序?yàn)樵谖臋n中出現(xiàn)的順序。標(biāo)記名指的是像 body,table這樣的HTML標(biāo)記名稱。 方法參數(shù)為標(biāo)記名稱 北京傳智播客教育 AJAX技術(shù)核心 ? Element節(jié)點(diǎn)對象的常用方法都是對節(jié)點(diǎn)屬性的操作。 屬性 描述 tagName 元素的標(biāo)記名字，例如 table元素的標(biāo)記名字為 table。 HTML文檔返回的標(biāo)記名字均為大寫。 方法 描述 getAttribute() 以字符串形式返回指定屬性的值 方法參數(shù)為屬性名稱 getAttributeNode() 以 Attr節(jié)點(diǎn)對象的形式返回指定屬性的值 方法參數(shù)為屬性名稱 getElementsByTabName() 以數(shù)組方式返回當(dāng)前元素節(jié)點(diǎn)的子孫節(jié)點(diǎn)中中具有指定標(biāo)記名的所有Element節(jié)點(diǎn)，其順序?yàn)樵谖臋n中出現(xiàn)的順序。 方法參數(shù)為節(jié)點(diǎn)的標(biāo)記名 北京傳智播客教育 AJAX技術(shù)核心 ? Element節(jié)點(diǎn)對象的常用方法都是對節(jié)點(diǎn)屬性的操作。 方法 描述 hasAttribute() 如果該元素具有指定名字的屬性，則返回 true removeAttribute() 從 Element節(jié)點(diǎn)中刪除指定的屬性 方法參數(shù)為屬性的名稱 removeAttributeNode() 從 Element節(jié)點(diǎn)的屬性列表中刪除指定的 Attr節(jié)點(diǎn) 方法參數(shù)為屬性的名稱 setAttribute() 把指定的屬性設(shè)置為指定的字符串值，如果該屬性不存在則添加一個新屬性 方法的第一個參數(shù)為屬性的名稱 方法的第二個參數(shù)為屬性的值 setAttributeNode() 把指定的 Attr節(jié)點(diǎn)添加到該元素的屬性列表中 方法的參數(shù)為 Attr節(jié)點(diǎn)對象 北京傳智播客教育 AJAX技術(shù)核心 ? 屬性節(jié)點(diǎn)的屬性 屬性 描述 name 屬性名 value 屬性值 北京傳智播客教育 AJAX技術(shù)核心 ? Node對象的屬性和方法如下所示 ： 屬性 描述 attributes 表示該節(jié)點(diǎn)的所有屬性節(jié)點(diǎn)對象的數(shù)組 childNodes 表示當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)的數(shù)組。如果沒有子節(jié)點(diǎn)，則返回空數(shù)組 firstChild 返回當(dāng)前節(jié)點(diǎn)的第一個子節(jié)點(diǎn)。如果沒有子節(jié)點(diǎn)，則返回 null lastChild 返回當(dāng)前節(jié)點(diǎn)的最后一個子節(jié)點(diǎn)。如果沒有子節(jié)點(diǎn)，則返回 null nextSibling 返回當(dāng)前節(jié)點(diǎn)的下一個兄弟節(jié)點(diǎn)。如果沒有這樣的節(jié)點(diǎn)，則返回 null 北京傳智播客教育 AJAX技術(shù)核心 ? Node對象的屬性和方法如下所示 ： 屬性 描述 previousSibling 返回當(dāng)前節(jié)點(diǎn)的上一個兄弟節(jié)點(diǎn)。如果沒有這樣的節(jié)點(diǎn)則返回 null nodeName 返回節(jié)點(diǎn)的名字，對于 Element節(jié)點(diǎn)表示 Element的標(biāo)記名稱 nodeType 代表節(jié)點(diǎn)的類型 nodeValue 代表節(jié)點(diǎn)的內(nèi)容。對于 Text節(jié)點(diǎn)， nodeValue的值是文本內(nèi)容。對于注釋節(jié)點(diǎn)， nodeValue的值是注釋內(nèi)容。對于屬性節(jié)點(diǎn)， nodeValue的值是屬性值。對于其他節(jié)點(diǎn)，nodeValue的值可能為 null。 parentNode 返回當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)。如果沒有父節(jié)點(diǎn)，則返回 null 北京傳智播客教育 AJAX技術(shù)核心 ? Node對象的屬性和方法如下所示 ： 方法 描述 appendChild() 給當(dāng)前節(jié)點(diǎn)增加一個子節(jié)點(diǎn)。增加的子節(jié)點(diǎn)位于當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)的末尾。 方法參數(shù)為 Node對象。 cloneNode() 復(fù)制當(dāng)前節(jié)點(diǎn)，或者復(fù)制當(dāng)前節(jié)點(diǎn)以及它的所有子孫節(jié)點(diǎn)。 方法參數(shù)為 true或 false。 True表示遞歸的復(fù)制所有子孫節(jié)點(diǎn)， false表示只復(fù)制當(dāng)前節(jié)點(diǎn)。 hasChildNodes() 如果當(dāng)前節(jié)點(diǎn)擁有子節(jié)點(diǎn)，則返回 true 北京傳智播客教育 AJAX技術(shù)核心 ? Node對象的屬性和方法如下所示 ： 方法 描述 insertBefore() 插入一個節(jié)點(diǎn)，位置在當(dāng)前節(jié)點(diǎn)的指定子節(jié)點(diǎn)之前。如果該節(jié)點(diǎn)已經(jīng)存在，則刪除原節(jié)點(diǎn)后再插入新的節(jié)點(diǎn)。如果指定子節(jié)點(diǎn)不存在，則執(zhí)行效果和appendChild方法相同。