Coldfusion Web Hosting - Java Programming - Cheap Web Hosting Blog

CHAPTER 3 CONTENT CHUNKING PATTERN nor accessible because the method getElementById returns only a single HTML element instance. Unlike the getElementsByTagName method, the returned element is not guaranteed to be a certain type other than having the parameter identifier equal to the id attribute. As a result, the object model referenced after the getElementById method may or may not apply to the found element. In the case of the property innerHTML, that is not a problem because virtually all visible elements have the innerHTML property. What could be more problematic is if the identifier assumed the retrieved element were a table when in fact the element is a table cell. At that point, the object model referencing would result in an exception. When writing JavaScript code that dynamically retrieves an HTML element(s), it is a good idea to test the found element before manipulating it. As a rule of thumb, when using getElementsByTag, you know what the HTML elements are but do not know where they are or what they represent. When using getElementById, you know what the found HTML element represents and where it is, but do not know the type and hence the object hierarchy. Understanding the Special Nature of innerHTML The property innerHTML is special in that it seems simple to use but can have devastating consequences. To illustrate the problem, consider the following HTML code: GoodReplace BadReplace TestTable

If you are in need for cheap and reliable webhost to host your website, we recommend http web server services.

CHAPTER 3 CONTENT CHUNKING PATTERN In the implementation of the anonymous function for the asynchronous.complete method, two methods (getElementsByTagName, getElementById) are used to inject content into a Dynamic HTML element. The two methods retrieve an element(s) that represents a starting point. The method getElementsByTagName retrieves all HTML elements of the type specified by the parameter to the method. In the example, the parameter is table, which indicates to search and retrieve all table elements in the HTML document. Returned is an instance of HTMLCollectionof all HTML elements, and in the case of the example contains all of the tableelements. The class HTMLCollection has a property, length, that indicates how elements have been found. The found elements can be referenced by using the JavaScript array notation (square brackets), where the first element is the zeroth index. In the example, right after the method identifier getElementsByTagName(”table”) is a set of square brackets ([0]) used to retrieve the first element from the collection. The zeroth index is arbitrarily referenced, meaning the first found table is referenced. In the example, some index was used. The correct index is referenced because the example HTML page only has a single table; therefore, the zeroth index will always be the correct index, meaning that the correct table, row, and cell are referenced. However, imagine a scenario of multiple tables. Then, referencing an arbitrary index may or may not retrieve the correct table. Even worse, if the Content Chunking pattern were called multiple times, the order of the found element collection could change and reference elements that were not intended to be referenced. The method getElementsByTagName is best used when operations are executed on all found elements without trying to identify individual elements. Examples of such operations include the addition of a column in a table and modification of a style. The method getElementById is best used when an individual element needs to be manipulated. It is possible when using the method getElementsByTag to retrieve all elements in the HTML document, as illustrated in the following example: var collection = document.getElementsByTag(”*”); When the method getElementsByTag is called with an asterisk parameter, it means to return all elements of the HTML document. Some may note that using the property document.all does the exact same thing. Although this is true, it is not DOM compliant and will generate a warning by any Mozilla-based browser. Focusing on the following code from the example: document.getElementsByTagName(”table”)[ 0].rows[ 0].cells[ 0].innerHTML The identifiers after the square brackets of the method getElementsByTagName represent a series of properties and methods that are called. These properties and methods relate directly to the object retrieved, which in this case is a table that contains rows, and the rows contain cells. Had the retrieved element not been a table, the calling of the properties and methods would have resulted in an error. Again from the example source code, let s focus on the following: document.getElementById(”insertplace”).innerHTML = responseText; The method getElementById retrieves an HTML element with an id attribute identical to the parameter of the method. The id attribute and parameter are case-sensitive. The result of the method getElementById is to retrieve the td tag with the id attribute value insertplace. When using the method getElementById, if there are multiple items with the same identifier on the HTML page, then only the first found element is retrieved. The other elements are not returned
From our experience, we are can tell you that you can find a reliable and cheap webhost service at Java Web Hosting services.

