# DHTML Utopia Modern Web Design Using JavaScript & DOM- P13

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

0
43
lượt xem
6

## DHTML Utopia Modern Web Design Using JavaScript & DOM- P13

Mô tả tài liệu

DHTML Utopia Modern Web Design Using JavaScript & DOM- P13:In a single decade, the Web has evolved from a simple method of delivering technical documents to an essential part of daily life, making and breaking relationships and fortunes along the way. “Looking something up on the Internet,” by which is almost always meant the Web, is now within reach of almost anyone living in a first-world country, and the idea of conducting conversations and business (and probably orchestras) in your Web browser is no longer foreign, but part of life....

Chủ đề:

Bình luận(0)

Lưu

## Nội dung Text: DHTML Utopia Modern Web Design Using JavaScript & DOM- P13

2. Example: Name Resolution Cc: Subject: The styles in nameresolution.css are decorative only: they have no impact on the DHTML effect. Figure 8.5 shows this page in action: Figure 8.5. A Webmail interface. Any code that we add should watch the To and Cc fields for changes. Whenever they change, our code will pass the contents back to the server using RSLite. RSLite will hand us back a resolved email address to go with the passed nickname (assuming an email address if found); otherwise, it will not hand back anything. Here’s the very simplified server script: 221 Licensed to siowchen@darke.biz
3. Chapter 8: Remote Scripting File: resolver.php Obviously, in a real application, the $names array would not be hardcoded; instead, the code might look up the passed nickname ($_GET['p']) in a database. Here’s our scripting plan. The HTML includes the rslite.js library to make RSLite calls possible. Our script should then attach a change listener to the To and Cc fields so that it is notified of changes. Our script must also tell RSLite about callbacks. RSLite is an asynchronous library, so when the code calls the server, that call does not return with the server’s response data. Instead, the call returns immedi- ately with no data. RSLite then repeatedly checks for a cookie set by the server (using setInterval) and, when one is set, a nominated callback function is called with the new cookie value from the server. Here’s an example of the required processing for just one field change: 1. Initialization code in the page tells RSLite which callback to call if any values arrive from the server. 2. The change event listener calls RSLite when a change occurs. 3. RSLite uses a JavaScript Image object to make a request to the server, sets up an interval timer to watch for responses, and finishes. 4. The server returns a cookie with its response to the request. 222 Licensed to siowchen@darke.biz
5. Chapter 8: Remote Scripting The resolve method is the event listener for the change event on the To and Cc fields. Here it is: File: nameresolution.js (excerpt) resolve: function(e) { var target = window.event ? window.event.srcElement: e ? e.target : null; if (!target || !target.value) return; nR.currentTarget = target; if (target.value.indexOf('@') != -1) return; // email address // Try and resolve the entered value to a proper value by // calling the server for name resolution window.RSLite.call('resolver.php', target.value); } This method retrieves the target element as usual, then saves that target element in an object property for later use. This is required so that the callback method can find out which field changed. The method then checks that the value does not contain an @ symbol; if it does, the code returns on the assumption that if the value in the field is already an email address, it does not need resolving. Fi- nally, it uses RSLite to pass the value10 back to the server. nR.RSLite.call takes two parameters: the name of the server page that’s to be called (resolver.php), and the value to pass to that page (which, in this case, is the content of the field for resolution). This method then immediately exits; it does not wait for the value returned from the server. Instead, when the server returns a value, that value is passed to the callback method, resolve_callback. Here it is: File: nameresolution.js (excerpt) resolve_callback: function(response) { nR.currentTarget.value = response; }, This method receives the server response, and sets the value of the field to that response. This is why resolve, above, saved the field into a variable. The field automatically changes from an entered nickname (“sil”) to a resolved email address (“sil@kryogenix.org”) when the user clicks or tabs out of it. RSLite also allows for a failure callback function, which is called if the server re- turns nothing. In the server code above, the server will return nothing if the 10 The function assumes, for simplicity, that the user has only entered one nickname into the field. Extending the function to allow for multiple (comma-separated) addresses or nicknames is an exercise that I’ve left to you. 224 Licensed to siowchen@darke.biz
6. XMLHTTP passed nickname is not in the \$names array; the code can use this to flag to the user that the entered nickname is unknown: File: nameresolution.js (excerpt) resolve_failure: function() { var errorSpan = document.createElement('span'); errorSpan.className = 'error'; errorSpan.appendChild(document.createTextNode( 'Address ' + nR.currentTarget.value + ' invalid')); nR.currentTarget.errorSpan = errorSpan; nR.currentTarget.parentNode.appendChild(errorSpan); }, An invalid address is flagged with the addition of a new span to the document containing the text, “Address foo invalid”. A tiny extra customization to resolve is also required: File: nameresolution.js (excerpt) resolve: function(e) { var target = window.event ? window.event.srcElement: e ? e.target : null; if (!target || !target.value) return; nR.currentTarget = target; if (nR.currentTarget.errorSpan) { nR.currentTarget.errorSpan.parentNode.removeChild( nR.currentTarget.errorSpan); nR.currentTarget.errorSpan = null; } if (target.value.indexOf('@') != -1) return; // email address // Try and resolve the entered value to a proper value by // calling the server for name resolution window.RSLite.call('resolver.php', target.value); }, The additional lines above remove any existing error message span before checking for a new address. XMLHTTP The methods presented so far have the disadvantage that they’re oriented towards transferring small amounts of data from server to client: short strings, numbers, and the like. Transferring a larger quantity of data would be problematic using these methods; the hidden image technique, for example, is limited to data 225 Licensed to siowchen@darke.biz
7. Chapter 8: Remote Scripting quantities of four kilobytes: the maximum size of a cookie.11 For notifications, for small amounts of data, for a flag saying merely “yes” or “no”, these methods are sufficient. When the client wants to retrieve a larger amount of data from the server, a different technique is called for. The best alternative is XMLHTTP. Origins of XMLHTTP XMLHTTP was originally implemented by Microsoft in Internet Explorer. It al- lows JavaScript to request an arbitrary URL,12 receive the returned content, and do anything with it that you wish. The data returned from that URL can obviously be anything: it can be as long as you like, and anything you like. Although the method is called XMLHTTP, you are not limited to sending or returning XML. It is, therefore, a technique that’s useful where other methods fall short. Other methods fall short from time to time because they’re essentially hacks—they use side-effects of other techniques to perform data transfer. XMLHTTP was specifically designed to do this transfer, so, if you want to pass a lot of data from the server back to the client, XMLHTTP is the way to go. Even though the technique is called XMLHTTP, the class invented by Microsoft is called XMLHttpRequest. Since HTTP is also an acronym it should really be called XMLHTTPRequest. It’s not though, so we’re stuck with using XMLHttpRequest in our code. We’ll continue to use XMLHTTP as the name of the technique, though. The XMLHTTP technique relies entirely on HTTP requests and responses, as does the rest of the Web. There’s no new form of communication between the Web browser and the Web server, there’s just a new way to make requests from scripts—that’s all. Browser Variations XMLHTTP has some compatibility issues; it’s implemented a little differently in Gecko-based browsers (Mozilla, Firefox, Camino, and so on) than it is in IE.13 Apple’s Safari implements the Mozilla method, while other browsers may not support it at all. Opera is introducing support in its latest releases; Opera 7.6 will also implement the Mozilla approach. 11 It would, of course, be possible to re-engineer the server code and the library to use multiple cookies to transfer data to get around this limit, but it would be a lot of work for not much benefit. 12 The JavaScript security rules apply here; briefly, you can only request URLs from the server from which this HTML page was served. You can’t just grab any URL from anywhere on the Web. 13 IE 5.5 and above: IE5.0 does not support the technique. 226 Licensed to siowchen@darke.biz
8. XMLHTTP By far the easiest way to work around these issues is to use one of the existing libraries that “wrap” the XMLHTTP objects provided by each browser. Including the library and using its objects, instead of the browser objects, to make requests neatly hides the varying browser implementations. XMLHTTP, AJAX, and the Future Since XMLHTTP has become widely supported across the browser market, more and more applications use it. Jesse James Garrett at Adaptive Path has coined the term “AJAX”14 for applications using XMLHTTP, as a shorthand for “Asyn- chronous JavaScript And XML”. Use of AJAX by famous Websites like Google (on the Google Suggest page) has helped to accelerate its popularity. XMLHTTP has great potential because it breaks down the page-based model that most Web-based applications use. Before the Web came along, most applic- ations used static data entry screens that weren’t page-oriented. XMLHTTP allows that earlier kind of design to be re-expressed on the Web. If it worked once, probably it will work again. XMLHTTP also has its issues. It reduces the accessibility of Web pages somewhat. That, however, was also said about DHTML when it first came on the scene. In this book, we’ve explained ways to ensure the accessibility of a site while exploiting the possibilities of DHTML. The same sorts of techniques are likely to evolve for XMLHTTP as well. Sarissa: a Cross-Browser Library One of the better XMLHTTP libraries is Sarissa15, which wraps up both the XMLHttpRequest class for making HTTP requests, and the DOM Document class for interpreting the response as an XML DOM tree. Making a request for a URL with Sarissa is simple. First, include the Sarissa library in your code: Next, create a cross-browser XMLHTTP object: var xmlhttp = new XMLHttpRequest(); 14 http://www.adaptivepath.com/publications/essays/archives/000385.php 15 http://sarissa.sourceforge.net/ 227 Licensed to siowchen@darke.biz