《高级Web技术》参考资料：3-应用web_5-J2EE框架_阅读参考资料_ajax+J2EE_materials_How_to_Design_a_large_AJAX_Application.pdf_大学文库

Adam howitt Duo Consulting 7/7/20061223PN How to Design a large AJAX Application Introduction I'll cover the process I have developed in the course of implementing two AJAX applications as a developer for Duo Consulting in Chicago. This approach has made it easier for me to work with the design team, produce estimates for this type of project and communicate what is involved each step of the way to the project managers for scheduling purposes Background experimenting with AJAX requests to handle tasks that really shouldnt trigger sun I re-designed WalkJog Run to utilize the Google maps API over a year ago and beg complete page request. Shortly after that one of our clients, Chicago Park District wanted to redesign their seasonal registration application to maximize the number of people who could register for their seasonal programs and make it easier for people to use the site. After a detailed discovery phase we proposed an AJAX browser interface to make it simpler to drilldown through their online offerings and ultimately to locate a program and register. Inspired by the iPod menu concept, we developed and built ar applicationwhich served 3000 orders in the first 3 minutes of summer registration Since then I worked on a second application which sits on top of the custom CMs we implement for clients to allow them to generate Microsoft Word proposals to send to clients from the data that drives the website without cutting and pasting. This application was built on the prototype AJAX library but uses the same design principles Why use AJAX? AJAX isn't just a new buzzword or a cream cleanser from Procter& Gamble. It's a great leap forward(and a small step back) for usability. Like flash, when it is used correctly and appropriately it can dramatically enhance the user experience by making web applications respond faster and make interactions less jarring than having a page reload AJAX also offers a performance benefit for your web server since you begin serving smaller chunks of pages instead of complete pages every time. For Cold Fusion this also means only the business logic pertaining to the requested chunk needs to be recalculated instead of the logic for a whole page so your application server will get some relief. Ihttp://www.duoconsulting.com/ http://www.walkiogrun.net shttp://www.google.com/apis/maps/ http://duoconsulting.com/experience/chicago-park-district-registration/index.cfm http://programs.chicagoparkdistrictcom/programbrowserl http://www.duocms.com httpgeneratorduodesign.com:sElecttheproposalgeneratoronceyouhaveloggedinwiththeusername demo(@duoconsulting com and password demo 1/8

Adam Howitt Duo Consulting 7/7/2006 12:23 PM How to Design a large AJAX Application Introduction I’ll cover the process I have developed in the course of implementing two AJAX applications as a developer for Duo Consulting 1 in Chicago. This approach has made it easier for me to work with the design team, produce estimates for this type of project and communicate what is involved each step of the way to the project managers for scheduling purposes. Background I re-designed WalkJogRun 2 to utilize the Google maps API 3 over a year ago and begun experimenting with AJAX requests to handle tasks that really shouldn’t trigger a complete page request. Shortly after that one of our clients, Chicago Park District4 , wanted to redesign their seasonal registration application to maximize the number of people who could register for their seasonal programs and make it easier for people to use the site. After a detailed discovery phase we proposed an AJAX “browser interface” to make it simpler to drilldown through their online offerings and ultimately to locate a program and register. Inspired by the iPod menu concept, we developed and built an application5 which served 3000 orders in the first 3 minutes of summer registration. Since then I worked on a second application which sits on top of the custom CMS6 we implement for clients to allow them to generate Microsoft Word proposals7 to send to clients from the data that drives the website without cutting and pasting. This application was built on the prototype AJAX library but uses the same design principles. Why use AJAX? AJAX isn’t just a new buzzword or a cream cleanser from Procter & Gamble. It’s a great leap forward (and a small step back) for usability. Like flash, when it is used correctly and appropriately it can dramatically enhance the user experience by making web applications respond faster and make interactions less jarring than having a page reload. AJAX also offers a performance benefit for your web server since you begin serving smaller chunks of pages instead of complete pages every time. For ColdFusion this also means only the business logic pertaining to the requested chunk needs to be recalculated instead of the logic for a whole page so your application server will get some relief. 1 http://www.duoconsulting.com/ 2 http://www.walkjogrun.net 3 http://www.google.com/apis/maps/ 4 http://duoconsulting.com/experience/chicago-park-district-registration/index.cfm 5 http://programs.chicagoparkdistrict.com/programBrowser/ 6 http://www.duocms.com 7 http://generator.duodesign.com : Select the proposal generator once you have logged in with the username demo@duoconsulting.com and password demo 1/8

Duo Consulting 7/7/20061223PN 5. getHelp(helptopic) 6. view ProgramDetails(activity code) 7. save Towishlist(activity code) 8. check Availability(activity code) 9. addTocart(activity code, participant) 10. cancelRegistration(activity code) 11. load WishlistScreen(mode) 12. load WishlistScreen(mode) 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 Interactions Identify each interaction(a function) and work out the parameters required to allow the function to work as an isolated item. Functions should be able to perform their task without going beyond global variables and the argument scope in most cases. Create a text file and group the function specifications based on the discreet areas of the application e.g. cart, wishlist, account, help. Add JavaScript comments to describe the interaction and include any pseudo code to describe the steps for a function where there are important validation tests, lookups or steps to be performed Are there any panels of the site which have related Java Script functions that are repeated? Whether an undefined number of repeats or a defined number it is preferred to build a JavaScript object. This reduces code duplication, provides variables local to each instance and generally makes things easier. Prefix functions that act on a specific instance of a panel with the name of the panel e.g. Cart: function deleteltemO Look at the interactions which fetch remote data(make an AJAX call). Think about each in turn and make a decision whether each request must be unique(e.g. get user cart)or whether the information doesnt change at all (e.g. get help panel). Update the comments for each function making a remote call to explain that it is remote and indicate if it is unique or not Next, consider the types of remote call you are making. Is the complete result sent back from the remote page as rendered hTmL (rendered result) which can be inserted directly into a destination panel or will the result contain JavaScript variables, XML or a custom structured result(functional result) to be processed in a specific way? An example of rendered result is that a help file chunk can be simply rendered in a given Div element so it is sent back as HTML; a functional result example would be a remote address lookup function where you send an address and receive back a complex object to be inspected which then updates various fields on a form. Add a comment to each AJAX call to say whether the result is rendered or functional Now is probably a good time to walk through your design with another programmer and the designer to make sure you understood the designer's intentions and make sure that your approach isn't missing some obvious efficiencies. An example design document for 3/8

