1、How to Design a large AJAX Application 如何設(shè)計一臺大型AJAX應(yīng)用程序 Introduction 導(dǎo)言 Ill cover the process I have developed in the course of implementing two AJAX 我會支付的過程 ， 我制定的過程中執(zhí)行兩個AJAX技術(shù) applications as a developer for Duo Consulting 應(yīng)用開發(fā)的多咨詢 in Chicago.在芝加哥舉行。 This approach has made it這種做法使得easier for me to

2、 work with the design team, produce estimates for this type of project 對我來說更容易與設(shè)計團隊，生產(chǎn)估計這種類型的項目和交流所涉及的每一個步驟的方式，對項目管理人員scheduling purpo調(diào)度的目的。 Background 背景 I re-designed WalkJogRun 我重新設(shè)計WalkJogRun 利用谷歌地圖API 查看一年前和開始 experimenting with AJAX requests to handle tasks that really shouldnt trigger a 試驗AJA

3、X請求處理的任務(wù) ， 確實不應(yīng)該引發(fā)complete page reque完整的頁面請求。 Shortly after that one of our clients, Chicago Park District 之后不久 ， 一個我們的客戶，芝加哥公園區(qū) wanted to redesign their seasonal registration application to maximize the number of 想重新設(shè)計其季節(jié)性登記申請盡量多的 people who could register for their seasonal programs and make it ea

4、sier for people to use 人誰可以登記的季節(jié)性程序 ， 使人們可以更加輕松地使用the sit該網(wǎng)站。 After a detailed discovery phase we proposed an AJAX “browser interface” t經(jīng)過詳細(xì)的發(fā)現(xiàn)階段 ，我們提出了一個Ajax “的瀏覽器界面” ，以make it simpler to drilldown through their online offerings and ultimately to locate使簡單深入通過其在線服務(wù)，并最終找到program and regist計劃和注冊。Insp

5、ired by the iPod menu concept, we developed and built a靈感來自iPod的菜單上的概念，我們制定和建立一個應(yīng)用程序 which served 3000 orders in the first 3 minutes of summer registration. 這有助于3000命令在3分鐘的第一次夏季登記。 Since then I worked on a second application which sits on top of the custom CMS 自那時以來 ， 我第二次申請之上自定義不育系 we 我們implement f

6、or clients to allow them to generate Microsoft Word proposals 實施客戶 ， 使他們能夠生成Microsoft Word的建議 7 7 to send to 發(fā)送到 clients from the data that drives the website without cutting and pasting. 客戶的數(shù)據(jù)驅(qū)動網(wǎng)站剪貼。 This application 此應(yīng)用程序 was built on the prototype AJAX library but uses the same design principles.

7、 是建立在原型的AJAX庫 ， 但使用相同的設(shè)計原則。 Why use AJAX? 為什么使用AJAX ？ AJAX isnt just a new buzzword or a cream cleanser from Procter & Gamble. AJAX的不僅是一個新的術(shù)語或霜清潔從寶潔。 Its a great 這是一個偉大的 leap forward (and a small step back) for usability. 飛躍（和一小步回）的可用性。 Like flash, when it is used correctly Flash一樣， Silverlight 使用時正

8、確 and appropriately it can dramatically enhance the user experience by making web 和適當(dāng)它可以大大增強用戶體驗 ， 使網(wǎng)站 applications respond faster and make interactions less jarring than having a page reload. 應(yīng)用響應(yīng)速度更快 ， 使互動較少晃動超過了網(wǎng)頁重新載入。 AJAX also offers a performance benefit for your web server since you begin ser

9、ving AJAX技術(shù)還提供了一個性能優(yōu)勢為您的Web服務(wù)器 ， 因為您開始投放 smaller chunks of pages instead of complete pages every time. 較小的塊 ， 而不是完整的網(wǎng)頁頁面每次。 For ColdFusion this also 這也為ColdFusion means only the business logic pertaining to the requested chunk needs to be recalculated 意味著只有業(yè)務(wù)邏輯有關(guān)要求大塊需要重新計算 instead of the logic for a