CHAPTER 3 CONTENT CHUNKING PATTERN The server-side web application programmer would not need to be concerned with the look of the HTML page, because the generated content does not contain any information that affects the look and feel. For testing purposes, the web application programmer focuses on logic, whereas the HTML designer focuses on look and workflow. Injecting Content by Using Dynamic HTML The magic of the example is the ability of Dynamic HTML to dynamically insert content in a specific location. Before Dynamic HTML, you would have to use frames or server-side logic to combine the multiple streams. In recent years, Dynamic HTML has been formally defined by the World Wide Web Consortium (W3C) in the form of the HTML Document Object Model (DOM). The W3C HTML Document Object Model is not as feature rich as the object models made available by Microsoft Internet Explorer and Mozilla-derived browsers. For the scope of this book, the object model used is a mixture of the W3C HTML Document Object Model and functionality that is available to most browsers (for example, Mozilla-derived browsers and Microsoft Internet Explorer). Going back to the previous example, the attribute id uniquely identifies an element in the HTML page. Using the uniquely identified element, a starting point is described from where it is possible to navigate and manipulate the HTML object model. The other way to find a starting point is to explicitly retrieve a type of tag and then find the HTML element that provides the starting point. Regardless of which approach is used, one of these two ways must be used to retrieve a starting point. Some readers may say that you could use other properties or methods, but those properties and methods are considered non-HTML-DOM compliant and hence should be avoided. The following HTML code illustrates how to find a starting point using the two approaches:

In case you need affordable webhost to host your website, our recommendation is ecommerce web host services.

CHAPTER 3 CONTENT CHUNKING PATTERN

In the HTML code, the class Asynchronous is instantiated and the asynchronous.complete property is assigned a function callback. How the Asynchronous class works and which properties need to be assigned was discussed in Chapter 2. The instantiation of asynchronous occurs as the HTML page is loading. After the page has loaded and is complete, the event onload is executed which is the event step of the pattern implementation. The onload event calls the asynchronous.call method to execute an XMLHttpRequest request to download an HTML chunk which is the request step of the pattern implementation. After the request has completed, a response is generated that when received by the client results in the method asynchronous.complete being called. The received response is the response step of the pattern implementation. In the example, the method asynchronous.complete is assigned an anonymous JavaScript function. In the implementation of the anonymous function, the method getElementById is called to insert the XMLHttpRequest results into an HTML element. The HTML element is located by the identifier insertplace, which happens to be the HTML tag td. The referencing of the Dynamic HTML element and its assignment using the innerHTML property is the HTML injection which represents the injection step of the pattern implementation. In the example, it is odd that after the HTML page is downloaded, processed, and considered complete, another piece of logic is called. The other piece of logic is used to retrieve the rest of the content in the form of a chunk. The server-side code could have generated the complete page in the first place. However, it was illustrated in this fashion to show how simple the implementation of the Content Chunking pattern can be. The example illustrated reacting to the onload page event, but any event could be used. For example, examples in Chapter 2 used the button onclick event. A script could even simulate events by using the Click() method. This example illustrated separation of the HTML page s appearance from its logic. The framework HTML page could be realized by an HTML designer. For the area where content is injected, the HTML designer would need only to add a placeholder token identifier such as Nothing. A server-side web application programmer creates the generated content that replaces the placeholder. The HTML designer would not need to be concerned with any server programming technology because the framework HTML page would contain only client-side instructions.
In case you need quality webspace to host and run your web applications, try our personal web hosting services.

