構建您自己的Ajax Web應用程序-js教程-PHP中文網

首頁

web前端

js教程

構建您自己的Ajax Web應用程序

尊渡假赌尊渡假赌尊渡假赌

Mar 09, 2025 am 12:11 AM

構建您自己的Ajax Web應用程序

>因此，您可以在這裡學習所有稱為Ajax的東西。但是，到底是什麼？術語AJAX是指用於創建動態，交互式Web內容的一系列寬鬆的技術。

> Ajax一詞，最初是由Adaptive Path的Jesse James Garrett在他的論文Ajax中創造的：一種新的Web應用程序方法，是“異步JavaScript和XML”的首字母縮寫。這有點令人滿意，但是它只是描述了一種使用JavaScript來刷新頁面內容的技術，而無需重新加載整個頁面。這與更新網頁的傳統方法不同，該方法要求瀏覽器刷新整個頁面以顯示內容的任何更改。

>類似的技術已經以一種或另一種形式出現（通常是在一些聰明的駭客的幫助下實現的）。但是，在瀏覽器中XMLHTTPRequest類的可用性不斷提高，引人入勝的術語Ajax的創造以及許多高知名示例的出現，例如Google Maps，Gmail，Gmail，Backpack和Flickr，允許這些高度交互的Web應用程序開始在開發世界中獲得牽引力。由於Ajax一詞已經變得更加普遍，因此其定義已擴展為更普遍地指基於瀏覽器的應用程序，這些應用程序比老式的Web應用程序動態更具動態性。 Ajax Web應用程序的這種新作物可以更廣泛地使用互動技術，例如編輯文本，拖放和CSS動畫或過渡，以實現用戶界面內的更改。本教程將解釋這些技術，並向您展示如何開發自己的Ajax Web應用程序。

本教程是我的新書《

構建您自己的Ajax Web應用程序

的摘錄。在此處介紹的三章中，我們將討論Ajax的基礎知識，並在深入研究XMLHTTPRequest的奇妙世界之前，了解它的滴答作用。在我們玩了它，探索其內部工作，提出請求並異步更新我們的應用程序頁面之後，我們開始開發我們的第一個真實的Ajax應用程序。

>這將是一個很大的旅程，所以我希望您準備好冒險！如果您想閱讀這些章節以脫機，請下載它們的.pdf版本。但是現在，讓我們在Ajax中獲得紮實的基礎。 >第1章。 Ajax：概述

他逃脫了，白痴！派遣戰爭火箭Ajax！帶回他的身體！

- kala將軍，閃存Gordon

ajax Web應用程序 ajax可能是許多Web開發項目的絕佳解決方案 - 它可以增強Web應用程序的能力，並接管了許多以前幾乎完全被桌面應用程序所佔據的基礎。 >

>都一樣，請務必記住，Ajax不是一種魔幻的童話粉，您可以在應用程序上撒上以使其喘不過氣而涼爽。像任何其他新的開發技術一樣，Ajax並不難使用，而且唯一比可怕的，笨拙的老式Web應用程序更糟糕的是可怕的，執行不佳的Ajax Web應用程序。當您將其應用於Web應用程序的正確部分時，Ajax可以顯著增強用戶對應用程序的體驗。 Ajax可以提高應用程序的交互性和速度，最終使該應用程序更輕鬆，更有趣，並且更直觀。

>通常，Ajax應用程序被描述為“像瀏覽器中的桌面應用程序”。這是一個相當準確的描述 - Ajax Web應用程序比傳統的老式Web應用程序的響應率要高得多，並且它們可以提供類似於桌面應用程序的交互級別。

>但是AJAX Web應用程序仍然是一個遠程應用程序，並且與可以訪問本地存儲的桌面應用程序的行為不同。作為AJAX開發人員的工作的一部分是，儘管必須在應用程序和遙遠的服務器之間進行通信，但仍能響應響應且易於使用。幸運的是，Ajax工具箱為您提供了許多出色的技術來實現這一目標。

不好的過去

>超出服務簡單，靜態HTML頁面的最早轉移的Web開發任務之一是使用後端數據存儲中的數據在Web服務器上動態構建頁面的技術。回到Web開發的“舊時代”中，創建此動態，數據庫驅動的內容的唯一方法是使用CGI腳本（最有可能用PERL編寫）或某些可以解釋腳本語言（例如Microsoft的Active Server頁面）來構造服務器端的整個頁面。即使對該頁面進行一次更改也需要從瀏覽器到服務器進行往返 - 只有這樣，新內容才能顯示給用戶。 >在當時，Web應用程序的用戶界面的普通模型是用戶填寫並提交服務器的Web表單。服務器將處理提交的表單，並將一個全新的頁面發送回瀏覽器以進行顯示。因此，例如，對於每個步驟，都需要用戶提交表單，從而提示瀏覽器和服務器之間的往返。允許，這在靜態網頁上是一個巨大的進步，但與向最終用戶展示真正的“應用程序”體驗相去甚遠。

>史前Ajax

早期的Web開發人員立即開始尋找技巧來擴展基於簡單表單模型的功能，因為他們努力創建更響應和交互的Web應用程序。這些駭客雖然是臨時和原油，但是網絡開發人員邁向的第一步，我們在當今的Ajax應用程序中看到了這種交互性。但是，儘管這些技巧和解決方法經常提供可用的工作解決方案，但由此產生的代碼並不是一個漂亮的景象。

>嵌套框架

>解決整個頁面以顯示其內容的最小更改的一種方法是在其他框架集中的嵌套鏡框駭客駭客，通常是深層的幾個級別。該技術允許開發人員僅更新屏幕的選定區域，甚至可以模仿TabSyle導航接口的行為，其中用戶在屏幕的一個部分中單擊選項卡在另一個區域中更改了內容。

這項技術帶來了可怕的，無與倫比的代碼，並獲得了具有諸如EmployeedItwizardMiddleLowerRight.asp的名稱的頁面。

隱藏的iframe

>在Internet Explorer 4之類的瀏覽器中添加iframe，使事情變得不那麼痛苦。隱藏iframe的能力完全導致了另一個整潔的黑客的開發：開發人員將使用隱藏的IFRAME向服務器提出HTTP請求，然後使用JavaScript和DHTML將內容插入頁面。這提供了與現代Ajax可用的許多相同功能，包括能夠在不重新加載頁面的情況下從表單中提交數據的能力，這是通過將表單提交給隱藏的IFRAME實現的壯舉。服務器由服務器返回到iframe，頁面的JavaScript可以訪問它。

>這種方法的重大缺點（畢竟它是黑客的事實）是主文檔和iframe中的文檔之間來回傳遞數據的煩人負擔。

遠程腳本