10、 whole page so your application server will get some relief. 而不是邏輯的整個網(wǎng)頁 ， 使您的應(yīng)用程序服務(wù)器將得到一些緩解。 1 1 / / 2 2 3 3 /apis/maps/ /apis/maps/ 4 4 http:/duoconsulting

11、.com/experience/chicago-park-district-registration/index.cfm /experience/chicago-park-district-registration/index.cfm 5 5 /programBrowser/ /programBrowser/ 6 6

12、 7 7 : Select the proposal generator once you have logged in with the username ：選擇建議發(fā)電機一旦你登錄的用戶名 and password demo 和密碼演示 Design 設(shè)計 Work from a mockup you can doodle on. 工作從一個模型 ， 您可以涂鴉的。 Draw on t

13、he mockup to identify discreet 利用模型 ， 以確定謹(jǐn)慎 sections of the applications and label them. 各款的應(yīng)用和標(biāo)簽他們。 Do panels interact or are they isolated? 做面板互動還是孤立？ If 如果 there is a relationship between an interaction in one panel and the display of information, 有一種互動關(guān)系 ， 在一個小組 ， 并顯示信息， draw it with arrows and

14、callouts. 借鑒與箭頭和標(biāo)注。 This helps to communicate the logical breakdown of 這有助于溝通的邏輯細(xì)目 the application with other developers. 與其他的應(yīng)用開發(fā)。 An example marked up mockup for the Chicago 一個例子明顯上升模型芝加哥 Park District program browser application might look like this: 公園區(qū)的應(yīng)用程序的瀏覽器看起來可能會像這樣： 5 5 1 1 11 11 12 12 9 9

15、 8 8 7 7 6 6 2 2 4 4 3 3 10 10 In the example I have numbered the interactions on the mockup for the sake of space but 在這個例子中我有編號的相互作用的模型為空間 ， 但 these correspond to the following interactions: 這些符合以下的相互作用： 1. 1 。 selectItem(panel) selectItem （小組） 2. 2 。 selectItem(panel) selectItem （小組） 3. 3 。 selec

16、tItem(panel) selectItem （小組） 4. 4 。 selectItem(panel) selectItem （小組） 5. 5 。 getHelp(helptopic) getHelp （ helptopic ） 6. 6 。 viewProgramDetails(activity_code) viewProgramDetails （ activity_code ） 7. 7 。 saveToWishlist(activity_code) saveToWishlist （ activity_code ） 8. 8 。 checkAvailability(activity_

17、code) checkAvailability （ activity_code ） 9. 9 。 addToCart(activity_code,participant) addToCart （ activity_code ，嘉賓） 10. 10 。 cancelRegistration(activity_code) cancelRegistration （ activity_code ） 11. 11 。 loadWishlistScreen(mode) loadWishlistScreen （模式） 12. 12 。 loadWishlistScreen(mode) loadWishlis

18、tScreen （模式） Obviously, there are huge gaps in this model. 顯然，有巨大的差距 ， 這一模式。 Ideally you would take each colored 理想您將每個彩色 section of the diagram and model each of the states (screens) and continue labeling 部分圖和模型每個國家（屏幕） ， 并繼續(xù)標(biāo)記 interactions. 相互作用。 Identify each interaction (a function) and work out

19、 the parameters required to allow the 確定每個互動（功能）和工作需要的參數(shù) ， 使 function to work as an isolated item. 職能工作作為一個孤立的項目。 Functions should be able to perform their task 職能應(yīng)該能夠履行他們的任務(wù) without going beyond global variables and the argument scope in most cases. 沒有超越全局變量和參數(shù)的范圍在多數(shù)情況下。 Create a 創(chuàng)建一個 text file and