Adam Howitt Duo Consulting 7/7/2006 12:23 PM 5. getHelp(helptopic) 6. viewProgramDetails(activity_code) 7. saveToWishlist(activity_code) 8. checkAvailability(activity_code) 9. addToCart(activity_code,participant) 10. cancelRegistration(activity_code) 11. loadWishlistScreen(mode) 12. loadWishlistScreen(mode) 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 interactions. Identify each interaction (a function) and work out the parameters required to allow the function to work as an isolated item. Functions should be able to perform their task without going beyond global variables and the argument scope in most cases. Create a text file and group the function specifications based on the discreet areas of the application e.g. cart, wishlist, account, help. Add JavaScript comments to describe the interaction and include any pseudo code to describe the steps for a function where there 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? Whether an undefined number of repeats or a defined number it is preferred to build a JavaScript object. This reduces code duplication, provides variables local to each instance and generally makes things easier. Prefix functions that act on a specific instance of a panel with the name of the panel e.g. Cart:function deleteItem() Look at the interactions which fetch remote data (make an AJAX call). Think about each in turn and make a decision whether each request must be unique (e.g. get user cart) or whether the information doesn’t change at all (e.g. get help panel). Update the comments for each function making a remote call to explain that it is remote and indicate if it is unique or not. Next, consider the types of remote call you are making. Is the complete result sent back from the remote page as rendered HTML (rendered result) which can be inserted directly into a destination panel or will the result contain JavaScript variables, XML or a custom structured result (functional result) to be processed in a specific way? An example of a rendered result is that a help file chunk can be simply rendered in a given DIV element so it is sent back as HTML; a functional result example would be a remote address lookup function where you send an address and receive back a complex object to be inspected which then updates various fields on a form. Add a comment to each AJAX call to say whether the result is rendered or functional. Now is probably a good time to walk through your design with another programmer and the designer to make sure you understood the designer’s intentions and make sure that your approach isn’t missing some obvious efficiencies. An example design document for 3/8

Adam howitt Duo Consulting 7/720061223PM Again, this is by no means complete but gives you an idea of the pre-work to do at this Coding the application The first thing you will want to do is to take each of the sections of your JavaScript design document and make each section its own js file to be included in the head of you document. Smaller chunks make it more obvious where to look when you are trying to debug the application You will need to work through each of those files next and flesh out the JavaScript. If possible, start with the panels least connected and work your way to the most connected panels Assuming all went according to plan during the review how exactly do you make the different types of AJAX calls mentioned above? To recap Non-unique rendered The result from this call is an HTML fragment and is inserted AJAX cal directly into the contents of a given target div. Non-unique means that the result will be cached at the client minimally and at the server too if you have coded your remote handling page to serve cached results Unique rendered AJAX The result from this call is an HTML fragment and is inserted directly into the contents of a given target div. The goal is to serve the latest information or information which is volatile so each request is not cached by the browser or the server Non-unique functional Results from this call is either a simple result or a complex AJAX call object in either XML or a custom string to be parsed by the client. Non-unique means that the result will be cached at the client minimally and at the server too if you have coded your remote handling page to serve cached results Unique functional Results from this call is either a simple result or a complex AJAX call object in either XML or a custom string to be parsed by the client. The goal is to serve the latest information or information which is volatile so each request is not cached by the browser or the server To begin, you must include the prototype. js libraries if you havent already done so This currently loads the current version of the library(at this point 1.6.0) 6/8

Adam Howitt Duo Consulting 7/7/2006 12:23 PM } Again, this is by no means complete but gives you an idea of the pre-work to do at this stage. Coding the application The first thing you will want to do is to take each of the sections of your JavaScript design document and make each section its own .js file to be included in the head of your document. Smaller chunks make it more obvious where to look when you are trying to debug the application: You will need to work through each of those files next and flesh out the JavaScript. If possible, start with the panels least connected and work your way to the most connected panels. Assuming all went according to plan during the review how exactly do you make the different types of AJAX calls mentioned above? To recap: Non-unique rendered AJAX call The result from this call is an HTML fragment and is inserted directly into the contents of a given target div. Non-unique means that the result will be cached at the client minimally and at the server too if you have coded your remote handling page to serve cached results. Unique rendered AJAX call The result from this call is an HTML fragment and is inserted directly into the contents of a given target div. The goal is to serve the latest information or information which is volatile so each request is not cached by the browser or the server. Non-unique functional AJAX call Results from this call is either a simple result or a complex object in either XML or a custom string to be parsed by the client. Non-unique means that the result will be cached at the client minimally and at the server too if you have coded your remote handling page to serve cached results. Unique functional AJAX call Results from this call is either a simple result or a complex object in either XML or a custom string to be parsed by the client. The goal is to serve the latest information or information which is volatile so each request is not cached by the browser or the server. To begin, you must include the prototype.js libraries if you haven’t already done so: This currently loads the current version of the library (at this point 1.6.0). 6/8