Developing Large Web Applications- P21

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:10

Thêm vào BST

Báo xấu

49
lượt xem 3
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Developing Large Web Applications- P21:This book presents a number of techniques for applying established practices of good software engineering to web development—that is, development primarily using the disparate technologies of HTML, CSS, JavaScript, and server-side scripting languages. Whereas there are many books on how to use languages, how to use libraries, and how to approach software engineering, this is the first book to codify many of the techniques it presents. These techniques will make the components of your own web applications more reusable, maintainable, and reliable....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Developing Large Web Applications- P21

public function set_mode_compact() { $this->class = "compact"; { public function set_mode_midsize() { $this->class = "midsize"; } public function get_content() { return
{ parent::__construct($page); $this->class = "pagint"; $this->ident = $this->class."def"; // Set up other members for configuring the paginator state based // on other arguments passed into the constructor for the module. ... { public function set_instance($instance) { $this->ident = $this->class.$instance; } public function get_content() { return
Example 7-13 illustrates the creation of two instances of the Paginator module within the New Car Search Results module. The creation of a module within another module proceeds exactly as within a page. Just remember that the first parameter passed to each module is the $page member of the enclosing module (as opposed to $this, which for pages is the page itself, but for modules is the module instance). Example 7-13. Creating nested paginators in the New Car Search Results module class NewCarSearchResults extends Module { ... public function get_content() { // Create a paginator to appear at the top of the search results. $mod = new Paginator($this->page, ...); $mod->set_instance("pri"); $pgnpri = $mod->create(); // Create an additional paginator module to appear at the bottom. $mod = new Paginator($this->page, ...); $mod->set_instance("sec"); $pgnsec = $mod->create(); // Call upon a private method to build the actual list of results. $results = $this->get_results(); return
CHAPTER 8 Large-Scale Ajax Ajax (Asynchronous JavaScript and XML) is not so much a new technology as a set of existing technologies used together in a new way, bound together by a mechanism that lets you communicate between the browser and server without reloading the entire page. In its most fundamental form, Ajax requires that you understand only one new piece: the XMLHttpRequest object in JavaScript (or its equivalent depending on the browser). This is the object that allows you to make a connection back to the originating server to request additional data. Once you receive the data, you can use it to adjust only the portion of the page that you need to update. Although the object’s name and the term “Ajax” itself imply that XML is the only format for exchanging data, there are others. JSON is especially good because it lets you pass a string of JavaScript on which you call json_parse (which you can download from http://json.org/json_parse.js), to yield a JavaScript object. Certain practices simplify working with Ajax. Usually, it’s helpful to load a library that abstracts the XMLHttpRequest object. Fortunately, there are several libraries that help with this. In addition, within the browser, the MVC design pattern is a good model for maintaining a clear separation between data changes and updates to a presentation. On the server, the same principles discussed in Chapter 6 for managing data for com- plete pages can also provide a good structure for data in Ajax requests. These ideas are captured in the following tenet from Chapter 1: Tenet 8: Large-scale Ajax is portable and modular, and it maintains a clear separation between data changes and updates to a presentation. Data exchange between the browser and server is managed through a clearly defined interface. This chapter is divided broadly into three sections: the first explores Ajax within the browser, the second explores Ajax on the server, and the third illustrates Ajax with MVC. We’ll begin by discussing the fundamentals of a simple Ajax transaction and look at comparisons between basic Ajax requests in some popular libraries. The libraries we’ll examine are Dojo, jQuery, Prototype, and YUI. On the server, we’ll ex- plore common formats for data exchange, server proxies, and techniques for handling Ajax requests in a modular fashion. Finally, we’ll look at a set of prototype objects in 185
JavaScript to support MVC and explore two examples of Ajax with MVC. One is a simple control panel that has multiple views; the other is an illustration of accordion lists. In the Browser Like most transactions that take place on the Web, Ajax transactions consist of two coordinated sets of operations: one in the browser and the other on the server. In this section, we look at some of the fundamentals for working with Ajax in the browser. Managing Connections Ajax employs JavaScript to establish a connection to the server from a web page and load additional data into the page. Example 8-1 demonstrates the JavaScript to establish the simplest of Ajax requests. The libraries that virtually all developers use hide most of these logistics, but you should understand them in order to use Ajax effectively. In the example, handleConnect is a method that you can call, perhaps triggered by an event handler, to initiate an Ajax request. As the “A” in Ajax signifies, requests are normally asynchronous (you do have the option to make them synchronous, but this is ill-advised), leaving your code with the job of determining when the response has arrived from the server. JavaScript offers this information as a state change in the re- quest. The handleConnect method creates an instance of the XMLHttpRequest object, specifies a method that JavaScript will call as the request’s state changes, configures the request, and, finally, sends the request. The handleRequest method in Example 8-1 is the method called whenever the state of the request changes. To make sure its operations take place when the request is in the right state—when data has arrived from the server—the method checks whether the readyState member is set to 4 and the status member is set to 200 (there are other states with other meanings, but we won’t explore those here). When the state is 4, the status is 200, and there is data from the server in XML format, the responseXML member will have been populated with a complete DOM constructed from the XML. In this case, you can use JavaScript DOM methods to access the data you need. For example, to get all elements that have a specific tag, you can invoke responseXML.getElementsByTagName. If the server sends plain text or text to be interpre- ted as JSON, the responseText member is populated with a string. If you expect a response in JSON format, pass the text to eval, or more safely, json_parse to get a valid JavaScript object. Example 8-1 illustrates working with JSON data in responseText. 186 | Chapter 8: Large-Scale Ajax
Although eval is fast, it’s important to recognize that it will execute any piece of JavaScript, even those that could contain malicious code. If you have complete trust and control of the JSON data you’re evaluating, eval may be acceptable; however, json_parse is more secure because it recognizes only JSON text. Example 8-1. A simple Ajax request function handleRequest() { // The request is in the proper state for us to handle it only when // is readyState member has been set to 4 and its status shows 200. if (this.readyState == 4 && this.status == 200) { if (this.responseXML != null) { // This is the response member to read for XML; it holds a DOM. ... } else if (this.responseText != null) { var data; // This is the response member to read for JSON data (or text). data = json_parse(this.responseText); // For illustration, just show the message in an alert dialog. // The response is an object containing one member: a message. alert(data.message); } } } function handleConnect() { var req; // Create the request object and set up the handler for state changes. req = new XMLHttpRequest(); req.onreadystatechange = handleRequest; // Set up the type of request, where it should go, and do the request. req.open("GET", "service.php..."); req.send(); } For the sake of viewing what this example looks like end to end, Example 8-2 shows the PHP server code for service.php, the script used to handle the Ajax request from Example 8-1. It returns a JSON object with one member called message. In the Browser | 187
Example 8-2. A simple JSON response
Using Ajax Libraries In this section, we explore several Ajax libraries that can help manage the complexities of large Ajax applications while standardizing how Ajax works across the major brows- ers. These include Dojo, jQuery, Prototype, and the YUI library. Specifically, we’ll look at how each library supports fundamental GET and POST requests for comparison purposes. Of course, this is far from a complete depiction of what the libraries can do. For example, they all offer various options for carrying out requests, support flexible data formats, and define numerous events for which you can provide handlers, which we only touch on here. Ajax with Dojo Dojo is a JavaScript library built on several contributed code bases. You can download the library and read its complete documentation at http://www.dojotoolkit.org: GET The following method executes an Ajax GET request with Dojo. The method ac- cepts one object as a parameter; the most commonly used members of the object are shown below. The handleAs member can be text, xml, or json, indicating that the data argument passed to the function specified for load is a string, DOM, or JSON object, respectively. The url member is the destination for the request. The timeout member is measured in milliseconds: dojo.xhrGet ( { url: "service.php?key1=val1&key2=val2&...", timeout: 5000, handleAs: "json", load: function(data, args) { // Do what is needed when the Ajax call returns successfully. }, error: function(error, args) { // Do what is needed when the Ajax call returns on a failure. } } ); POST The following method executes an Ajax POST request with Dojo. The parameters for the method are the same as described for GET except that you set the data to post as an object in the content member: dojo.xhrPost ( { url: "service.php", timeout: 5000, In the Browser | 189
handleAs: "json", content: { "key1": "val1", "key2": "val2", ... }, load: function(data, args) { // Do what is needed when the Ajax call returns successfully. }, error: function(error, args) { // Do what is needed when the Ajax call returns on a failure. } } ); Ajax with jQuery The jQuery library is another JavaScript library with especially good documentation for its Ajax support. You can download the library and read its complete documentation at http://www.jquery.com: GET The following method executes an Ajax GET request with jQuery. The method accepts one object as a parameter whose most common members are shown below. The dataType member can take a number of values, of which the most common are text, xml, or json, indicating that the data argument passed to the function specified for success is a string, DOM, or JSON object, respectively. The url mem- ber is the destination for the request. You can specify the query parameters for the GET as an object in the data member. The timeout member is measured in milliseconds: jQuery.ajax ( { url: "service.php", type: "GET", timeout: 5000, data: { "key1": "val1", "key2": "val2", ... }, dataType: "json", success: function(data) { // Do what is needed when the Ajax call returns successfully. }, error: function(xhr, text, error) { 190 | Chapter 8: Large-Scale Ajax