20、 group the function specifications based on the discreet areas of the 文本文件和組的功能規(guī)格的基礎(chǔ)上謹(jǐn)慎領(lǐng)域 application eg cart, wishlist, account, help. 應(yīng)用如車，心愿，帳戶，幫助。 Add JavaScript comments to describe the 添加JavaScript評論描述 interaction and include any pseudo code to describe the steps for a function where there 互動和

21、包括任何偽代碼來描述的步驟有一個函數(shù) are important validation tests, lookups or steps to be performed. 是重要的檢驗測試，查找或步驟進行。 Are there any panels of the site which have related JavaScript functions that are repeated? 是否有任何小組的網(wǎng)站有相關(guān)的JavaScript功能 ， 重復(fù)？ Whether an undefined number of repeats or a defined number it is preferr

22、ed to build a 無論是一個未定義的一些重復(fù)或界定數(shù)量是希望建立一個 JavaScript object. JavaScript對象。 This reduces code duplication, provides variables local to each 這將減少代碼的重復(fù)，提供給每個變量的地方 instance and generally makes things easier. 例如 ， 通常變得更加容易。 Prefix functions that act on a specific 前綴職能的具體行動 instance of a panel with the name

23、 of the panel eg Cart:function deleteItem() 例如一個小組的名字小組如購物車：功能deleteItem （ ） Look at the interactions which fetch remote data (make an AJAX call). 看看相互作用而獲取遠(yuǎn)程數(shù)據(jù)（作出AJAX請求） 。 Think about each 想想每個 in turn and make a decision whether each request must be unique (eg get user cart) or 反過來 ， 并作出決定是否要求必須是唯

24、一的（例如 ， 獲得用戶的購物車）或 whether the information doesnt change at all (eg get help panel). 的資料是否是不會改變的（例如獲得幫助小組） 。 Update the comments 最新的評論 for each function making a remote call to explain that it is remote and indicate if it is 每個功能使遠(yuǎn)程電話解釋說 ， 這是遠(yuǎn)程的 ， 并表明如果是 unique or not. 獨特或沒有。 Next, consider the type

25、s of remote call you are making. 其次，考慮類型的遠(yuǎn)程調(diào)用你決策。 Is the complete result sent back 是完整的結(jié)果發(fā)回 from the remote page as rendered HTML (rendered result) which can be inserted directly 從遠(yuǎn)程頁面提供的HTML （提供結(jié)果） ，它可以直接插入 into a destination panel or will the result contain JavaScript variables, XML or a custom 到目

26、的地小組或?qū)⒔Y(jié)果包含JavaScript變量， XML或自定義 structured result (functional result) to be processed in a specific way? 結(jié)構(gòu)化的結(jié)果（功能結(jié)果）來處理的具體辦法？ An example of a 一個例子 rendered result is that a help file chunk can be simply rendered in a given DIV element so 結(jié)果是 ， 提供一個幫助文件塊可以簡單地提供在某一DIV元素 ， 使 it is sent back as HTML; a

27、 functional result example would be a remote address lookup 它送回為HTML ;功能結(jié)果例子是一個偏遠(yuǎn)的地址查詢 function where you send an address and receive back a complex object to be inspected 功能 ， 你的地址發(fā)送和接收回到一個復(fù)雜的對象進行檢查 which then updates various fields on a form. 然后更新各個領(lǐng)域的一種形式。 Add a comment to each AJAX call to say 添

28、加評論每個AJAX請求說 whether the result is rendered or functional. 無論結(jié)果是提供或功能。 Now is probably a good time to walk through your design with another programmer and 現(xiàn)在可能是一個好時機 ， 步行穿過你的設(shè)計 ， 并與其他程序員 the designer to make sure you understood the designers intentions and make sure that 設(shè)計 ， 以確保您理解設(shè)計者的意圖 ， 并確認(rèn) your

29、 approach isnt missing some obvious efficiencies. 您的做法是不是丟失了一些明顯的效益。 An example design document for 一個例子設(shè)計文件 3/8 the subset of functionality described in the earlier Chicago Park District mockup might 子集的功能中所描述早些時候芝加哥公園區(qū)模型可能 look something like this: 看起來就像這樣： programBrowser.txt programBrowser.txt /S

