DHTML Utopia Modern Web Design Using JavaScript & DOM- P16

DHTML Utopia Modern Web Design Using JavaScript & DOM- P16: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- P16 Chapter 9: Communicating With The Server In the above example, the XML-RPC API’s method names contain a dot (.), so they won’t work as JavaScript method names. We’ve therefore used the second technique to assign simpler method names. In either case, we must specify the location of the XML-RPC API (this is some- times called the endpoint, and is the URL of the script to which you pass the XML-RPC commands). The remote method becomes accessible as a method of the API object. What that actually means in plain English is that code can now call the remote blogger.getRecentPosts method transparently, by calling the following (for example): var result = remoteAPI.getRecentPosts(arguments); Pages that make these calls are normally retrieved from the same server that processes the calls. Security restrictions prevent you from loading a page from one server and making XML-RPC calls to a server that’s located elsewhere. So, in JavaScript, the client and server form a consistent pair. This is not true of Web services in general. Example: Weblog Post Editor Armed with this knowledge of the Blogger API, and a trusty XML-RPC client library, we can very easily build a simple post editor for a Weblog. Only three actions are required: 1. Get a list of posts from the server. 2. Display the content of one of the fetched posts for editing. 3. Save the edited post back to the server. Before we design our page, it makes sense to confirm that the Blogger API can do what we want it to. All APIs are different; there’s no point committing to a big design project if the XML-RPC system won’t support it. Exploring the Blogger API For all three of the required actions, start by turning to the Blogger API specific- ation. That document states that the method signature for blogger.getRecentPosts requires five arguments: appkey, blog name, username, password, and number of posts. The first four are specific to the Weblog in use (appkey may be blank for non-Blogger Weblogs that support the Blogger API). 280Licensed to siowchen@darke.biz Example: Weblog Post Editor Retrieving the five most recent posts, then, given that getRecentPosts was “wrapped” above with a call to add, is this simple: var posts = remoteAPI.getRecentPosts(appkey, blogname, username, password, 5); The posts variable now contains a list of post objects that have content and postid properties (along with a few others). We can use that data to display one of the posts for editing. Saving an edited post back to the server is similarly easy. According to the Blogger API specification, it’s done this way: remoteAPI.editPost(appkey, postid, username, password, content); These arguments are quite self-explanatory. Armed with those two methods, we have all we need to access the back end. Setting up the Page Content For this simple example, all we need is a little event handling to tie everything together, as well as some HTML to define the editing controls. We’ll use a tex- tarea and a couple of buttons, which give us this starting point: File: editblog.html editblog Chapter 9: Communicating With The Server We’re not using styles for this simple example, but as usual, we’ll build ourselves a JavaScript library object. Here’s the object signature that we’ll end up with: File: editblog.js (excerpt) var eB = { /* Change these bits */ USERNAME: sil, PASSWORD: nowayjose!, API_URL: example_blogger.php, BLOG_NAME: /main, /* Dont change anything below here */ posts: null, init: function() { ... }, addEvent: function(elm, evType, fn, useCapture) { ... }, getPosts: function() { ... }, addItem: function(para, post) { ... }, clickLink: function() { ... }, sendPost: function() { ... } } eB.addEvent(window, load, eB.init, false); init and addEvent have their usual roles. clickLink is an event listener; getPo ...