DHTML Utopia Modern Web Design Using JavaScript & DOM- P15

DHTML Utopia Modern Web Design Using JavaScript & DOM- P15:In a single decade, the Web has evolved from a simple method of deliveringtechnical documents to an essential part of daily life, making and breaking relationshipsand fortunes along the way. “Looking something up on the Internet,”by which is almost always meant the Web, is now within reach of almost anyoneliving in a first-world country, and the idea of conducting conversations andbusiness (and probably orchestras) in your Web browser is no longer foreign, butpart of life....
Nội dung trích xuất từ tài liệu:
DHTML Utopia Modern Web Design Using JavaScript & DOM- P15 Chapter 9: Communicating With The Server li.className = draggable; var s = ; for (var j = 0; j < fileNodes[i].firstChild.nodeValue.length; j += 5) { s += fileNodes[i].firstChild.nodeValue.substr(j, 5); s += ; } li.setAttribute(path, path + / + fileNodes[i].firstChild.nodeValue); li.innerHTML = s; ul.appendChild(li); } files.appendChild(ul); setTimeout(fM.setUpDraggables, 100); }, receiveFilenames receives the XML returned by the server in the form of a Sarissa DomDocument object (xmlhttp.responseXML in loadFiles), and constructs from it a slice of HTML—a document fragment. Here’s an example of that frag- ment, based on two retrieved files: file1.html and longfilename.html: file1.html longfilename.html Essentially, receiveFilenames creates an unordered list of filenames, and adds to each list item a class of draggable (ensuring that our drag script, later, will know that this is a draggable item). It also adds a custom path attribute with the full path of the file (to make life easier on the drag script). Finally, it breaks the filename into five-character chunks and inserts a tag after each chunk. The tag indicates a point at which a word may be broken for wrapping at the end of a line. This is used to ensure that the filename can be word-wrapped, so that it doesn’t break the layout.3 3 is a nonstandard tag, the use of which may well engender some guilty feelings. However, there is no cross-browser way to say, “break up this word wherever you need to in order to get it to fit into a box properly.” The other possibilities are , the soft hyphen, which is unsupported by Mozilla, and the official solution: zero-width space ​, which has patchy support. MSIE also has the nonstandard CSS word-wrap property, but there is no cross-browser equivalent. 260Licensed to siowchen@darke.biz Server Control Commands If you work through the method slowly, you’ll see that three document hierarchies are at work: the page itself, the XML document fragment returned from the server, and the document fragment being built up for insertion into the page. The method clears the contents of the document element that has the ID files (which is a container div that will be used to display the file list), and puts the newly-created list structure into it. Finally, it calls fM.setUpDraggables, which we’ll look at later, to make the new filename elements draggable. Server Control Commands Now that we’ve got a list of server files to work with, we’ll need to be able to manipulate them: to tell the server what to do with the files. Control instructions will pass from browser to server. In this application, we have only one control instruction: “move file A to directory B.” Sending a command to the server can be achieved using XMLHttpRequest in ex- actly the same way as we’d use it to retrieve data. The mechanics of sending a communication to the server are the same, it’s just that the focus has changed. Before, we were conceptually sending a request for data, and getting back some data; now, we send a command and retrieve a success or failure message. Here, the browser tells the server what to do, rather than asking the server for inform- ation. The server code should achieve the following: 1. It should accept two query string parameters: path and file. The file para- meter is the full path of the file that we want to move (again, relative to the root); the path parameter is the relative path to the directory to which the file should be moved. 2. It should be paranoid, and check that: ❑ the directory is under the root path ❑ the file is under the root path ❑ the directory is a directory and the file is a file. 3. It should move the file into the directory. 261Licensed to siowchen@darke.biz Ch ...