30、earch Panels / /搜索小組 SearchPanel:selectItem(panel) SearchPanel ： selectItem （小組） （ /* if panel is between 1 and 3 retrieve the / *如果小組是1至3檢索 contents of the next panel (getResults), 內(nèi)容下次小組（ getResults ） ， else retrieve the program listing */ 其他檢索程序列表* / ） SearchPanel:getResults(target_panel,filter)

31、SearchPanel ： getResults （ target_panel ，過濾器） （ /* based on the given filter make a non-unique / *根據(jù)給定的過濾器讓一個非唯一 rendered AJAX call to grab the contents of AJAX請求提供抓取內(nèi)容 the panel and place it in the target_panel */ 小組 ， 并將其放置在target_panel * / ） /Help / /幫助 getHelp(help_topic) getHelp （ help_topic ）

32、（ /* make non-unique rendered AJAX call to grab the / *使非唯一提供AJAX請求抓取 help text for help_topic and place it in the 幫助文本help_topic ， 并將其放置在 help div */ 幫助股利* / ） /Program Search Result / /計劃搜索結(jié)果 viewProgramDetails(activity_code) viewProgramDetails （ activity_code ） （ /* expand the hidden divs for the

33、 panel labeled / *擴大隱藏divs小組標(biāo)記 with the activity_code and check availability */ 與activity_code和查詢* / ） saveToWishlist(activity_code) saveToWishlist （ activity_code ） （ /* make a unique functional AJAX call to return / *使一個獨特的功能AJAX請求返回 a result to indicate 結(jié)果表明 - is the user logged in -是用戶登錄 - is th

34、e item already in the cart -是該項目已經(jīng)在車 - is the cart full -全是車 Pass the result to handleSaveToWishlist() */ 通過結(jié)果handleSaveToWishlist （ ） * / ） checkAvailability(activity_code) checkAvailability （ activity_code ） （ /* make a unique functional AJAX call to return / *使一個獨特的功能AJAX請求返回 a result to indicate

35、 if there is available 結(jié)果表明 ， 如果有可用 inventory and pass the result to 庫存和通過的結(jié)果 handleCheckAvailability() */ handleCheckAvailability （ ） * / ） handleCheckAvailability(result) handleCheckAvailability （結(jié)果） （ /* if none available set inventory to zero and / *如果沒有提供一套庫存為零 ， change the class and text of th

36、e inventory box to 改變階級和文字的清單方塊 indicate that the item is sold out, else 表明 ， 該項目的門票已經(jīng)售罄，其他 update the inventory box to the returned value */ 更新清單方塊的返回值* / ） addToCart(activity_code,participant) addToCart （ activity_code ，嘉賓） （ /* skipped for brevity. / *跳過簡潔. */ * / ） cancelRegistration(activity_co

37、de) cancelRegistration （ activity_code ） （ /* hide the more info div for the activity_code */ / *隱藏詳情股利為activity_code * / ） /Wishlist / /心愿 loadWishlistScreen(mode) loadWishlistScreen （模式） （ /* make a non-unique rendered AJAX call to retrieve / *使一個非唯一的AJAX請求提供檢索 the content matching the mode passed

38、 in and update 內(nèi)容相匹配的模式 ， 并通過更新 the wishlist div accordingly */ 相應(yīng)的心愿股利* / ） handleSaveToWishlist(result) handleSaveToWishlist （結(jié)果） （ /* based on the result either / *基于結(jié)果要么 -refresh the wishlist panel to reflect 刷新小組的心愿 ， 以反映 the new item 新項目 -update the wishlist panel with an error message 更新的心愿小組

39、的錯誤信息 */ * / ） Again, this is by no means complete but gives you an idea of the pre-work to do at this 再次，這決不是完整的 ， 但讓你的想法前的工作要做 ， 在這 stage. 階段。 Coding the application 編碼中的應(yīng)用 The first thing you will want to do is to take each of the sections of your JavaScript 的第一件事 ， 你會想要做的是采取每個章節(jié)的JavaScript desig

