Ajax mode and best practice
Chapter III Content Partition Mode
3.1 Purpose
The content block mode makes the incrementally established HTML pages, thus allowing the distributed HTML page logic part to exist, and the user can determine the time and logic of the load.
3.2 motive
In the early stage of Web Design, HTML content designers create some incomplete documents, which make them complete through document links. Complete document is the sum of all pages in the document tree.
Think about the example below: Use the web, you can paste the article in a large number of magazines together, do not need to complete a book in a continuous manner. But don't want magazines, you need to look at the page next page; the web allows you to click on the link to jump to different content. Over time, the Web site has changed from the distributed web structure into a strict hierarchical independent structure.
Figure 3-1 depicts a strict level of independent Web site examples.
In Figure 3-1, the Web site is divided into two areas: the navigation area of the blue background and the content area of the brown background. When the user clicks on the navigation link, the content will change. But the problem is that the entire page is reloaded, even if the user only cares about the content area of the brown background. One is not a good solution is to use HTML Frame, then the navigation area is a frame, and the content area is an Frame. When you click on the link of the navigation area, only the content area frame is changed. However, although Frame can solve the problem of independent loading, it is problematic from the navigation and user interface. Therefore, the Web site gradually does not use Frame.
Ideally, the website developer wants to change the content that needs to be updated without the need to be updated. After all, the content that does not involve still works.
Target content
Navigation Bar
Figure 3-1 Strict layered Web site
3.3 Applicability
Using the contents of the following cases:
l Due to the characteristics of the website, it cannot be known that the HTML page is really like. As shown in Figure 3-1, there is a navigation area of a blue background and a content area of a brown background. The content of each area is unknown, but the area where the content is stored is known.
l The amount of content to download is too large and the user waits for a long time. For example, a search will collected all the elements found to become a result set, which is not good because users need to wait for a long time. A better way is to show the currently found content while continuing to search.
l The content to display is not related. Yahoo, MSN and EXCITE are portal applications that display irrelevant content. If the content is generated into a separate HTML page, the server logic has to contain a large number of decision data blocks to confirm whether the content needs to be loaded. A better way is to consider each piece of the content as a separate piece and then load it separately.
3.4 Association mode
The content block mode is the core mode of any Ajax application, and even considers that the content block mode is a perfect match Ajax application. Even so, distinguish and define the contents of the content block mode. The uniqueness of the content block mode is that it always follows the same process: generating events, request, response, and block injection. Other modes in the book are also very similar, but the opposite is that if a request is sent, it is not a timely response (for example, a persistent communication mode).
3.5 architecture
The architecture of the content block mode is relatively simple. The client accesses the URL, the server is returned to the content received and processed by the client. The implementation of the content block mode is generally followed:
1. After clicking the "button" or load the HTML page, generate the corresponding event;
2. Event calling a method, this method is responsible for creating the URL to send a request to the server;
3. The server side receives the request and the joint request content is returned to the client as a response;
4. The client receives a reply and injects it into the HTML page. 3.5.1
Execution order in web applications
As previously Figure 3-1, the strict hierarchical structure of the Web site is not very bad. As for HTML, this strict result is a step in which the content is generated, which will cause many problems. Traditional applications are in this way as shown in Figure 3-2.
Figure 3-2 Traditional client applications
In Figure 3-2, RealPlayer is an example of traditional client application that mixes new HTML type technology and traditional interface elements. Click on the "Burn Your CD" button, RealPlayer plays the CD, but does not affect the advertisement of the upper part of this app is playing. The logic associated with the advertisement and the logic of playback CD is independent. Different logical pieces occur in the same window.
Figure 3-3 Dividing the web application of Figure 3-1 into multiple different logical pieces.
Figure 3-3Web site architecture
As shown in Figure 3-3, there are multiple links in the original HTML page, such as links such as blogs and articles. The contents in the example have two execution modules: Get Navagition and Get Content (1, 2). Logic for generating Get Content1 and logic for generating Get Content2 is different. When generating an HTML page, the logic of Get Navagition is executed when performing any Get Content1 and Get Content2. This means that the logic Get Navagition will be executed multiple times, and each time it produces the same data. Some readers may think that Get Navagition produces different data (eg opens different folders), but actually the same data exists in different formats. In short, it should be avoided to produce internal data redundancy.
The solution is to use dispersion logic to generate an HTML page by a schema similar to Figure 3-4.
Figure 3-4 Improved Web Site Structure
In Figures 3-4, the HTML page is the result of the combination of multiple server logic pieces. When the main contour of the HTML page is loaded, the XMLHttpRequest object will re-get the Get Navigation, Get Content 1, and Get Content 2. How to get a single content block relies on events and links generated by the content block. Each content block is a separate request for XMLHttpRequest type object processing.
The architecture this claims has the following advantages:
l The client only downloads the content you must, you don't have to get any content blocks that have been used;
l Structure is divided into different code blocks, which can be dynamically combined in different environments;
l Structure Similar to a traditional client, those elements suitable for manipulating events;
l Because the generated code block represents the appearance of the page for the parent HTML page for the content data block, the entire appearance does not seem to be affected.
As explained in Figure 3-4, the origin of the content block mode is explained: a separate HTML page is accumulated in many content blocks, which are individually referenced and loaded.
3.5.2
Define the content in the content block
The content block referenced by the XMLHttpRequest object can be in the form of any client and server. Regardless of whether the server is sent, it must be a client to understand. As shown in Figure 3-4, since the data block is directly injected into the HTML page, the content data block will exist in HTML, although HTML is not a unique format of the server-side transmission and reception.
This chapter involves the following format:
l HTML: The server side directly sends an HTML to the client. The received HTML does not need to be processed, injecting it directly into the HTML page. This is a blind process method because the client does not know what HTML has done, only knows it into a certain piece of HTML. Direct injection of HTML is a very secure and simple content building. The client does not need to do any processing, just need to know the destination area of HTML content. If you need to process, the received content (if it is XML) will be used as an active instance object model. Using an instance object model, you can manually operate the received HTML content. HTML content is recommended to send to the client should comply with XHTML (implement a specific XML specification HTML) format or at least in accordance with the XML format. l Picture: Since the picture is a binary format, and the XMLHttpRequest object cannot handle binary data, it is impossible to send images directly. In particular, the references of the picture are injected into the HTML document as an HTML tag, causing a remote image. If the data encodes and decodes in base64 format, binary data can be downloaded and referenced. However, it is not recommended to direct binary data directly, because more problems will occur after use, more problems solved by using this method.
l JavaScript: The server side can send JavaScript to the client. The client uses the EVAL statement in JavaScript to execute JavaScript; and for further processing, the client can send a long-lasting JavaScript object to the server. The first feeling of performing any JavaScript is security issues. This is not very special, because the JavaScript engine in all browsers has the same origin and sandbox mechanism. If there is a bug in the JavaScript engine, the JavaScript that sends arbitrarily execute will generate security issues. If you need to dynamically and increase the client logic loaded when loading an HTML initialization page, send JavaScript is suitable. In the case where the client is not realized, this is an effective way to enhance the client function. For example, the authentication of the HTML form element. Since different users have different confirmation methods, all confirmation methods are sent to the client unwanted. The solution is to let the user decide the HTML form element that needs to be displayed, and dynamically downloads the form element authentication method as the content block. But a pre-warning, the Sended JavaScript block enables the application system to be open to hackers. Therefore, please consider carefully before using this technology.
l XML: The use of XML to send and receive is the preferred way. The client can use the XML object model to convert and parse XML; or convert the XML into other objects, such as HTML using the extended form language conversion library. The preferred XML reason: XML is a well-known technology, and the tool for manipulating XML has the advantages of detailed and stable operation. XML is a very well-defined technology that uses this technology, you don't need to write additional code to search, segment, block, duly, and verify. Due to square brackets and other XML characters, some people think that XML is very heavy. However, the advantage is that when the server-side application generates XML, it is possible to process clients based on a web browser and non-GUI browser. How to resolve XML and process what information is completely dependent on the client, as long as the client can resolve XML. Use XML should be flexible. Throughout the book, XML is widely used and is used as a primary data exchange format.
There are other data exchange formats, such as JavaScript Object Note (JSON) 1. However, when choosing other formats, it is recommended to consider using the consequences they generated. However, for our current design, some are not suitable. Regarding other data exchange formats, for me, they cannot provide a powerful development environment like processing, lookup, verification, and XML. For example, using XPath i does not need to parse the entire XML document, you can search for specific elements in XML. It is also acknowledged that in some cases, XML performance is not as good as JSON. For many readers, they don't care about XML, determine that they don't need these, JSON may be better technology. However, in other chapters of this book, there is no other technique, such as JSON. Since this structure has already been known, you will see some instances that implement this structure.