CHAPTER 3 CONTENT CHUNKING PATTERN XML: The preferred approach is to send and receive XML. The XML can be transformed or parsed on the client side by manipulating the XML object model, or an Extensible Stylesheet Language Transformations (XSLT) library can be used to transform the XML into another object model such as HTML. The reason XML is preferred is that XML is a known technology and the tools to manipulate XML are well defined, working, and stable. XML is a very well established technology that you can search, slice, dice, persist, and validate without having to write extra code. Some do consider XML heavy because of the angle brackets and other XML character tokens. The advantage, though, is that when a server-side application generates XML, it can be processed by a web-browser-based client or a non-GUI-based browser. The choice of how to parse the XML and what information to process depends entirely on the client, so long as the client knows how to parse XML. XML is flexible and should be used. Throughout this book, XML will be used extensively and is considered the premier data exchange format. There are other data exchange formats, such as JavaScript Object Notation (JSON).1 However, I advise when those formats are chosen that you carefully consider the ramifications. It is not that I find them badly designed or improper. What concerns me about these other data exchange formats is that they do not provide as extensive an environment as XML for processing, searching, validating, and generating. For example, using XPath I search for specific elements in XML without having to parse the entire XML document. Granted, XML might in certain conditions not have the same performance levels as, let s say, JSON. For those readers who do not care whatsoever for the diversity of XML and are sure that they will never need it, JSON might be the right technology. However, I do not cover other technologies such as JSON in the scope of this pattern or in the rest of the book. Now that you understand the architecture, you re ready to see some implementations that demonstrate how that architecture is realized. Implementation When implementing the Content Chunking pattern, the sequence of steps outlined earlier needs to be followed (event, request, response, and injection). The logic is easily implemented by using the Asynchronous type, because the Asynchronous type can be called by an HTML event and there is an explicit response method implementation. The example implementations that follow will illustrate how to generate the events by using HTML, call the functions, generate requests by using XMLHttpRequest, and process responses by using Dynamic HTML and JavaScript techniques. Implementing the HTML Framework Page The implementation of the Content Chunking pattern requires creating an HTML page that serves as the framework. The idea behind the framework page is to provide the structure into which content can be chunked. The framework page is the controller and provides a minimal amount of content. The following HTML code is an example HTML framework page that will dynamically inject HTML content into a specific area on the HTML page: 1. http://www.crockford.com/JSON/index.html
You want to have a cheap webhost for your apache application, then check apache web hosting services.

CHAPTER 3 CONTENT CHUNKING PATTERN 59 Defining the Content Within a Content Chunk The content chunks referenced by the XMLHttpRequest object can be in any form that both the client and server can understand. Whatever the server sends must be understood by the client. In Figure 3-4, the content chunks would be in HTML because the chunks would be injected directly into the HTML page. HTML, though, is not the only format that can be sent to and from the server. The following formats are covered in this chapter: HTML: The server can send HTML to the client directly. The received HTML would not be processed, but injected directly into the HTML page. This is a blind processing approach in that the client has no idea what the HTML does, and knows only that it should be injected into a certain area of the HTML document. Injecting HTML directly is a very simple and foolproof way of building content. The client has to do no processing and needs to know only the destination area of the HTML content. If processing is necessary, the received content (if it is XML compliant) would also be available as an instantiated object model. Using the instantiated object model, it is possible to manually manipulate the received HTML content. It is advised that the HTML content sent to the client be XHTML compliant (HTML that implements a particular XML schema) or at least XML compliant. Images: It is not possible to directly send images because images are binary, and the XMLHttpRequest object cannot process binary data. Typically, image references are sent as HTML tags that are injected into the HTML document, resulting in the remote image to be loaded. It is possible to download and reference binary data if the data has been encoded and decoded by using Base64 encoding. However, manipulating binary data directly is not recommended because that will create more problems than it solves. JavaScript: The server can send JavaScript to the client that can be executed by using the JavaScript eval statement, and the client can send persisted JavaScript objects to the server for further processing. A first impression may be that executing arbitrary JavaScript presents a security problem. It is not typically a problem because the JavaScript engines in all browsers use the same origin and sandbox policies. Sending arbitrary JavaScript to execute could be a security problem if there is a bug in the JavaScript engine. Sending JavaScript is desirable if you want to dynamically execute and add logic on the client that was not loaded when the initial HTML page was loaded. It is a very powerful method of enhancing the functionality of a client without the client having to be aware of that. For example, let s say an HTML form element needs validation. Because different users have different validations, it would not be desirable to send all validation implementations to the client. A solution would be to let the user decide which HTML form element they are presented with, and then dynamically download the validation of the form element as a content chunk. Be forewarned, though, that sending JavaScript chunks could open up your application to hackers. So think before using this technique.
Go visit our java server pages services for a reliable, lowcost webhost to satisfy all your needs.