>另一種類似Ajax的技術，通常稱為遠程腳本，涉及將<script>標記的SRC屬性設置為包含動態生成的JavaScript的加載頁面。 這具有比隱藏的iframe hack更乾淨的優點，因為在服務器上生成的JavaScript將加載到主文檔中。但是，只有使用此技術才有可能進行簡單的請求。 是什麼使Ajax Cool 這就是為什麼Ajax開發是Web開發的巨大飛躍的原因：不必以一個巨大的質量將所有內容髮送到服務器，而是等待服務器發送回新頁面以進行渲染，而是可以在較小的塊中與服務器進行通信，而是根據服務器對這些請求的響應進行選擇性地更新特定區域。這就是Ajax首字母縮寫中的單詞異步的起源。 <and>>>通過考慮相反的同步系統來理解異步系統的想法可能是最容易的。在同步系統中，一切都按順序進行。如果賽車是同步的系統，那將是一件非常乏味的事情。首先在網格上開始的汽車將是整個終點線的第一輛汽車，其次是開始第二次的汽車，依此類推。不會有超車，如果一輛汽車破裂，在機械師進行維修時，後面的交通將被迫停下來等待。 >傳統的Web應用程序使用同步系統：您必須等待服務器向您發送系統的第一頁，然後才能請求第二頁，如圖1.1所示。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029133777.png?x-oss-process=image/resize,p_40" class="lazy" alt="構建您自己的Ajax Web應用程序" > >圖1.1。傳統的Web應用程序是同步系統> >異步賽車將更加令人興奮。杆位的汽車可以在第一個拐角處取代，從電網的後部開始的汽車可以穿越田野並以第三名越過終點線。完全通過這種方式從AJAX應用程序中的瀏覽器請求HTTP請求。正是這種能力可以在需求基礎上向服務器提出許多小要求，這使Ajax開髮變得如此酷。圖1.2顯示了向Web服務器的Ajax應用程序，向Web服務器提出異步請求。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029358444.png?x-oss-process=image/resize,p_40" class="lazy" alt="構建您自己的Ajax Web應用程序" >>圖1.2。 Ajax Web應用程序是一個異步系統 > 最終結果是一個感覺更快響應的應用程序，因為用戶花費的時間大大減少等待請求處理的請求，而不必等待整個新的網頁瀏覽電線，並通過其瀏覽器對其進行啟用，然後才能查看結果。 ajax Technologies >用於構建Ajax Web應用程序的技術包含許多不同的編程域，因此Ajax開發既不像常規應用程序開發那樣簡單，也不像老式的Web開發一樣容易。另一方面，Ajax開發具有許多不同的技術的事實使它變得更加有趣和有趣。以下是合作製作AJAX Web應用程序的技術的簡要列表：<ancy>> <h5> xml w3c dom > css <ul> <li>> xmlhttprequest <li>> javascript <li> 在本章的其餘部分，我們將符合這些技術中的每一種，並討論它們在Ajax Web應用程序中扮演的角色。 <li> <li>數據交換和標記：xml> > XML（XML代表可擴展的標記語言 - 不是任何人都稱其為教科書之外的人。）Ajax是Ajax獲得字母“ X”的地方。這很幸運，因為技術縮寫詞自動認為，如果它們包含字母“ X”，它們會更酷。（是的，我在開玩笑！）>數據交換通用語言franca XML通常用作異步HTTP請求中使用的主要數據格式，該請求在AJAX應用程序中在瀏覽器和服務器之間通信。這個角色扮演了XML的優勢，作為一種中性且相當簡單的數據交換格式，也意味著如果需要，則相對容易再利用或重新格式化。當然，還有許多其他方法可以使數據格式化，以便於瀏覽器和服務器之間容易交換（例如CSV（逗號分隔值），JSON（JAVASCRIPT對象表示法）或簡單的純文本），但是XML是最常見的。 xml作為markup AJAX應用程序中的網頁由XHTML標記組成，實際上只是XML的味道。 XHTML作為HTML的繼任者，與它非常相似。任何熟悉老式HTML的開發人員都可以輕鬆地接收它，但它具有有效XML的所有好處。使用XHTML有許多優勢： >它提供了許多標準工具和腳本庫，用於查看，編輯和驗證XML。 <ul>它與較新的，XML兼容的瀏覽器是向前兼容的。它可以與HTML文檔對像模型（DOM）或XML DOM。 <li>>在非瀏覽器代理中查看更容易重新利用。 > <li> >開發界的一些更奇特的人堅持認為人們不應使用XHTML。他們非常堅信，XHTML由於它是實際的XML，因此完全不應使用XHTML，除非可以配備適當的HTTP Content-type-appplication/XHTML XML XML（文本/XML和Application/XML也可以，儘管它們的描述性較低，但目前對browserer的支持仍然有限。（Internet Explorer 6和7根本不支持它。）<li> 在實踐中，您可以使用文本/html的內容類型將XHTML提供給瀏覽器，因為所有主流瀏覽器都正確地渲染了所有XHTML文檔作為文本/HTML。儘管瀏覽器會將您的代碼視為普通的舊HTML，但其他程序仍然可以將其解釋為XML，因此沒有實際的理由不使用它來“對未來”標記。 >如果您碰巧不同意我，則可以選擇使用較舊的HTML 4.01標準來開發。這仍然是一個可行的Web標準，並且是開發Web應用程序時做出的完全合法的選擇。 <li> xhtml和這本書> >本書中的大多數代碼示例將使用XHTML 1.0嚴格。 iframe元素不在嚴格中，因此我們使用IFRAME顯示的幾個代碼示例將為XHTML 1.0過渡。 >萬維網財團維持了HTML和XHTML之間差異的常見問題。 w3c文檔對像模型文檔對像模型（DOM）是XML和HTML文檔的面向對象的表示，並提供了用於更改這些文檔的內容，結構和样式的API。最初，Netscape Navigator和Internet Explorer等特定的瀏覽器提供了不同的專有方法來使用JavaScript操縱HTML文檔。 DOM源於萬維網聯盟（W3C）為實現相同任務提供平台和瀏覽器中立的方式。 DOM代表XML或HTML文檔作為對象層次結構的結構，這是通過標準XML工具解析的理想選擇。 > DOM操縱方法 JavaScript提供了大量的API，以解析和操縱文檔來處理這些DOM結構。這是完成我們在Ajax應用程序中看到的網頁的較小，逐件更改的主要方法之一。（另一種方法是僅僅是為了更改元素的innerHTML屬性。儘管它得到了主流瀏覽器的廣泛支持，但該方法在任何標準中均未得到很好的記錄。） > dom事件 > DOM的另一個重要功能是，它為JavaScript提供了將事件附加到網頁上元素的標準手段。這使得用戶界面變得更加豐富，因為它使您可以使用戶有機會與頁面交互超越簡單的鏈接和形式元素。 > >一個很好的例子是拖放功能，該功能使用戶可以在屏幕上拖動頁面段，並將其放置到位以觸發特定的功能。這種功能曾經僅在桌面應用程序中存在，但是現在它在瀏覽器中也同樣可以，這要歸功於DOM。 演示：CSS > css（級聯樣式表）提供了一種統一的方法來控制Web應用程序中用戶界面元素的外觀。您可以使用CSS更改頁面外觀的任何方面，從字體尺寸，顏色和間距到元素的定位。 。在AJAX應用程序中，CSS的一種非常好的用途是提供用戶界面反饋（帶有CSS驅動的動畫和過渡），或指示用戶可以與用戶進行交互的部分（例如，對顏色或外觀的更改，例如，由MouseOvers觸發）。例如，您可以使用CSS過渡來表明您的應用程序的某些部分正在等待服務器上處理的HTTP請求。 > 在Ajax一詞的更廣泛定義中，<ancy> css的操縱在各種視覺過渡和效果以及拖放和地位功能中的廣泛定義。 >通信：xmlhttprequest > XMLHTTPRequest，一個具有非常易於使用的接口的JavaScript類，發送並接收到Web服務器和來自Web服務器的HTTP請求和響應。 XMLHTTPRequest類是使真正的Ajax應用程序開發成為可能的原因。用XMLHTTPRequest做出的HTTP請求就像瀏覽器正在提出加載頁面或提交表格的正常請求一樣，但無需用戶不必離開當前加載的網頁。 > Microsoft在Internet Explorer 5中首次在Windows中實現了XMLHTTPRequest作為ActiveX對象。 Mozilla項目在Mozilla瀏覽器中提供了一個JavaScript-native版本，從1.0版開始。（當然也可以在Firefox中使用。）Apple自版本1.2以來已將XMLHTTPRequest添加到Safari中。 可以將服務器的響應（XML文檔或文本字符串）傳遞給JavaScript以使用開發人員認為合適的情況 - 通常以更新Web應用程序的某些用戶界面。 將所有內容放在一起： JavaScript是將您的Ajax應用程序固定在一起的膠水。它在Ajax開發中扮演多個角色： 控制使用xmlhttprequest 提出的HTTP請求根據使用的數據交換格式，使用DOM操縱方法，XSLT或自定義方法來解析從服務器返回的結果，通過使用DOM操作方法，通過更新元素的InnerHTML屬性或通過更改元素的CSS屬性<ancon <>>來插入內容，通過使用DOM操縱方法在用戶界面中顯示所得數據 由於其在輕型網絡編程中的悠久歷史（並且在沒有經驗的程序員手中）中，許多傳統的應用程序開發人員並未將JavaScript視為一種“嚴肅的編程語言”，儘管實際上，實際上，它是一種能夠支持的，具有支持的對象的編程方法。隨著Ajax開發技術擴大基於瀏覽器的應用程序的功能和功能，對JavaScript作為“玩具語言”的誤解現在正在迅速變化。由於Ajax的出現，JavaScript現在似乎正在進行文藝復興時期，並且可用於Ajax開發的JavaScript工具包和庫的爆炸性增長是事實證明。<h5>摘要在本章中，我們對Ajax和使其打勾的技術進行了快速概述。我們研究了開發人員在過去的糟糕時代必須忍受的一些可怕的編碼扭曲，以創建類似於交互式UI的東西，我們看到了Ajax如何對這些方法提供了巨大的改進。通過對Ajax的構建塊的不錯命令 - XML，DOM，CSS，XMLHTTPREQUEST和JAVASCRIPT，它們將它們全部聯繫在一起 - 您擁有開始構建動態且可訪問的Ajax站點所需的一切。 >第2章。基本XMLHTTPREQUEST <h5>>我迫不及待地想分享這個新的奇蹟，人們都會看到它的光，讓他們都做自己的音樂，牧師在今晚讚美我的名字。 > <q> - 匆忙，發現> >是XMLHTTPRequest賦予Ajax的真實力量：從瀏覽器中發出異步HTTP請求並在小塊中提取內容的能力。 > Web開發人員長期以來一直在使用技巧和駭客來實現這一目標，而遭受了令人討厭的限制：無形的iframe hack迫使我們在iframe中的父文檔和文檔之間來回傳遞數據，甚至“遠程腳本”方法也僅限於為包含JavaScript的頁面提出的請求。使用xmlhttprequest的現代AJAX技術，對這些Kludgy方法提供了巨大的改進，從而使您的應用程序可以同時發布和發布請求，而無需完全重新加載頁面。在本章中，我們將直接加入並構建一個簡單的AJAX Web應用程序 - 一個簡單的站點監控應用程序，將Web服務器上的頁面貼在時間表上。但是，在我們開始對服務器進行異步HTTP請求進行輪詢之前，我們需要通過照顧所有小瀏覽器不兼容來簡化XMLHTTPREQUEST類的使用，例如XMLHTTTPRequest對象的不同方式，可以在單一的，可重複使用的代碼庫中實例化。 一個簡單的ajax庫 >簡化XMLHTTPREQUEST類的使用的一種方法是使用現有的代碼庫。由於Ajax開發的普及程度越來越高，實際上有數十個庫，工具包和框架可使XMLHTTPRequest更易於使用。 > 但是，由於創建xmlhttprequest類實例的代碼非常簡單，而且使用它的API易於理解，我們只需編寫一個非常簡單的JavaScript庫，該庫照顧我們需要的基本內容。 >逐步完成創建自己的庫的過程將確保您知道XMLHTTPRequest類的工作方式，並在您決定使用它們時可以幫助您從其他工具包或庫中獲得更多。 開始我們的Ajax類<h5> 我們將首先創建一個名為AJAX的基本類，其中我們將包裝XMLHTTPREQUEST類的功能。 >我從未在JavaScript中完成面向對象的編程 - help！在本節中，我們將開始在JavaScript中創建類和對象。如果您以前從未做過此事，請不要擔心 - 只要您知道面向對象的編程的基礎知識，那就很簡單了。 > 在JavaScript中，我們不會像在Java，C或.NET語言之一中那樣聲明具有復雜語法的類；我們只是編寫一個構造函數函數來創建類的實例。我們要做的就是： 提供構造函數函數 - 此功能的名稱是您類的名稱 >將屬性添加到使用此關鍵字構建的對像中，然後是一個時期和屬性的名稱<and>>的名稱使用JavaScript的特殊函數構造函數<antax<ul> <li> 這是創建一個簡單類的代碼，稱為helloworld：<li> JavaScript的面向對象編程的框架非常輕巧，但是一旦您掌握了它，功能就出乎意料。 JavaScript中沒有更高級面向對象的功能，例如繼承和多態性，但是在Ajax應用程序中，客戶端很少需要這些功能。這些功能對這些功能有用的複雜業務邏輯應始終在Web服務器上，並使用XMLHTTPREQUEST類訪問。 <li>> 在此示例中，我們創建了一個名為Helloworld的類，帶有一個屬性（消息）和一種方法（Saymessage）。要使用此類，我們只需調用構造函數函數，如下所示：> >在這裡，我們創建一個Helloworld的實例（稱為HW），然後使用此對象顯示兩個消息。我們第一次稱呼Saymessage，默認為“你好，世界！”顯示消息。然後，在將對象的消息屬性更改為“再見”之後，我們稱Saymessage和“再見”。 <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }>不用擔心這是否目前沒有太多意義。隨著我們通過Ajax班的建立，它將變得更加清晰。 這是我們Ajax類的構造函數函數的開始：<ancy> 此代碼只是定義了我們在AJAX類中需要的屬性，以便與XMLHTTPRequest對像一起使用。現在，讓我們向對象添加一些方法。我們需要一些可以設置XMLHTTPRequest對象的功能，並告訴它如何為我們提出請求。 > <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();創建一個XMLHTTPREQUEST對象>首先，我們將添加一個初始化方法，該方法將為我們創建XMLHTTPRequest對象。 Unfortunately, XMLHttpRequest is implemented slightly differently in Firefox (in this book, whenever I explain how something works in Firefox, I’m referring to all Mozilla-based browsers, including Firefox, Mozilla, Camino, and SeaMonkey), Safari, and Opera than it was in Internet Explorer’s original implementation (interestingly, Internet Explorer version 7 now supports the same interface as Firefox, which promises為了簡化未來的AJAX開發），因此，如果您不針對特定的瀏覽器，則必須嘗試以多種不同方式實例化對象。 Firefox和Safari使用名為XMLHTTPREQUEST的類創建XMLHTTPRequest對象，而Internet Explorer版本6及更早使用了一個名為ActiveXobject的特殊類，該類別內置在Microsoft的腳本引擎中。儘管這些類具有不同的構造函數，但它們的行為方式相同。 > >跨瀏覽器代碼幸運的是，大多數現代瀏覽器（Internet Explorer 6，Firefox 1.0，Safari 1.2和Opera 8或以後的任何這些瀏覽器的版本）總體上遵守網絡標準，因此您不必在Ajax Code中進行很多瀏覽器特定於瀏覽器的分支。 >>>>>>>>>>>>>>>>>>>>>>>>>>>>。這通常使基於瀏覽器的AJAX應用程序比桌面應用程序更快地開發和部署跨平台。隨著AJAX應用程序可用的功率和功能的增加，桌面應用程序從用戶界面的角度提供了更少的優勢。 INIT方法看起來像這樣： <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }INIT方法通過創建XMLHTTPREQUEST對象的每種可能方法，直到成功創建一個對象為止。然後將此對象返回到調用函數。 >優雅地降解 >保持與較舊瀏覽器的兼容性（“較舊”是指比上一張註釋中提到的“現代瀏覽器”更年長的任何東西）需要大量額外的代碼工作，因此定義哪個瀏覽您的應用程序應支持。 您知道您的應用程序將通過不支持XMLHTMLREQUEST類的較舊瀏覽器接收大量流量（例如，Internet Explorer 4及更早的Netscape 4及更早），您將需要完全遺漏它，或者編寫代碼，以使其優雅地降低。這意味著，您不必在功能較低的瀏覽器中消失功能，而是代碼以確保這些瀏覽器的用戶會收到功能上等效的內容，儘管也許以較低的交互式或易於使用的格式。 > >您的網站也可能會吸引使用JavaScript禁用的用戶。如果您想迎合這些用戶，則應默認提供替代的老式接口，然後可以使用JavaScript（使用JavaScript）對現代瀏覽器進行修改。 > 發送請求 >我們現在有了一種創建XMLHTTPRequest的方法。因此，讓我們寫一個用它來提出請求的函數。我們啟動這樣的doreq方法： <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } doreq Call init的第一部分創建XMLHTTPREQUEST類的實例，並在不成功的情況下顯示快速警報。 > 設置請求 接下來，我們的代碼在this.req上調用打開方法 - 我們的新實例xmlhttprequest類 - 開始設置http請求：<anttp> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();開放方法採用三個參數： 1。方法 - 此參數標識我們將使用的HTTP請求方法的類型。最常用的方法是獲取和發布。 > 方法是案例敏感 根據HTTP規範（RFC 2616），這些請求方法的名稱對病例敏感。而且，由於規格中描述的方法被定義為所有大寫，因此您應始終確保在所有大寫字母中鍵入該方法。 2。 URL - 此參數標識要請求的頁面（或發佈到該方法已發布的情況下）。 > 越過域 >普通瀏覽器安全設置將不允許您將HTTP請求發送到另一個域。例如，除非用戶允許使用此類請求，否則Ajax.net提供的頁面將無法發送請求。。 3。異步標誌 - 如果將此參數設置為true，則在等待對請求的響應時，您的JavaScript將繼續正常執行。隨著請求狀態的變化，事件被解僱，以便您可以處理不斷變化的請求狀態。 <ancy>> 如果將參數設置為false，則JavaScript執行將停止，直到響應從服務器返回為止。這種方法具有比使用回調功能更簡單的優點，因為您可以在代碼中發送請求後直接處理響應，但最大的缺點是，當您的代碼在服務器上發送和處理時，您的代碼暫停，並且收到了響應。由於與服務器異步通信的能力是AJAX應用程序的全部點，因此應將其設置為true。在我們的Ajax類中，將方法和異步屬性初始化為合理的默認值（獲取和true），但是您始終必須設置目標URL。 >設置onreadyStateChange事件處理程序 >在服務器上處理HTTP請求時，其進度由ReadyState屬性的更改表示。該屬性是一個代表以下狀態之一的整數，從請求開始到其完成為順序列出： <ul> <li> 0：尚未調用非初始化 - 尚未打開。 > <li>1：加載 - 尚未調用發送。 > <li>2：已加載 - 已調用已打電話，但尚無響應。 > <li>3：交互式 - 響應正在下載，並且響應the ResponseText屬性包含部分數據。 <li>4：完成 - 已加載響應並完成了請求。 > XMLHTTPRequest對象通過觸發ReadyStateChange事件來告訴您狀態中的每個更改。在此事件的處理程序中，請檢查請求的準備狀態，以及請求完成（即，當ReadyState更改為4時），您可以處理服務器的響應。 <ante>> 我們的Ajax代碼的基本輪廓看起來像這樣：<ancy>> >我們將稍微討論如何“做一些事情來處理響應”。目前，請記住，您需要在發送請求之前設置此事件處理程序。 > <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }發送請求 使用xmlhttprequest類的發送方法開始http請求，就像：> 發送方法採用一個參數，該參數用於發布數據。當請求是一個簡單的獲取時，它不會將任何數據傳遞給服務器，例如我們當前的請求，我們將此參數設置為null。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();> 失去範圍，這 >您可能已經註意到，onreadystatechange包含一個怪異的變量分配： > 這個新變量自我是解決一種稱為“範圍丟失”的問題的解決方案，該問題通常是使用異步事件處理程序的JavaScript開發人員經歷的。異步事件處理程序通常與xmlhttprequest結合使用，以及諸如Settimeout或setInterval之類的函數。 <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }> >該關鍵字在面向對象的JavaScript代碼中用作速記，以參考“當前對象”。這是一個快速示例 - 一個稱為scopetest的課程： 此代碼將創建一個scopetest類的實例，然後調用該對象的dotest方法，該方法將顯示“來自scopetest的問候！”的消息。簡單，對嗎？ <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; 現在，讓我們將一些簡單的XMLHTTPRequest代碼添加到我們的scopetest類中。我們將向您的Web服務器主頁發送簡單的獲取請求，當收到響應時，我們將顯示this.message和self.message的內容。 >那麼，顯示什麼消息？答案如圖2.1。 >我們可以看到self.message是我們期望的問候信息，但是這是怎麼回事。使用關鍵字這是一種引用“執行此代碼的對象”的便捷方法。但這有一個小問題 - 當對像外部調用它時，其含義會改變。這是所謂的執行上下文的結果。對象內部的所有代碼均在相同的執行上下文中運行，但是從其他對象（例如事件處理程序）運行的代碼在調用對象的執行上下文中運行。這意味著，當您編寫面向對象的JavaScript時，您將無法使用此關鍵字來引用事件處理程序代碼中的對象（例如上面的onreadyStateChange）。這個問題稱為範圍的丟失。 如果您還沒有100％清楚這個概念，請不要為此擔心太多。我們將在下一章中看到此問題的實際演示。同時，請記住，如果您在代碼示例中看到變量自我，則包括解決損失問題的問題。 圖2.1。 Scopetest類顯示的消息<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029554646.png?x-oss-process=image/resize,p_40" class="lazy" alt="構建您自己的Ajax Web應用程序" > 處理響應 >現在，我們準備編寫一些代碼來處理服務器對HTTP請求的響應。還記得我們在ReadyStateChange事件處理程序中留下的“做事要處理響應”的評論嗎？我們將是時候編寫一些代碼來做這些事情了！該功能需要做三件事： 弄清楚響應是否是錯誤。 以所需的格式準備響應。 <ol>> <li>傳遞對所需處理程序函數的響應。 <li>在我們的ajax類的內部功能中包括以下代碼：<ancy>> >響應完成後，指示請求是否在我們的XMLHTTPRequest對象的狀態屬性中返回的代碼。狀態屬性包含已完成請求的HTTP狀態代碼。如果丟失了請求的頁面，則可以是代碼404，如果服務器端腳本中發生錯誤，則為500，如果請求成功，則為200，依此類推。 HTTP規範（RFC 2616）中提供了這些代碼的完整列表。 <li>> 數字沒有好處嗎？ >如果您在記住代碼時遇到困難，請不用擔心：您可以使用statustext屬性，其中包含一條簡短的消息，該消息告訴您有關錯誤的更多詳細信息（例如，“找不到”，“內部服務器錯誤”，“ OK”）。 >我們的AJAX類將能夠以三種不同的格式提供服務器的響應：作為普通的JavaScript字符串，作為可通過W3C XML DOM訪問的XML文檔對象，以及作為用於提出請求的實際XMLHTTPRequest對象。這些由Ajax類的ResponseFormat屬性控制，可以將其設置為text，xml或對象。 <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }>可以通過我們的xmlhttprequest對象的兩個屬性訪問響應的內容：<ancy>> <ul>ponsponseText - 此屬性包含服務器作為普通字符串的響應。在錯誤的情況下，它將包含Web服務器的錯誤頁面HTML。只要返迴響應（即ReadyState變為4），該屬性將包含數據，儘管可能不是您期望的。 <li> 響應XML - 此屬性包含XML文檔對象。如果響應不是XML，則此屬性將為空。 <li> >我們的AJAX類將其響應式屬性初始化為文本，因此默認情況下，您的響應處理程序將以JavaScript字符串從服務器傳遞。如果您使用XML內容，則可以將ResponseFormat屬性更改為XML，該屬性將取消XML文檔對象。 >如果您想獲得真正的幻想，您還可以使用一個選項：您可以將實際的xmlhttprequest對象本身返回到處理程序功能。這使您可以直接訪問狀態和Statustext屬性之類的內容，並且在您想以不同的方式對待特定類別的錯誤類別的情況下可能很有用 - 例如，在404個錯誤的情況下完成額外的登錄。設置正確的內容類型 在所有主要瀏覽器中XMLHTTPRequest的實現要求正確設置HTTP響應的內容類型，以便將響應作為XML處理。形式良好的XML，帶有內容類型的文本/XML（或Application/XML，甚至Application/XHTML XML），將正確填充XMLHTTTPRequest對象的響應XML屬性；非XML內容類型將導致該屬性的null值或未定義的值。 > 但是，Firefox，Safari和Internet Explorer 7為XML文檔上的XMLHTTPREQUEST提供了一種方法：XMLHTTTPREQUEST類的超電子方法。我們簡單的Ajax類用SetMimetype方法插入其中：<ancy>> 此方法設置了MimeType屬性。然後，在我們的doreq方法中，我們只需在嘗試...捕獲塊中調用過度iMimetype，例如： 在您無法控制Web應用程序的前端和後端的環境中，能夠覆蓋不合作服務器的內容類型標頭可能非常重要。尤其如此，因為當今許多應用程序訪問服務和內容來自許多不同的域或來源。但是，由於該技術在Internet Explorer 6或Opera 8中無法使用，因此您可能不會發現它適合於您的應用程序中使用。 <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }> 響應處理程序根據HTTP 1.1規範，具有200至299之間的代碼的任何響應是成功的響應。 <ancy>>我們已定義了對狀態屬性的OnreadyStateChange事件處理程序，以獲取響應的狀態。如果代碼在成功響應的正確範圍內，則現有的Statechange事件處理程序將響應傳遞到響應處理程序方法（由HandlerESP屬性設置）。 > 當然，響應處理程序將需要知道響應是什麼，因此我們將其作為參數傳遞。當我們談論doget方法時，我們將在稍後看到此過程。 > 由於處理程序方法是用戶定義的，因此代碼還進行粗略檢查，以確保在嘗試執行該方法之前已正確設置該方法。 >錯誤處理程序 >如果狀態屬性指示請求有錯誤（即，它在200至299代碼範圍之內），則服務器的響應將傳遞給Handleerr屬性中的錯誤處理程序。我們的Ajax類已經為錯誤處理程序定義了合理的默認值，因此我們不必在調用它之前確定它是定義的。 > handleerr屬性指向看起來像這樣的函數：> <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }此方法檢查以確保彈出窗口未被阻止，然後嘗試在新的瀏覽器窗口中顯示服務器錯誤頁面內容的全文。此代碼使用嘗試...捕獲塊，因此，如果用戶已阻止彈出窗口，我們可以向他們展示錯誤消息的剪切版本，並告訴他們如何訪問更詳細的錯誤消息。 > >這對於初學者來說是一個不錯的默認值，儘管您可能希望向最終用戶顯示更少的信息 - 這完全取決於您的偏執狂。如果您想使用自己的自定義錯誤處理程序，則可以使用Sethandlererr，這樣：<and>> 或一個真正的處理程序<pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); >您可能需要使用單個函數來處理成功的響應和錯誤。 Sethandlerboth是我們Ajax班上一種便利方法，為我們很容易地為我們設定了這一點：> 任何作為參數傳遞給sethandlerboth的函數都將處理成功的響應和錯誤。 <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } 此設置可能對將類的ResponseFormat屬性設置為對象的用戶可能很有用，這將導致用於提出請求的XMLHTTPREQUEST對象，而不僅僅是響應the ResponseText或Responsexml屬性的值 - 將傳遞給響應處理程序。 中止請求 >有時候，從自己的經驗中您會知道的，網頁將需要很長時間才能加載。您的Web瀏覽器具有停止按鈕，但是您的Ajax類呢？這是流產方法發揮作用的地方：<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } 此方法將onreadystate事件處理程序更改為一個空函數，調用XMLHTTPRequest類實例上的中止方法，然後摧毀您創建的實例。這樣，為中止請求設置的任何屬性都是重置的。下次提出請求時，將調用初始化方法，並將這些屬性重新初始化。 > >那麼，為什麼我們需要更改現有的事件處理程序？ XMLHTTPREQUEST的許多實現一旦被稱為中止，將解僱該請求狀態已更改。更糟糕的是，這些事件以4的準備狀態結束，這表明一切都按預期完成（部分是事實，如果您考慮的話：一旦我們稱墮胎，一切都應該停下來，我們的實例XMLHTTTPRequest應該準備好發送另一個請求，如果我們希望我們希望發送另一個請求）。顯然，我們不希望流產請求時調用我們的響應處理程序，因此我們在呼叫流產之前刪除了現有處理程序。 > >將其包裝 給出了我們到目前為止的代碼，Ajax類只需要兩件事就可以提出請求： <ul> <li>目標URL <li>響應的處理程序函數 >讓我們提供一種稱為doget的方法來設置這兩個屬性，然後啟動請求：<ancy>> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();>您會注意到，連同兩個預期參數URL和手一起，該函數具有第三個參數：格式。這是一個可選的參數，允許我們更改傳遞給處理程序功能的服務器響應的格式。 如果我們不傳遞格式的值，則AJAX類的響應Format屬性將默認為文本值，這意味著您的處理程序將通過ResponseText屬性的值傳遞。相反，您可以將XML或對像作為格式傳遞，該格式將將要傳遞給響應處理程序的參數轉換為XML DOM或XMLHTTTPREQUEST對象。 <ancy>> >>示例：簡單的測試頁> >終於該將我們學到的一切都放在一起了！讓我們創建一個Ajax類的實例，然後使用它發送請求並處理響應。 <ancly>> >現在，我們的類的代碼位於一個名為ajax.js的文件中，我們想要使用AJAX類的任何網頁都需要將AJAX代碼包含在<script type =“ text/javascript” src =“ ajax.js”>上。一旦我們的頁面訪問了AJAX代碼，我們就可以創建一個Ajax對象。 <anj>> 這個腳本為我們提供了Ajax類的閃亮新實例。現在，讓它做一些有用的事情。 > 為了通過我們的Ajax類提出最基本的請求，我們可以做類似的事情：<pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }><pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } >這將創建我們的AJAX類的實例，該實例將使一個簡單的獲取請求到一個名為Fakeserver.php的頁面，並將結果作為文本傳遞給手函數。如果fakeserver.php返回了您要使用的XML文檔，則可以這樣做：> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); >在這種情況下，您將要絕對確定somepage.php確實提供有效的XML，並且其內容類型的HTTP響應標頭設置為text/xml（或其他合適的東西）。 > 創建頁面 >現在我們已經創建了Ajax對象，並為請求設置了一個簡單的處理程序函數，現在該將代碼付諸實踐了。 > 偽造的服務器頁面 >在上面的代碼中，您可以看到請求的目標URL設置為稱為fakeserver.php的頁面。要使用此演示代碼，您需要從同一啟用PHP的Web服務器中使用Ajaxtest.html和Fakeserver.php。您也可以使用一些簡單的ASP從IIS Web服務器執行此操作。偽造的服務器頁面是一個超簡單的頁面，使用下面的PHP代碼模擬Web服務器的不同響應時間： <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } 這就是代碼的所有這些小塊：它等待三到12秒之間，然後打印正常。 fakeserver.php代碼設置了對文本/平原的響應的內容類型標題。根據您傳遞的頁面內容的不同，您可以選擇另一種內容類型來響應。例如，如果您將XML文檔傳遞回呼叫者，則自然需要使用文本/XML。 >在ASP中，這在ASP中也同樣有效，儘管某些功能（例如睡眠）並不容易可用，如下面的代碼所示：： >在本書中，我們所有的服務器端示例都將用PHP編寫，儘管它們很容易用ASP，ASP.NET，Java，Perl或幾乎任何可以通過Web服務器提供內容提供內容的語言。 <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; };使用setMimetype方法 想像您有一個響應，您知道包含一個有效的XML文檔，您想將其作為XML解析，但服務器堅持將其作為文本/平原提供給您。您可以通過在setMimeType中添加額外的呼叫來強制將該響應解析為XML，例如：> >自然，只有在確定服務器的響應有效XML時，才應該使用此方法，並且可以確保瀏覽器是Firefox或Safari。擊中頁面<pre class="brush:php;toolbar:false">Example 2.3. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } }; 現在是真理的時刻！點擊本地Web服務器，加載ajaxtest.html，然後查看您獲得的內容。如果一切正常工作，將會有一些片刻的延遲，然後您會看到標準的JavaScript警報，如圖2.2中的標準警報，簡單地說。 圖2.2。確認您的Ajax類正在按預期工作>現在一切都很好，我們的Ajax類正常運行，是時候轉到下一步了。 >示例：一個簡單的ajax應用<h5> 好吧，因此，使用Ajax的出色力量來產生一個小小的JavaScript警報框，該盒子讀出“ OK”可能並不是您購買這本書時所想的。讓我們對我們的示例代碼進行一些更改，以使此XMLHTTPRequest的內容更有用。同時，我們將創建本章開始時提到的簡單監視應用程序。該應用程序將ping網站並報告返迴響應所需的時間。 > 奠定基礎 我們將從一個簡單的HTML文檔開始，該文檔鏈接到兩個JavaScript文件：包含我們庫的Ajax.js和AppMonitor1.js，該文件將包含我們應用程序的代碼。 > <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }>您會注意到頁面正文中幾乎沒有內容 - 只有一個DIV元素。這是依賴Ajax函數的Web應用程序的典型特徵。通常，Ajax應用程序的大部分內容都是由JavaScript動態創建的，因此我們通常在頁面源的主體中看到的標記要比在服務器生成的所有內容的非AJAX Web應用程序中要少得多。但是，如果Ajax不是應用程序中絕對重要的一部分，則應提供該應用程序的普通HTML版本。 >我們將使用一些簡單的內容開始我們的AppMonitor1.js文件，這些內容可利用我們的Ajax類： >我們將使用start變量記錄每個請求啟動的時間 - 該數字將用於計算每個請求的時間。我們使啟動一個全局變量，以便我們不必使用Ajax類的作品使用額外的計時請求代碼 - 我們可以在呼叫到Ajax對象之前和之後立即設置“啟動”的值。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();> ajax變量僅容納我們的ajax類的實例。 > <ancly>使用AJAX類，摻雜函數實際上是HTTP請求。您應該從我們的原始測試頁面中識別對Doget方法的呼叫。 請注意，我們已將其作為參數的啟動值添加到目標URL中。實際上，我們不會在服務器上使用此值；我們只是將其用作隨機價值來處理Internet Explorer的過度狂熱緩存。即緩存所有使用XMLHTTPRequest提出的請求，並且禁用“功能”的一種方法是將隨機值附加到查詢字符串中。啟動中的毫秒值可以將其作為隨機值加倍。這種方法的一種替代方法是使用XMLHTTTPRequest類的SetRequestHeader方法在請求下設置IF-MODIFIED-SINCE標頭。 > >最後，我們通過將多餘的雜音插入窗口。 >用Showpoll 處理結果我們傳遞給Doget的第二個參數告訴Ajax類，以傳遞對函數ShowPoll的響應。這是該功能的代碼： <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }這很簡單：該功能期望一個參數，如果一切按預期進行，則應該是從fakeserver.php返回的字符串OK。如果響應是正確的，則代碼會執行弄清楚響應的時間並創建包含結果的消息所需的快速計算。它將該消息傳遞給Pollresult以進行顯示。 > 在這個非常簡單的實現中，除了預期響應以外的任何其他事物都會導致相當簡短且無助的消息：請求失敗。當我們在下一章中升級此應用程序時，我們將使錯誤條件的處理更加牢固。 設置了Pollresult後，它將傳遞給Printresult函數：<ancy>> printresult函數顯示頁面內部showpoll發送的消息。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();請注意上面代碼中的測試，該測試用於查看我們的DIV是否具有任何子節點。這檢查是否存在任何文本節點，其中可能包括我們在以前的迭代中添加到此div的文本，或者在頁面標記中包含的文本中包含的文本，然後將其刪除。如果您不刪除現有的文本節點，則代碼將作為新的文本節點將新結果簡單地附加到頁面上：您將顯示一連串的文本字符串，並不斷地將更多的文本附加到。 為什麼不使用innerhtml？ >您可以簡單地更新DIV的InnerHTML屬性，例如：> > InnerHTML屬性不是Web標準，而是所有主要瀏覽器都支持它。而且，您可以從這一事實中看到它是一行代碼（與DOM方法所需的四行相比），有時比DOM方法更容易使用。在您的頁面上顯示內容的兩種方式本質上都更好。 > 在某些情況下，您最終可能會根據這兩種方法的渲染速度差異選擇一種方法（InnerHTML可以比DOM方法更快）。在其他情況下，您可能會根據規範的清晰度甚至個人品味來確定決定。 <and>> ><pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }>重新開始過程 >最後，Showpoll通過使用SettiMeout在15秒內將調用在15秒內安排到原始的摻雜函數來開始整個過程，如下所示： 代碼不斷調用二極管函數的事實意味著，一旦頁面加載，http請求http請求進行輪詢fakeserver.php頁面將繼續這樣做，直到該頁面關閉為止。 PollHand變量是允許您跟踪待處理操作的間隔ID，並使用ClearTimeOut取消它。 > settimeout調用的第一個參數dopoll是指向應用程序的主要功能的指針。第二個表示必須在請求之間經過的時間長度。 完整的示例代碼 >這是我們第一次試用的所有代碼，並使用此簡單監視應用程序。 在遵循良好軟件工程原則的競標中 >我將使用本書的所有示例代碼遵循類似的方法，將每個示例的標記，JavaScript代碼和CSS分為單獨的文件。這個小小的監視應用程序是如此基礎，以至於沒有CSS文件。我們將添加一些樣式，以使其在下一章中看起來更好。 <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }> >運行應用程序 >嘗試將頁面加載到瀏覽器中。將其放入您的Web服務器的根目錄中，然後在瀏覽器中打開頁面。 > >如果Fakeserver.php頁面正確響應，您會看到類似於圖2.3. 所示的顯示。 圖2.3。運行簡單的監視應用程序<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029764092.png?x-oss-process=image/resize,p_40" class="lazy" alt="構建您自己的Ajax Web應用程序" > 進一步閱讀 以下是一些在線資源，可以幫助您更多地了解本章中有關技術和概念的更多信息。 > <h5>> javascript的對像模型 http://docs.sun.com/source/816-6409-10/Obj.htm http://docs.sun.com/source/816-6409-10/Obj2.htm <ul> <li> >查看由Sun Microsystems託管的JavaScript版本1.3的客戶端JavaScript指南中的對象的這兩章。第一章說明了您需要了解如何與JavaScript中對像一起工作的所有基本概念。第二個關於JavaScript的基於原型的繼承模型的深度，使您可以使用JavaScript利用更多面向對象的編碼的功能。 <li>> 這是用JavaScript對象創建私有實例變量的簡要介紹。它將幫助您更深入地了解JavaScript基於原型的繼承方案。 xmlhttpRequest >這是Apple Developer Connection的好參考頁面。它提供了XMLHTTPRequest類的不錯概述，以及其方法和屬性的參考表。 本文最初發佈於2002年，繼續使用新信息進行更新。它包括有關提出頭部請求的信息（而不是僅僅是獲取或發布），以及JavaScript對象符號（JSON）和SOAP。 這是Xulplanet在Firefox中實現XMLHTTPREQUEST上的詳盡參考。這是另一個不錯的概述，它還顯示了XMLHTTPREQUEST對象的一些較少使用的方法，例如OverRideMeType，SetRequestHeader和GetResponseheader。同樣，此參考的重點是在Firefox中實施。 >這是Microsoft在MSDN上實現XMLHTTPREQUEST的文檔。摘要<h5> <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } <ul>>系統管理員配置輪詢間隔和超時閾值之間的間隔 <li>啟動和停止監視過程的簡便方法 <li>>先前請求的響應時間的條形圖；歷史記錄列表中的條目數將是用戶配置的 <li>>用戶通知應用程序正在進行請求> <li>優雅地處理請求超時 <li> 圖3.1顯示了運行應用程序完成所有增強功能後的外觀。 此應用程序的代碼分為三個文件：AppMonitor2.html中的標記，AppMonitor2.js中的JavaScript代碼以及AppMonitor2.CSS中的樣式。首先，我們將將所有必需的文件鏈接到AppMonitor2.html：<anty>> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); 圖3.1。運行應用程序<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029861987.png?x-oss-process=image/resize,p_40" class="lazy" alt="構建您自己的Ajax Web應用程序" > 組織代碼 >所有這些新功能將為我們的應用增添更多的複雜性，因此這是在我們的代碼中建立某種組織的好時機（比將所有內容保留在全球範圍中的選擇要好得多）。畢竟，我們正在構建一個功能齊全的AJAX應用程序，因此我們希望將其井井有條。 <h5>>我們將使用面向對象的設計原理來組織我們的應用程序。當然，我們將從為我們的應用程序創建基類-Monitor類別。通常，我們會在這樣的JavaScript中創建一個類：> 這是一個不錯的普通構造函數，我們可以輕鬆地使用它來創建一個監視器類（或者如果我們願意的話，則可以使用其中一組）。 > settimeout <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } 失去範圍不幸的是，在我們的應用程序的情況下，事情並不那麼容易。我們將在我們的應用中使用大量調用settimeout（以及setInterval），因此創建JavaScript類的正常方法可能會證明我們的Monitor類可能很麻煩。 settimeout函數非常方便延遲執行一件代碼，但是它具有嚴重的缺點：它在執行上下文中運行該代碼與對像不同的代碼。（在上一章中，我們談論了這個問題，稱為範圍丟失。） 這是一個問題，因為對象關鍵字在新的執行上下文中具有新的含義。因此，當您在班上使用它時，它會突然出現失憶症 - 它不知道它是什麼！ 這可能很難理解。讓我們快速演示，以便您實際上可以看到這種煩惱。您可能還記得我們在上一章中查看的scopetest課。首先，這是一個簡單的類，帶有一個屬性和一種方法：<ancy><pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } 此代碼的結果是可預測的JavaScript警報框，其中包含文本“來自Scopetest的問候！” >讓我們更改Dotest方法，以便它使用SettiMeout在一秒鐘的時間內顯示消息。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); >而不是我們的問候消息，而是該版本的代碼產生的警報框將讀取“未定義”。因為我們使用settimeout致電Ontimeout，所以OnTimeout在新的執行上下文中運行。在該執行上下文中，這不再是指scopetest的實例，因此，此。解決這個範圍丟失問題的最簡單方法是使監視器類成為一種特殊的類，稱為單身人士。 帶有JavaScript的單例> >“單身”之所以稱之為“單身人士”，是因為該類的“單個”實例在任何時候都存在。讓課上的單身人士非常容易： 使用關鍵字新功能創建一個“單發”構造函數。它創建了一個scopetest的實例，並且已經完成：您無法使用它來創建更多scopetest對象。 <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }> 要調用此單元對象的dotest方法，您必須使用類的實際名稱（因為只有一個實例）： 一切都很好，但是我們還沒有解決我們失去範圍問題的問題。如果您現在嘗試使用代碼，則會收到以前看到的“未定義”消息，因為這並不是指scopetest實例。但是，使用單例為我們提供了解決問題的簡便方法。我們要做的就是使用對象的實際名稱 - 而不是關鍵字 - intimeout：<antimeout：<antimeout：<ancy> <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; >只有一個scopetest的實例，我們正在使用其實際名稱而不是這個實例，因此在這裡引用哪個scopetest實例沒有混淆。 > <pre class="brush:php;toolbar:false">Example 2.3. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } };>執行此代碼時，您會看到“來自Scopetest的問候！”的預期價值。在JavaScript警報框中。 >現在，我厭倦了整個對象代碼中使用實際對象名稱，並且我喜歡在可能的地方使用類似的捷徑關鍵字。因此，通常我會創建一個可以代替此的變量自我，並將其指向每個方法頂部的對象名稱，例如：> >這看起來像這樣的方法有點愚蠢，但是在較長的代碼中，很高興擁有類似於此的速記解決方案，您可以使用該解決方案來引用您的對象。我使用自我，但是如果您願意，您可以使用我，或者嘿，或者Darthvader。 <pre class="brush:php;toolbar:false">Example 2.4. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } this.req.open(this.method, this.url, this.async); };創建監視器對象 >現在我們有了一個代碼組織的計劃，該計劃將解決SettieMout的責任丟失問題，現在該創建我們的基本監視器類別了：<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } >將作為班級初始化的一部分初始化的前四個屬性，Targeturl，Pollinterval，MaxPollentries和TimeOutThreshold。他們將採用應用程序配置中定義的值，我們將在下一節中查看。這是對其他屬性的簡短摘要： <anj> ajax - 我們的AJAX類的實例，該類別向我們正在監視的服務器提供HTTP請求。 <ancy>> <ul>開始 - 用於記錄發送最後一個請求的時間。 <li>> PollArray - 保留服務器響應時間的數組；常數max_poll_entries確定此數組中保存的項目數。 <li>> POLLHAND，TIMEOUTHAND - SETTIMEOUT返回的間隔ID呼叫兩個不同的進程 - 主要的輪詢過程和超時觀察器，該暫停觀察器控制每個請求的用戶定義超時期。 > <li>> reqstatus - 用於在請求進行時通知用戶的狀態動畫。實現這一目標的代碼非常複雜，因此我們將編寫另一個Singleton課程來照顧它。 reqstatus屬性指向該類的單個實例。 > <li> >配置和初始化我們的應用程序<li> >查看此應用程序的網站管理員可能會認為它很酷，但是他或她想要的第一件事是一種配置應用程序的輪詢間隔的簡便方法，或者在應用程序在其監視網站上提供的請求之間的時間。使用全局常數配置輪詢間隔很容易。 > <h5>>使此腳本的任何用戶都非常簡單地設置輪詢間隔，我們將在appmonitor2.html的頭部中將代碼的此部分放在腳本元素中：<antml：<ante> >您會注意到這些變量名稱是用全蓋編寫的。這表明它們應該像常數一樣行動 - 該值是在代碼早期設置的值，並且不會隨著代碼執行而更改。常數是許多編程語言的功能，但不幸的是，JavaScript不是其中之一。（JavaScript的較新版本允許您使用COSTKEYWORD設置真實常數，但是該設施並沒有得到廣泛支持（即使是許多現代瀏覽器）。）請注意，這些常數直接與我們類別的前四個屬性有關：targeturl，polliNterval，polliNterval，maxpollentries和timeoutthreshold。這些屬性將在我們班級的初始化方法中初始化： 以及初始化類的某些屬性，INIT方法還調用了兩種方法：ToggleaPpStatus，負責啟動和停止輪詢的負責，以及ReqStatus對象的INIT方法。 reqstatus是我們剛才討論的現狀單頓班的實例。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();> 此INIT方法與頁面的窗口。<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } <h5>設置UI >該應用程序的第一個版本在加載頁面時啟動，然後運行直到瀏覽器窗口關閉。在此版本中，我們想為用戶提供一個按鈕，他們可以用來打開或關閉輪詢過程。 toggleappstatus方法為我們處理此操作：> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); 好吧，所以toggleappstatus並不能真正完成工作，但是它調用了這樣做的方法：togglebutton，將開始按鈕更改為停止按鈕，反之亦然，而togglestatusmessage則更新了應用程序的狀態消息。讓我們仔細看看這些方法中的每種方法。 > > toggleButton方法 此方法可在其“停止”和“開始”狀態之間切換主要應用程序。它使用DOM-操縱方法動態創建適當的按鈕，為其分配正確的文本和onClick Event Handler：<anclick> <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }>該方法的唯一參數可以停止，可以是正確的，表明輪詢已停止或錯誤，表明投票已經開始。如您在此方法的代碼中所看到的那樣，創建了按鈕，並設置為顯示應用程序停止時的啟動，或者如果應用程序當前正在對服務器進行輪詢，則停止。它還分配了PollserverStart或PollserverStop作為按鈕的OnClick活動處理程序。這些事件處理程序將分別啟動或停止投票過程。 > >從INIT調用此方法（通過toggleappstatus）時，停止將設置為true，以便在啟動應用程序時顯示按鈕啟動。 > >此代碼要求使用ID ButtonAarea的DIV，請立即將其添加到我們的標記中： togglestatusmessage方法<pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; >在上面顯示帶有“ start”或“停止”一詞的按鈕可能是程序員或工程師需要弄清楚應用程序狀態的全部內容，但是大多數普通人都需要一條更清楚，更明顯的消息，以便在應用程序中弄清楚發生的事情。 <ancly>> > 該應用程序的此升級版本將在頁面頂部顯示狀態消息，以告訴用戶應用程序的整體狀態（停止或運行）以及輪詢過程的狀態。要顯示應用程序狀態，我們將在應用程序狀態欄中顯示應用程序狀態狀態：停止或應用狀態：運行。 在我們的標記中，讓我們插入按鈕出現的位置上方的狀態消息。我們將僅在標記中包括消息的“應用狀態”一部分。該消息的其餘部分將插入具有ID CurrentAppState的跨度：<ancerAppState：<ancy>> > togglestatusmessage方法在當前appstate跨度內顯示的單詞之間切換：<ancy>> 設置UI後，應用程序將進行啟動，並準備開始進行輪詢和記錄響應時間。 <pre class="brush:php;toolbar:false">Example 2.3. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } }; >檢查您正在進行的工作<pre class="brush:php;toolbar:false">Example 2.4. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } this.req.open(this.method, this.url, this.async); };>>現在您已經走了這麼遠了，能夠看到您的作品正在行動，對嗎？好吧，不幸的是，我們的應用程序中仍然有很多鬆散的結局 - 我們簡短地提到了一個名為STATUS的Singleton課程，但我們還沒有創建它，而且我們仍然有活動處理程序可以寫作。但是永遠不要害怕！我們可以快速使用幾個類和功能存根來啟動並運行該應用程序。 > 我們將使用一個空的方法開始創建該狀態單頓類。 <ance>> <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }>由於監視器類使用狀態類，因此我們必須在監視器之前聲明狀態。然後，我們將按鈕的OnClick事件處理程序添加到顯示器類。我們將使他們顯示警報對話框，以便我們知道如果幕後發生任何事情，會發生什麼。 >有兩個簡單的存根，您的應用程序現在應該準備好進行測試。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); 圖3.2。謙卑的開始<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030111068.png?x-oss-process=image/resize,p_40" class="lazy" alt="構建您自己的Ajax Web應用程序" > 單擊圖3.2顯示的顯示中的開始按鈕時，您會提供一個警報框，該框承諾將會發生更多的事情。讓我們開始善待這些諾言。 > 輪詢服務器 第一步是充實“開始”按鈕的OnClick Event Handler，PollserverStart： <h5> 此代碼立即調用二極管方法，就像我們在第2章中構建的App Monitor一樣，基本XMLHTTPREQUEST將負責提出HTTP請求來對服務器進行輪詢。發送請求後，代碼調用toggleappstatus，將其錯誤表示投票正在進行中。 > <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }<>>> >您可能會想知道，為什麼在所有有關設置輪詢間隔的討論之後，我們的代碼就向服務器的請求直接跳入；時間延遲在哪裡？答案是我們不希望第一個請求延遲時間。如果用戶單擊按鈕，並且在發生任何事情之前有十秒鐘的延遲，他們會認為該應用程序已損壞。我們希望在應用程序運行後發生的所有後續請求之間延遲，但是當用戶首先單擊該按鈕時，我們希望輪詢立即開始。 >在此版本的應用程序監視器和上一章中看到的二光面的唯一區別是使用self來前綴類的屬性和呼叫Settimeout。看看： >我們致電Settimeout指示瀏覽器一旦超時門檻通過。我們還在跟踪返回的間隔ID，因此我們可以在ShowPoll收到響應時取消對Handletimeout的呼叫。 這是Showpoll方法的代碼，該代碼處理服務器的響應：<ancy>><pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } >該方法要做的第一件事是取消在多波爾末尾對Handletimeout的延遲調用。之後，我們告訴我們的狀態類實例以停止其動畫（我們將稍後再查看此細節）。 >這些呼叫後，ShowPoll檢查以確保響應還可以，然後計算該響應從服務器返回多長時間。 Ajax類的錯誤處理功能應處理服務器中的錯誤，因此我們的腳本不應返回其他任何內容……儘管確保確保！ >一旦計算出響應時間，Showpoll記錄了使用UpdatePollarray的響應時間，然後將結果顯示為Printresult。我們將在下一部分中查看這兩種方法。 > 最後，我們安排了Dopolldelay中的另一項民意調查 - 一種非常簡單的方法，一旦輪詢間隔通過： 要檢查到這一點的進度，我們需要添加一些存根方法。首先，讓我們在狀態類中添加startproc和stopproc：<pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();> >我們還為顯示器類添加一些存根方法：<ancy>> <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } >現在我們準備好測試我們的進度了。在您的Web瀏覽器中打開AppMonitor2.html，單擊“啟動”，然後等待Fakeserver.php從睡眠中醒來，然後將OK送回您的頁面。 <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; };>您可以期待兩個結果之一：您的頁面收到響應，並且您看到與圖3.3中顯示的對話框相似，或者您看到圖3.4。 圖3.3。您的Ajax應用程序收到的響應<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030396431.png?x-oss-process=image/resize,p_40" class="lazy" alt="構建您自己的Ajax Web應用程序" > >如果收到圖3.4中顯示的超時消息，請不要擔心。請記住，在我們的Ajax應用程序中，我們的超時門檻目前設置為十秒鐘，而Fakeserver.php當前正在睡覺，以隨機選擇的秒數在三到12之間。 圖3.4。您的Ajax應用程序放棄希望 目前，我們尚未實施停止投票的方法，因此您需要通過重新加載頁面或關閉瀏覽器窗口來阻止它。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030425859.png?x-oss-process=image/resize,p_40" class="lazy" alt="構建您自己的Ajax Web應用程序" >> 處理超時 >如果您運行了到目前為止我們編寫的代碼，您可能已經註意到，即使報告了超時，您也會看到一條消息，此後不久就報告了請求的響應時間。發生這種情況是因為Handletimeout目前不過是一個簡單的存根。讓我們看一下該存根的構建，這樣我們就不會得到這種副作用。 ><pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }<pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); >在這裡，Handletimeout調用stoppoll以停止我們的應用程序進行輪詢服務器。它記錄了發生超時，更新用戶界面，並最終通過dopolldelay設置了另一個呼叫。我們將停止投票的代碼移動到單獨的功能中，因為我們需要在以後重新審視並將其加油。目前，StopPoll方法僅通過AJAX類的中止方法中止HTTP請求。但是，有一些情況無法處理此功能。稍後，我們將在創建完整的代碼以停止投票過程時解決這些問題，但是為了處理超時的目的，stoppoll很好。 > <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } 現在，當我們重新加載應用程序時，超時的表現完全按照我們的期望。響應時間欄圖<h5> 現在，到新版本的監視應用程序的肉！我們希望該應用程序顯示過去的響應時間列表，而不僅僅是最近的響應時間，我們希望以快速易於閱讀的方式顯示該列表。運行的條形圖顯示是工作的理想工具。 Pollarray中的運行列表 >所有響應時間都將進入一個存儲在監視器類的Pollarrare屬性中的數組。我們將使用直覺命名的UpdatePollarray方法保持此數組的更新。這是一個看起來像這樣的非常簡單的方法：> <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; };代碼非常簡單，儘管我們在其中使用的某些功能具有略有混亂的名稱。數組對象的解開方法將新項目放在數組的第一個元素中，並將數組內容的其餘部分移到一個位置，如圖3.5。 圖3.5。使用unshift <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030523677.png?x-oss-process=image/resize,p_40" class="lazy" alt="構建您自己的Ajax Web應用程序" >插入水果當數組超過用戶定義的最大長度時，updatePollarray會通過“彈出”一個項目來截斷它。這是通過POP方法實現的，POP方法只是刪除了數組的最後一項。 (Note that the method name pop may seem quite odd, but it makes more sense once you understand a data structure called a stack, which stores a number of items that can be accessed only in the reverse of the order in which they were added to the stack. We “push” an item onto a stack to add it, and “pop” an item from a stack to retrieve it. The pop method was originally designed for developers who were using arrays as stacks, but here we’ve repurposed it simply to刪除數組中的最後一個項目。）我們之所以將項目附加到頂部並從陣列底部刪除項目的原因是，在我們的顯示屏中，我們希望最新的條目出現在頂部，而較舊的條目則逐漸向下移動到底部。 顯示結果>我們在Pollarray中更新了結果後，我們可以使用Printresult方法顯示它們。這實際上是很酷的部分：用戶將親身體驗我們的AJAX應用程序和一個舊式應用程序之間的區別，該應用需要整個頁面刷新才能更新內容。 >渲染頁面partials 在Ajax術語中，保存響應時間列表的頁面的塊稱為頁面部分。這是指網頁的一個區域，該頁面與該頁面的其餘部分分開更新。 > >對服務器的異步請求更新網頁的一部分稱為“渲染頁面部分”。 printresult方法通過Pollarray迭代，並使用DOM方法繪製DIV內部使用ID PollResults的coll結果列表。我們將首先將DIV添加到我們的標記中： 現在，我們已經準備好使用Printresult方法了： <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } >這裡有很多，所以讓我們逐步查看此方法。 <ancon>> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();初始化了一些變量後，此方法將刪除Polldiv的所有內容：while loop反複使用removechild從polldiv中刪除所有子節點。 > 接下來是一個簡單的循環，它跳過了更新的結果並顯示它們。 <ancy>> 我們為此數組中的每個項目的結果生成一條消息。如下所示，超時（記錄為0）會生成（超時）消息。 <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } 接下來，我們使用DOM方法動態添加列表中每個條目的標記。實際上，我們在列表中的每個條目中在JavaScript中構造以下HTML：<ancy> bar div的寬度變化以反映實際響應時間，並且超時以紅色顯示，但否則此列表中的所有條目都是相同的。請注意，您必須在DIV中放置一些東西才能使其背景顏色顯示。即使您給Div一個固定寬度，背景顏色也不會顯示DIV是否為空。這很煩人，但很容易解決：我們可以用非破壞空間特徵填充Div。 >讓我們看一下我們將用來插入此標記的代碼：<ancon>> <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; 如果您從未使用過DOM操縱功能，則此代碼似乎很複雜，但確實很簡單。我們使用命名良好的創建方法來創建元素；然後，我們將值分配給每個元素對象的屬性。 > 在if語句之後，我們可以根據為生成每個響應所需的秒數來查看設置bar div的像素寬度的代碼。我們將這個時間數乘以20，以獲得合理的寬度，但是您可能需要使用更高或更低的數字，具體取決於頁面上的水平空間。 > <pre class="brush:php;toolbar:false">Example 2.3. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } };>要將文本添加到元素中，我們將createTextNode與附錄一起使用，附錄也用於將元素放置在其他元素中。 <ancy>>createTextNode和非破壞空間 在上面的代碼中，我們使用U00A0創建一個非破壞空間。如果我們嘗試使用普通＆nbsp;實體在這裡，createTextNode將嘗試通過將anmpersand轉換為＆amp;;;結果是＆nbsp;顯示在您的頁面上。解決方法是使用逃逸的Unicode非破壞空間：U00A0。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030681400.png?x-oss-process=image/resize,p_40" class="lazy" alt="構建您自己的Ajax Web應用程序" > 圖3.6。該應用程序開始形狀 >代碼的最後一部分將所有的div元素放在一起，然後將Pollresult Div放置在Pollresults Div中。圖3.6顯示了運行應用程序。 “一秒鐘”，您可能會在想。 “我們應該看到的條形圖在哪裡？”> >第一個酒吧在那裡，但用白色顯示為白色，這是沒有用的。讓我們通過應用程序的CSS使其可見： CSS中興趣的主要點是浮點：時間和條形分配元素的左聲明，構成了時間列表的時間列表和彩色條形圖中的彩色條。將它們漂浮在左邊是使它們並排出現的原因。但是，要使這種定位技術起作用，必須在這兩個divs之後立即出現一個帶有Clearboth類的元素。 <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }。 這是您可以在這裡看到Ajax的地方。它使用所有這些不同技術的位 - XMLHTTPREQUEST，W3C DOM和CSS - 與JavaScript一起連接並控制。程序員通常會遇到CSS最大的問題，以及在其代碼中構建接口元素的實用性。 > 作為AJAX程序員，您可以嘗試依靠庫來為您照顧CSS，或者您可以學習足夠的學習來完成工作。很高興認識一個聰明的人，他很樂意回答有關該主題的很多問題，或者在CSS上有一本好書（例如，SitePoint's CSS選集：101基本技巧，技巧和hacks）。 圖3.7。條形圖的開始 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030772414.png?x-oss-process=image/resize,p_40" class="lazy" alt="構建您自己的Ajax Web應用程序" >現在我們的CSS已經到位，我們可以在應用程序顯示中看到條形圖，如圖3.7所示。 >停止應用程序 > PollserverStart方法的最終操作在運行應用程序後，致電ToggleaPpstatus切換應用程序的外觀。 toggleappstatus將狀態顯示更改為應用狀態：運行，將開始按鈕切換到停止按鈕，然後將PollserverStop方法連接到按鈕的OnClick事件。 pollserverStop方法停止了正在進行的輪詢過程，然後將應用程序重新切換，以使其看起來正確停止：<ancy>><pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } 此代碼重複了我們本章前面添加的stoppoll方法。目前，該方法所做的就是中止當前的HTTP請求，這在我們處理超時時很好。但是，此方法還需要處理其他兩個方案。 >這些方案中的第一個發生在輪詢間隔期間調用該方法時（即，在我們收到對HTTP請求的響應之後，但在發送下一個請求之前）。在這種情況下，我們需要取消對Dopoll的延遲調用。 > >第二種方法必須能夠處理的第二種情況，當停止發送請求後，但在收到響應之前，就會出現。在這種情況下，需要取消超時處理程序。 > 當我們跟踪兩個呼叫的間隔ID時，我們可以通過兩個呼叫來修改stoppoll以處理這些方案： <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); 現在，您應該可以通過單擊條形圖下的開始/停止按鈕來停止並啟動投票過程。 <h5>>狀態通知 Ajax異步更新內容的能力以及更新可能僅影響頁面的小區域的事實，使狀態通知的顯示成為Ajax應用程序設計和開發的關鍵部分。畢竟，您的應用程序的用戶需要知道該應用程序在做什麼。 > 在Web開發的過去，當整個頁面必須重新加載以反映其內容的任何更改時，當應用程序與服務器通信時，最終用戶非常清楚。但是我們的Ajax Web應用程序可以在後台與服務器交談，這意味著用戶看不到完整的頁面重新加載，否則會表明正在發生某些事情。 >那麼，您的Ajax應用程序的用戶將如何知道該頁面正在與服務器進行通信？好吧，Ajax應用程序通常會通知用戶，借助小動畫或視覺過渡，而不是在瀏覽器Chrome中顯示的舊旋轉地球儀或揮舞著標誌動畫。這些過渡通常會通過CSS實現，吸引了用戶的眼睛，而不會分散注意力！ - 並提供有關應用程序正在做什麼的提示。良好的Ajax應用程序設計的一個重要方面是開發此類通知。 狀態動畫 >由於我們已經在應用程序的頂部已經有一個小欄，該欄告訴用戶應用程序是否正在運行還是停止，因此這是一個相當合乎邏輯的地方，可以顯示更多狀態信息。 >旋轉球或跑步狗等動畫是一種表明應用程序忙碌的好方法 - 通常，您需要顯示使用運動來指示活動的圖像。但是，我們不想使用一種提示，該提示將吸引用戶的注意力，或者在他們試圖閱讀結果時使人們分心，因此我們只需使用圖3.8所示的緩慢而脈動的動畫。這個動畫具有輕巧且易於在CSS中實現的額外優點 - 不需要Flash播放器，也沒有笨重的GIF圖像可以通過乏味的框架下載。 >白色條的極右側是未使用的空間，這使其成為此類通知的理想場所：它位於用戶界面的頂部，因此很容易看到，但它是正確的，因此它是試圖閱讀結果列表的人們的方式。 圖3.8。我們的脈動狀態動畫<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030949774.png?x-oss-process=image/resize,p_40" class="lazy" alt="構建您自己的Ajax Web應用程序" > 為了託管此動畫，我們將在我們的文檔中的狀態消息div下方添加一個Div，並在我們的文檔中添加一個div：> >將CSS規則添加到您的樣式表中以定位此Div：<ancy> <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }現在，此動畫位於頁面的右側。 > >當您在瀏覽器中打開頁面時，您將看不到動畫 - 目前，它不過是白色背景上的白色盒子。如果您願意，請在民意調查中添加一些內容，以查看其位置。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();> setInterval和範圍的損失 javascript setInterval是一種重複發生任務的明顯且簡單的方法 - 例如，控制脈衝動畫。 >所有帶有setInterval的CSS迴旋產生了一些相當有趣且笨重的代碼。因此，正如我之前提到的那樣，將狀態動畫的代碼放入其自己的類（狀態）是有意義的，我們可以從監視器類中參考和使用。 >一些聰明的開發人員閱讀此內容可能已經猜測，SetInterval遭受了與Settimeout相同的損失問題：對象關鍵字將丟失。由於我們只需要在監視應用程序中處理一個狀態動畫，因此採用優勢的方法並將我們的狀態類成為單身班類是有意義的，就像我們在監視類中所做的那樣。 設置狀態 開始，讓我們從已經編寫的狀態存根中添加一些屬性，以使以前的代碼工作：<ancy>> 狀態對象具有四個屬性： <ul> <li> Curropacity屬性跟踪了PollingMessage Div的不透明度。我們使用setInterval迅速改變該div的不透明度，從而產生脈沖和褪色效果。 > <li>PROC屬性是一個三州開關，指示當前正在進行HTTP請求，已成功完成或在完成之前流產。 > <li>procinterval屬性用於存儲控制動畫的setInterval進程的間隔ID。我們將使用它來停止運行動畫。 <li>> DIV屬性是對PollingMessage Div的引用。狀態類操縱pollingmessage div的css屬性以創建動畫。 初始化 需要一種初始方法將DIV屬性綁定到輪詢範圍：<ancemessage：<ancy>> <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }INIT方法還包含對名為Setalpha的方法的調用，這是IE解決方法所必需的，我們將稍後再查看。 > Internet Explorer內存洩漏 > dom元素引用（將用作類屬性的變量指向Div，TD或跨度元素等）是Internet Explorer中內存洩漏的臭名昭著的原因。如果您在不清除此類屬性的情況下銷毀了類的實例（通過將其設置為空），則不會回收內存。 > >讓我們添加到我們的監視器類清理方法，該方法處理窗口。 此方法通過調用該類的清理方法清理狀態類，並將ReqStatus屬性設置為null：<anuld> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); 狀態類中的清理方法進行IE管家：<anconekeving> <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }如果我們不將DIV引用到NULL，則Internet Explorer將將其保留在死亡握把中的該變量中，並且每次重新加載頁面時都會看到記憶使用氣球。 > 實際上，對於我們的微小應用來說，這不是很多問題，但是在具有很多DHTML的大型Web應用程序中，這可能會成為一個嚴重的問題。養成清理代碼中的DOM參考的習慣是一件好事，這樣就不會成為您的問題。 <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; };> displayOpacity方法 >狀態類中的代碼中心段生活在顯示屏方法中。這包含更改PollingMessage Div的適當CSS屬性所需的瀏覽器特定代碼。這是代碼： 對象的cropacity屬性代表應設置輪詢div的不透明度。我們的實現使用了一個從0到100的整數量表，這是由Internet Explorer使用的，而不是Mozilla和Safari預期的分數量表。這種選擇只是個人偏愛。如果您希望使用分數值，則一定要做。 >在方法中，您會看到文檔的測試。所有內容 - 僅由IE和Opera支持的屬性 - 以及Window.opera的測試，毫不奇怪，僅由Opera支持。因此，只有IE才能執行此IF語句的IF子句。在此IF語句的IE分支中，專有alpha.opacity屬性用於設置不透明度，而在其他條款中，我們使用了較舊的Mozopacity屬性，該屬性由較舊的基於Mozilla的瀏覽器支持。 >最後，此方法以符合標準的方式設置了不透明度：使用不透明度屬性，最終應在所有符合標準的瀏覽器中支持。 > ie gotchas > Internet Explorer版本6，是一個較舊的瀏覽器，在試圖呈現基於不透明度的CSS更改時會遇到一些問題。幸運的是，第一個很容易通過我們的PollingMessage CSS規則來解決：<ancy>> 添加背景屬性將Internet Explorer解決了第一個特定問題。如果要在IE中更改其不透明度，則必須設置元素的背景顏色，否則文本將使用鋸齒狀邊緣顯示。請注意，將背景設置為透明是不起作用的：必須將其設置為特定的顏色。 <ancy>> 如果您希望CSS文件有效，則第二個問題有些棘手。即，除非首先在樣式表中聲明，否則不會讓您更改style.alpha.alpha。現在，如果您不介意阻止W3C驗證器通過樣式表，則可以通過添加另一個聲明來解決此問題：： <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } 不幸的是，這種方法在不支持專有屬性的瀏覽器中生成CSS警告，例如Firefox 1.5，該屬性默認情況下在JavaScript控制台中顯示CSS警告。一種比將IE特定樣式信息插入您的全局樣式表更好的解決方案是使用JavaScript將聲明添加到僅在IE中的PollingMessage Div的樣式屬性中。這就是Init中所謂的Setalpha方法。這是該方法的代碼： 此代碼僅在Internet Explorer中執行，它使用文檔。 StylesHeets數組通過鏈接到當前頁面的每個樣式表進行迭代。它使用規則屬性訪問每個樣式表中的規則，並通過查看SelectOrtext屬性找到我們想要的樣式。一旦它在規則數組中具有正確的樣式，它就會為過濾器屬性提供更改不透明度所需的值。 Opera？ <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();<> 中的不透明度不幸的是，在撰寫本文時，即使是最新版本的Opera（版本8.5）也不支持CSS不透明度，因此這種動畫在該瀏覽器中不起作用。但是，該功能計劃為Opera版本9。 <ancy>> <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }運行動畫處理動畫的代碼由五種方法組成：前三個控制“處理……”動畫，而其餘兩個控制“完成”動畫。控制“處理……”動畫的三種方法是：> <ul> <li>startProc，它設置了“處理……”動畫，併計劃使用setInterval 重複調用DoProc <li>> doproc，它監視此類的屬性，並設置“處理……”動畫的當前框架。 stopproc，這表明“處理……”動畫應停止 <li> 控制“完成”動畫的兩個是：> startdone設置了“完成”動畫，併計劃使用SetInterval <ul>重複調用Dodone <li>> dodone設置了“完成”動畫的當前幀，並在完成>後終止動畫 <li> 啟動它 >設置動畫並開始啟動是startproc方法的作業：<ancy>> >將PROC屬性設置為PROC（處理）後，該代碼調用SetDisplay方法，該方法設置了PollingMessage Div的顏色和內容。接下來，我們將仔細研究setDisplay。 <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }>一旦代碼設置了輪詢div的顏色和內容，它將Div的不透明度對100（完全不透明）進行初始化，並調用DisplayOpacity以使此設置生效。 <ancy>> >最後，此方法調用setInterval以安排動畫過程的下一步。請注意，與SettiMeout一樣，SetInterval調用返回一個間隔ID。我們將其存儲在ProcInterval屬性中，以便稍後停止該過程。 > “處理……”和“完成”動畫共享setDisplay方法： >由於“處理……”和“完成”狀態之間的唯一差異是其顏色和文本，因此使用此通用功能在PollingMessage Div的兩個狀態之間切換是有意義的。顏色是通過將類分配給PollingMessage Div來控制的，因此我們需要將完成的CSS類規則添加到我們的樣式表中：> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();使其停止 平穩地停止動畫需要一些特定的時間。我們不希望動畫在脈搏中間突然停止。當“處理……”圖像的不透明度下降到零時，我們想在自然中間停止它。 <ancy>> <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }>因此，停止動畫的停止方法本身並不能阻止它 - 它只是設置一個標誌來告訴動畫過程，該在達到方便點時停止了。這很像妻子和丈夫在一天結束時收到的許多程序員接到的電話，提醒他們在代碼中的邏輯停止點時回家。 > >由於這裡幾乎沒有動作，因此該方法很短：<ancy>><pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } 此方法確實必須區分兩種類型的停止類型：成功完成的請求（完成）和用戶的請求以停止應用程序（APORT）。 > doproc方法使用此標誌來弄清楚是顯示“完成”消息，還是只是停止。 >用doproc 運行動畫以90毫秒的間隔調用的DoProc方法會改變PollingMessage Div的不透明度，從而產生加工動畫的脈衝效果。這是代碼： 這種方法很簡單 - 它的主要目的只是每次稱為民意調查的不透明性10％。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); 第一個if語句希望查看DIV是否已完全消失。如果有，動畫仍應該運行，它將不透明度重置為100（完全不透明）。每90毫秒執行此代碼每90毫秒會產生平穩的效果，在這種效果中，民意測驗劃分逐漸消失，重新出現並逐漸消失 - 熟悉的脈衝效果表明該應用程序忙於做某事。如果不應該繼續運行動畫，我們通過調用Clear Interval來停止動畫，然後，如果Proc屬性完成了，我們將觸發“完成”動畫，並用呼叫啟動啟動。 >使用StartDone 啟動“完成”動畫 啟動方法對於“完成”動畫的目的具有相同的目的，而startproc方法用於“處理……”動畫。它看起來也與startproc非常相似：> 這次，我們將try to to setDisplay傳遞給，它將將文本更改為“完成”，將顏色更改為綠色。 > 然後，我們用SetInterval設置了對Dodone的呼叫，這實際上執行了vadeout。 <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }最終淡出 Dodone的代碼明顯比DoProc的代碼要簡單得多。它不必像DoProc一樣連續處理，直到被告知停止。它只是繼續將投票情緒Div的不透明度降低10％，直到達到零，然後停止自身。非常簡單的東西： 圖3.9。具有脈衝狀態指標的應用 <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; };>最後，我們準備在瀏覽器中測試此代碼。在瀏覽器中打開AppMonitor2.html，單擊“開始”按鈕，您應該看到一個脈衝處理……瀏覽器視口右上角附近的消息，如圖3.9所示。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145031028504.png?x-oss-process=image/resize,p_40" class="lazy" alt="構建您自己的Ajax Web應用程序" > 小心的輪詢間隔！ > >現在，我們已經在頁面上運行了一個動畫，我們需要小心，以免在上一個停止之前再次啟動動畫。因此，強烈建議您不要將poll_interval設置為少於兩秒鐘的任何東西。 <h5>造型監視器 >現在我們已經啟動並運行了應用程序，讓我們使用CSS使其看起來不錯。我們需要添加以下標記以實現我們所需的佈局： <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } 如您所見，我們添加了三個Divs，可以從中懸掛樣式，並有一段折斷的線路，以清除浮動的應用程序狀態消息和動畫。此頁面完整的CSS如下；樣式界面如圖3.10：<ancy> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029861987.png?x-oss-process=image/resize,p_40" class="lazy" alt="構建您自己的Ajax Web應用程序" >圖3.10。已完成的應用程序顯示 摘要 >我們的第一個工作應用程序展示瞭如何使用Ajax向服務器提出多個請求，而無需用戶離開當前加載頁面。它還給出了相當現實的圖片，說明我們在執行多個任務時必須處理的複雜性。這個複雜性的一個很好的例子是我們使用SettiMeout來計算XMLHTTPREQUEST請求。這個示例提供了一個很好的機會，可以在開發AJAX應用程序時探索您將遇到的一些常見問題，例如範圍和連接超時的丟失，並提供了實用的解決方案來幫助您處理它們。 >這就是本摘錄的<h5>>構建自己的Ajax Web應用程序 - 別忘了，您可以以.pdf格式下載本文。這本書總共有八個章節，到最後，讀者將構建許多功能齊全的網絡應用程序，包括在線國際象棋遊戲，多個玩家可以實時玩，這本書的目錄具有完整的詳細信息。 >常見問題（常見問題解答）有關構建Ajax Web應用程序<ancy> > Web開發中AJAX的關鍵組成部分是什麼？ ajax（代表異步JavaScript和XML）是一組Web開發技術，它允許網頁可以更新和檢索服務器中的數據和檢索數據，而無需干擾現有頁面的顯示和行為。 AJAX的關鍵組成部分包括用於呈現信息的HTML（或XHTML）和CSS，用於動態顯示和與數據相互作用的文檔對像模型（DOM），用於攜帶數據的XML，用於操縱數據的XSLT，用於操縱數據的XSLT，XMLHTTTPREQUEST對象的XMLHTTPREQUEST對象，以使這些方法<這些方法<<這些技術<網站上的用戶體驗？ <h2 >ajax通過使網站更加響應和互動來改善用戶體驗。它允許網頁在後台與服務器通信，而無需為每個請求重新加載。這意味著在服務器正在處理請求時，用戶可以繼續與網頁進行交互，從而導致更流暢，更無縫的用戶體驗。 ><h3 >> xmlhttprequest對像在ajax中的作用是什麼？它提供了一種使用服務器交換數據並更新網頁的部分的方法，而無需重新加載整個頁面。它用於將HTTP或HTTPS請求直接發送到Web服務器，並將服務器響應數據直接加載到腳本中。 <>> AJAX可以使用XML的技術以外的其他技術？尤其是JSON在Ajax中經常使用，因為它易於在JavaScript中使用，並且比XML更有效。 ><h3 >>在Web開發中AJAX的某些常見用途是什麼？這包括諸如實時搜索結果，自動完成表單字段，交互式映射和動態內容更新之類的應用程序。社交媒體供稿，電子郵件客戶端和電子商務網站經常使用AJAX提供流暢且交互式的用戶體驗。 >>使用Ajax？ <h3 > 有哪些潛在的缺點或挑戰，而Ajax可以極大地增強用戶體驗，並且具有潛在的缺點。其中包括瀏覽器兼容性的問題，調試和測試的困難以及搜索引擎優化（SEO）的挑戰，因為搜索引擎可能難以為Ajax內容進行索引。此外，由於Ajax依賴於JavaScript，因此在瀏覽器中禁用JavaScript的用戶將無法使用基於AJAX的功能。 <h3 >>>我如何確保我的AJAX應用程序可訪問並且SEO友好友好且易於訪問？這意味著使用HTML構建您的核心網頁，然後使用AJAX功能對啟用JavaScript的用戶進行AJAX功能。對於SEO，請考慮使用服務器端渲染來為搜索引擎提供完整的頁面，同時仍為用戶提供快速的，AJAX驅動的體驗。 >> AJAX如何處理數據安全性？ <h3 ><h3 >ajax應用程序以與其他任何Web應用程序相同的方式處理數據安全性。在處理所有數據之前，對所有數據進行驗證和消毒很重要，並使用安全的方法來傳輸數據，例如HTTPS。此外，由於Ajax可以將您的應用程序的內部運行揭示到客戶端，因此確保在服務器端受到保護敏感操作很重要。 > <h3 >我可以將Ajax與acept或Angular？ 等框架進行AJAX一起使用，可以與Ajax一起使用Ajax，可以與JavaScript Frameworks一起使用。這些框架通常提供自己的抽象來提出AJAX請求，但是您也可以使用本機XMLHTTPRequest對像或其他庫（如jQuery或axios）。 ><h3 >>我如何調試Ajax應用程序？ <🎜>由於AJAX的異步性質，因此比調試傳統的Web應用程序更為複雜。但是，大多數現代瀏覽器都提供開發人員工具，使您可以檢查AJAX請求和響應，監視網絡活動並逐步介紹JavaScript代碼。此外，許多JavaScript庫和框架還提供了處理AJAX錯誤和異常的工具和方法。</script>

以上是構建您自己的Ajax Web應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。