40、n document and make each section its own .js file to be included in the head of your 設(shè)計文件 ， 使自己的每一節(jié)。 js文件包括在您的頭部 document. 文件。 Smaller chunks make it more obvious where to look when you are trying to 較小的塊使其更加明顯的情況下看時 ， 您正在嘗試 debug the application: 調(diào)試應(yīng)用程序： “ /腳本” You will need to work through each of

41、 those files next and flesh out the JavaScript. 您將需要通過每個人的檔案和充實明年的JavaScript 。 If 如果 possible, start with the panels least connected and work your way to the most connected 有可能，首先是小組至少聯(lián)系和工作的方式連接到最 panels. 面板。 Assuming all went according to plan during the review how exactly do you make the 如果一切按計劃順利

42、進行的審查過程中如何做才能讓你準(zhǔn)確的 different types of AJAX calls mentioned above? 不同類型的AJAX調(diào)用上述？ To recap: 要概括： Non-unique rendered 非唯一提供 AJAX call AJAX請求 The result from this call is an HTML fragment and is inserted 結(jié)果從這一呼吁是一個HTML片段 ， 并插入 directly into the contents of a given target div. 直接進入內(nèi)容某一目標(biāo)股利。 Non-unique 非

43、唯一 means that the result will be cached at the client minimally 也就是說 ， 結(jié)果將是存儲在客戶端微 and at the server too if you have coded your remote handling 并在服務(wù)器上太如果您有編碼您的遠(yuǎn)程處理 page to serve cached results. 網(wǎng)頁服務(wù)緩存結(jié)果。 Unique rendered AJAX 提供獨特的AJAX call 呼叫 The result from this call is an HTML fragment and is inse

44、rted 結(jié)果從這一呼吁是一個HTML片段 ， 并插入 directly into the contents of a given target div. 直接進入內(nèi)容某一目標(biāo)股利。 The goal is to 我們的目標(biāo)是 serve the latest information or information which is volatile so 提供最新的信息或資料 ， 這是不穩(wěn)定的 ， 使 each request is not cached by the browser or the server. 每個請求不是緩存的瀏覽器或服務(wù)器上。 Non-unique functional

45、 非獨特功能 AJAX call AJAX請求 Results from this call is either a simple result or a complex 結(jié)果 ， 這一呼吁是不是一個簡單的結(jié)果或一個復(fù)雜的 object in either XML or a custom string to be parsed by the 對象的XML或自定義字符串解析的 client. 客戶端。 Non-unique means that the result will be cached at the 非唯一手段 ， 其結(jié)果將在緩存 client minimally and at the

46、 server too if you have coded your 客戶最低限度 ， 并在服務(wù)器上太如果您有您的編碼 remote handling page to serve cached results. 遠(yuǎn)程處理服務(wù)網(wǎng)頁緩存結(jié)果。 Unique functional 獨特的功能 AJAX call AJAX請求 Results from this call is either a simple result or a complex 結(jié)果 ， 這一呼吁是不是一個簡單的結(jié)果或一個復(fù)雜的 object in either XML or a custom string to be parse

47、d by the 對象的XML或自定義字符串解析的 client. 客戶端。 The goal is to serve the latest information or 我們的目標(biāo)是提供最新的信息或 information which is volatile so each request is not cached by 這是不穩(wěn)定的信息 ， 使每個請求不緩存 the browser or the server. 瀏覽器或服務(wù)器上。 To begin, you must include the prototype.js libraries if you havent already don

48、e so: 首先，你必須包括prototype.js圖書館如果你還沒有這樣做的： 1.6.0/lib/prototype.js “ ” “ /腳本” This currently loads the current version of the library (at this point 1.6.0). 這目前加載當(dāng)前版本的庫（在這一點上1.6.0 ） 。 Rendered results 提供結(jié)果 Rendered results require the user of the prototype function AJAX.Updater which looks 結(jié)果需要提供用戶的原型功

