| "This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs for the special pre-order price, " " for more information. Aimed at everyone from enterprise developers to self-taught scripters, Real-World AJAX: Secrets of the Masters is the perfect book for anyone who wants to start developing AJAX applications." " In the MainPage-9.html, we add a new link called "Save" in the top toolbar. It's used to save the changes made by the user using an AJAX request. " " Refer to the implementation of the "save" method in the MainPage-9.html. It constructs a request object. It sets the service specification using a "setServiceSpec" method. It also sets the "xmlDoc" of the request to the change list retrieved from the form. The "processRequest" method sends the service specification as one of the parameters of the URL request and "xmlDoc" as the body of the POST request. The "save" method and resulting URL request are shown in Listing 5.22. " " Figure 5.7 shows the change list XML sent by the client in the request's body: " " Below is the URL. Notice that the service specification is sent as one of the parameters of the URL. The name of the parameter is "service_spec." " " The following is the XML document received by the server in the body of the POST request: " " Notice that the XML documents on the client and the server are consistent. The server can process the XML documents as it wishes. This concludes our end-to-end discussion of an AJAX UI scenario. In the process we demonstrated how to structure AJAX pages (code) and how to make use of the MVC pattern for cohesive working of these pages. " " We discussed the View implementation using an HTML template. This is a key reason that AJAX is such a compelling rich client technology. As the next step, it might be desirable to parameterize the templates so they can be applied repeatedly. This can be done in an AJAX UI, albeit differently. Once a pattern is standardized as an HTML template, JavaScript code can be used to render it in the client space based on a set of parameters." " Let's see this using an example that renders a form on the client side. The ProjectSummary.html is a form template. The HTML fragment that renders the form is shown below. It uses an HTML table element with two columns for the form. The first column displays the labels and the second column displays the fields. " " We provide an additional method called "render" in our Form class to render the form based on the list of its components. The "render" method of the Form is shown in Listing 5.23. " " The following code shows the render method of one of the components (SelectComp). Refer to the source code for the implementation of the "render" method for other components. " " Based on the changes above, we can render our project summary form using JavaScript code without the HTML template. Refer to the ClientSideRenderer.html to see how a client-side renderer is used. The code that renders the form ... read the whole article |