CHAPTER 3 CONTENT CHUNKING PATTERN Figure 3-4. Improved website architecture In Figure 3-4, the HTML page is the result of multiple pieces of server-side logic. When the main outline of the HTML page has been loaded, the XMLHttpRequest object retrieves the content blocks Get Navigation, Get Content 1, and Get Content 2. When and how the individual content blocks are retrieved depends on the events and links created by the content blocks. Each content block is a separate request that needs to be called by the XMLHttpRequest type. The proposed architecture has the following advantages: The client downloads only what is necessary, when it is necessary. There is no need to re-retrieve a content block unless necessary. The architecture is separated into different code blocks that can be assembled dynamically in different contexts. The architecture resembles that of a traditional client in that only those elements that pertain to the event are manipulated. The overall look and feel is not affected because the generated code blocks delegate the look and feel to the parent HTML page retrieving the content blocks. Figure 3-4 shows how the Content Chunking pattern got its name: a single HTML page is the sum of its chunks of content, which are referenced and loaded separately.
Searching for affordable and proven webhost to host and run your servlet applications? Go to Linux Web Hosting services and you will find it.

CHAPTER 3 CONTENT CHUNKING PATTERN Figure 3-3. Website architecture In Figure 3-3, the original HTML page has links to two other pages that represent an example blog and article content. The example content has two execution blocks: Get Navigation and Get Content (1,2). The logic used to generate Get Content 1 is distinct from the logic used to generate Get Content 2. In the context of generating an HTML page, when either Get Content 1 or Get Content 2 is executed, the logic Get Navigation is executed. This means the logic Get Navigationis executed multiple times, generating the same data each time. Some readers might argue that different data is generated by Get Navigation (e.g., different folders are opened), but in fact it is the same data formatted a different way. In a nutshell, there is an inherent data- generation redundancy that should be avoided. The solution is to distribute the logic so that an HTML page is generated, by using an architecture similar to Figure 3-4.
From our experience, we can recommend PHP5 Web Hosting services, if you need affordable webhost to host and run your web application.

CHAPTER 3 CONTENT CHUNKING PATTERN Figure 3-2. Traditional client application In Figure 3-2, the RealPlayer is an example of a traditional client application that mixes newer HTML-type technologies with traditional user interface elements. Clicking the Burn Your CD button causes RealPlayer to burn your CD but does not affect the advertisement that is running at the top half of the application. The logic associated with the advertisement and the logic associated with burning the CD are two separate, distinct pieces of logic that happen to be sharing the same window area. Figure 3-3 dissects the web application of Figure 3-1 into distinct pieces of logic.
Searching for affordable and proven webhost to host and run your servlet applications? Go to Linux Web Hosting services and you will find it.

CHAPTER 3 CONTENT CHUNKING PATTERN When the displayed content is not related. Yahoo!, MSN, and Excite are portal applications displaying content side-by-side with other content that has no relation to it. If the content is generated from a single HTML page, the server-side logic would have to contain a huge decision block to know which content is loaded and not loaded. A better approach would be to consider each block of content as a separate piece that is then loaded separately. Associated Patterns The Content Chunking pattern is a core pattern to any Ajax application. You could even make the assertion that the Content Chunking pattern is implicit to Ajax. Be that as it may, it is still necessary to identify and define the context of the Content Chunking pattern. What makes the Content Chunking pattern unique is that it always follows the same steps: generated event, request, response, and chunk injection. The other patterns covered in this book are similar, but do take deviations such as sending a request and not getting an immediate response (for example, the Persistent Communications pattern). Architecture The architecture of the Content Chunking pattern is relatively simple. A URL is called by the client. The server responds with some content that is received and processed by the client. An implementation of the Content Chunking pattern always follows these steps: 1. An event is generated that could be the result of a button being clicked or of an HTML page being loaded. 2. The event calls a function that is responsible for creating a URL used to send a request to the server. 3. The server receives the request and associates the request with some content. The content is sent to the client as a response. 4. The client receives the response and injects the response in an area of the HTML page. Implementing Order in a Web Application Looking back at Figure 3-1, the strict hierarchical nature of the website is not a bad thing. With respect to HTML, the result of the strictness is to generate the content in one step, and this all- in-one generation causes problems. Traditional applications do not function in such a manner, as illustrated in Figure 3-2.
Check Tomcat Web Hosting services for best quality webspace to host your web application.