49、能 AJAX.Updater看起來 like this: 像這樣： var reportError = function (t) 變種 reportError =功能（噸） （ alert( Error + t.status + - + t.statusText); 警報（ 錯誤 + t.status + - + t.statusText ） ; ） function getHelp(helptext) 功能 getHelp （ helptext ） （ var url = index.cfm?fuseaction=cpd.gethelp ; 變種 網(wǎng)址= index.cfm ？ fuseac

50、tion = cpd.gethelp ; var params = &helptype= +helptext; 變種 參數(shù)= helptype = + helptext ; var ajax = new Ajax.Updater 變種 阿賈克斯=新Ajax.Updater ( （ myDivId , myDivId ， url, 網(wǎng)址， method: get , （ 方法： get 一樣， parameters: params, 參數(shù)：參數(shù)， onFailure: reportError, onFailure ： reportError ， ） ); ） ; ） Breaking this

51、down into more manageable chunks we see three parameters passed to the 打破這種下降到更便于管理塊 ， 我們看到三個參數(shù)傳遞給 function. 功能。 The first is the container to be updated on successful completion of the 首先是容器更新圓滿完成 request; the second is the URL of the remote page to retrieve the rendered HTML and 要求;第二的網(wǎng)址是遠(yuǎn)程頁面取回所提供

52、的HTML和 lastly, the options parameter which is further broken down into three elements. 最后，選擇參數(shù) ， 這是進一步細(xì)分為三個部分組成。 Method 方法 specifies that the parameters should be submitted using get as opposed to post. 指定的參數(shù)應(yīng)當(dāng)提交使用 ， 而不是讓后。 Parameters is a query string beginning with an ampersand eg “&id=1” and last

53、ly 參數(shù)是一個查詢字符串的開頭的符號如“ 編號= 1 ”和最后 onFailure names a function to execute should there be a transmission error with the onFailure名稱來執(zhí)行一個函數(shù)應(yīng)該有一個傳輸錯誤的 AJAX call. AJAX請求。 It is as simple as that to serve up a rendered chunk of HTML content! 它是那樣簡單的服務(wù)提供了一個大塊的HTML內(nèi)容！ The scriptaculous 該scriptaculous wiki at

54、 在維基 http:/wiki.script.aculo.us/scriptaculous/show/Ajax.Updater has a more in depth http:/wiki.script.aculo.us/scriptaculous/show/Ajax.Updater有一個更深入 outline of the parameters if you need further information. 大綱參數(shù)如果您需要進一步的信息。 Functional results 功能結(jié)果 Functional results require the user of the prototyp

55、e function AJAX.Request which looks 功能結(jié)果需要用戶的原型功能 AJAX.Request看起來 like this: 像這樣： var handlerFunc = function (t) 無功 handlerFunc =功能（噸） （ /handle result / /處理結(jié)果 ） var reportError = function (t) 變種 reportError =功能（噸） （ alert( Error + t.status + - + t.statusText); 警報（ 錯誤 + t.status + - + t.statusText ）

56、 ; ） function checkAvailability(activity_code) 功能 checkAvailability （ activity_code ） （ var url = index.cfm?fuseaction=cpd.checkAvailability ; 變種 網(wǎng)址= index.cfm ？ fuseaction = cpd.checkAvailability ; var params = &activity_code= +helptext; 變種 參數(shù)= activity_code = + helptext ; new Ajax.Request( 新 Ajax.Request （ url , 網(wǎng)址 ， parameters: params , （ 參數(shù)： 參數(shù) ， onSuccess:handlerFunc, onSuccess ： handlerFunc ， onFailure:errFunc ); onFailure ： errFunc ） ） ; ） The major difference between this and the AJAX.Updater function is that there is no 主要的區(qū)別和AJAX.Updater功能是沒有 container pa