Drag timestamps from the clock

elements into drop targets and how to make the
• elements within them into drag sources. The example is a piece of unobtrusive JavaScript that looks for
  elements with a class attribute that includes “dnd” and registers DnD event handlers on any such lists it finds. The event handlers make the list itself into a drop target: any text you drop onto the list is turned into a new list item and is inserted at the end of the list. The event handlers also listen for drags on the items within the list and make the text of each list item available for transfer. The drag source handlers allow “copy” and “move” operations and delete list items that are dropped in move operations. (Note, however, that not all browsers support move operations interoperably.) Example 17-5. A list as drop target and drag source /* * The DnD API is quite complicated, and browsers are not fully interoperable. * This example gets the basics right, but each browser is a little different * and each one seems to have its own unique bugs. This code does not attempt * browser-specific workarounds. */ whenReady(function() { // Run this function when the document is ready // Find all
  elements and call the dnd() function on them var lists = document.getElementsByTagName("ul"); var regexp = /\bdnd\b/; for(var i = 0; i < lists.length; i++) if (regexp.test(lists[i].className)) dnd(lists[i]); // Add drag-and-drop handlers to a list element function dnd(list) { var original_class = list.className; // Remember original CSS class var entered = 0; // Track enters and leaves // This handler is invoked when a drag first enters the list. It checks // that the drag contains data in a format it can process and, if so, // returns false to indicate interest in a drop. In that case, it also // highlights the drop target to let the user know of that interest. list.ondragenter = function(e) { e = e || window.event; // Standard or IE event var from = e.relatedTarget; // dragenter and dragleave events bubble, which makes it tricky to 478 | Chapter 17: Handling Events // // // // know when to highlight or unhighlight the element in a case like this where the
  element has
  • children. In browsers that define relatedTarget we can track that. Otherwise, we count enter/leave pairs // All the DnD info is in this dataTransfer object var dt = e.dataTransfer; // The dt.types object lists the types or formats that the data // being dragged is available in. HTML5 says the type has a // contains() method. In some browsers it is an array with an // indexOf method. In IE8 and before, it simply doesn't exist. var types = dt.types; // What formats data is available in // // // // if { If we don't have any type data or if data is available in plain text format, then highlight the list to let the user know we're listening for drop and return false to let the browser know. (!types || // IE (types.contains && types.contains("text/plain")) || //HTML5 (types.indexOf && types.indexOf("text/plain")!=-1)) //Webkit list.className = original_class + " droppable"; return false; } // If we don't recognize the data type, we don't want a drop return; // without canceling }; } return false; // If not the first enter, we're still interested // This handler is invoked as the mouse moves over the list. // We have to define this handler and return false or the drag // will be canceled. list.ondragover = function(e) { return false; }; // This handler is invoked when the drag moves out of the list // or out of one of its children. If we are actually leaving the list // (not just going from one list item to another), then unhighlight it. list.ondragleave = function(e) { e = e || window.event; var to = e.relatedTarget; // If we're leaving for something outside the list or if this leave // balances out the enters, then unhighlight the list entered--; if ((to && !ischild(to,list)) || entered <= 0) { list.className = original_class; entered = 0; } return false; 17.7 Drag and Drop Events | 479 Client-Side JavaScript // If we entered from outside the list or if // this is the first entrance then we need to do some stuff entered++; if ((from && !ischild(from, list)) || entered == 1) { }; // This handler is invoked when a drop actually happens. // We take the dropped text and make it into a new
  • element list.ondrop = function(e) { e = e || window.event; // Get the event // Get the data that was dropped in plain text format. // "Text" is a nickname for "text/plain". // IE does not support "text/plain", so we use "Text" here. var dt = e.dataTransfer; // dataTransfer object var text = dt.getData("Text"); // Get dropped data as plain text. // If we got some text, turn it into a new item at list end. if (text) { var item = document.createElement("li"); // Create new
  • item.draggable = true; // Make it draggable item.appendChild(document.createTextNode(text)); // Add text list.appendChild(item); // Add it to the list // Restore the list's original style and reset the entered count list.className = original_class; entered = 0; }; } return false; // Make all items that were originally in the list draggable var items = list.getElementsByTagName("li"); for(var i = 0; i < items.length; i++) items[i].draggable = true; // And register event handlers for dragging list items. // Note that we put these handlers on the list and let events // bubble up from the items. // This handler is invoked when a drag is initiated within the list. list.ondragstart = function(e) { var e = e || window.event; var target = e.target || e.srcElement; // If it bubbled up from something other than a
  • , ignore it if (target.tagName !== "LI") return false; // Get the all-important dataTransfer object var dt = e.dataTransfer; // Tell it what data we have to drag and what format it is in dt.setData("Text", target.innerText || target.textContent); // Tell it we know how to allow copies or moves of the data dt.effectAllowed = "copyMove"; }; // This handler is invoked after a successful drop occurs list.ondragend = function(e) { e = e || window.event; var target = e.target || e.srcElement; 480 | Chapter 17: Handling Events // // // // // if If the drop was a move, then delete the list item. In IE8, this will be "none" unless you explicitly set it to move in the ondrop handler above. But forcing it to "move" for IE prevents other browsers from giving the user a choice of a copy or move operation. (e.dataTransfer.dropEffect === "move") target.parentNode.removeChild(target); } } 17.8 Text Events Browsers have three legacy events for keyboard input. The keydown and keyup events are low-level events that are covered in the next section. The keypress event, however, is a higher-level event that signals that a printable character has been generated. The DOM Level 3 Events draft specification defines a more general textinput event triggered whenever the user inputs text regardless of the source (a keyboard, data transfer in the form of a paste or a drop, an Asian-language input method, or a voice or handwriting recognition system, for example). The textinput event is not supported at the time of this writing, but Webkit browsers support a very similar “textInput” (with a capital letter I) event. The proposed textinput event and the currently implemented textInput event are passed a simple event object with a data property that holds the input text. (Another property, inputMethod, is proposed to specify the source of the input, but it has not yet been implemented.) For keyboard input, the data property will usually hold only a single character, but input from other sources may often include multiple characters. The event object passed with keypress events is more confusing. A keypress event represents a single character of input. The event object specifies that character as a numeric Unicode codepoint, and you must use String.fromCharCode() to convert it to a string. In most browsers, the keyCode property of the event object specifies the codepoint of the input character. For historical reasons, however, Firefox uses the charCode property instead. Most browser only fire keypress events when a printable character is generated. Firefox, however, also fires “keypress” for nonprinting characters. To detect this case (so you can ignore the nonprinting characters), you can look for an event object with a charCode property that is defined but set to 0. The textinput, textInput, and keypress events can be canceled to prevent the character from being input. This means you can use these events to filter input. You might want to prevent a user from entering letters into a field intended for numeric data, for ex- 17.8 Text Events | 481 Client-Side JavaScript }); // This is the utility function we used in ondragenter and ondragleave. // Return true if a is a child of b. function ischild(a,b) { for(; a; a = a.parentNode) if (a === b) return true; return false; } ample. Example 17-6 is an unobtrusive module of JavaScript code that allows exactly this sort of filtering. It looks for elements that have an additional (nonstandard) attribute named data-allowed-chars. The module registers handlers for textinput, textInput, and keypress events on any such text field to restrict input to characters that appear in the value of the allowed attribute. The initial comment at the top of Example 17-6 includes some sample HTML that uses the module. Example 17-6. Filtering user input /** * InputFilter.js: unobtrusive filtering of keystrokes for elements * * This module finds all elements in the document that * have an "data-allowed-chars" attribute. It registers keypress, textInput, and * textinput event handlers for any such element to restrict the user's input * so that only characters that appear in the value of the attribute may be * entered. If the element also has an attribute named "data-messageid", * the value of that attribute is taken to be the id of another document * element. If the user types a character that is not allowed, the message * element is made visible. If the user types a character that is allowed, the * message element is hidden. This message id element is intended to offer * an explanation to the user of why her keystroke was rejected. It should * typically be styled with CSS so that it is initially invisible. * * Here is sample HTML that uses this module. * Zipcode: * Digits only * * This module is purely unobtrusive: it does not define any symbols in * the global namespace. */ whenReady(function () { // Run this function when the document is loaded // Find all elements var inputelts = document.getElementsByTagName("input"); // Loop through them all for(var i = 0 ; i < inputelts.length; i++) { var elt = inputelts[i]; // Skip those that aren't text fields or that don't have // a data-allowed-chars attribute. if (elt.type != "text" || !elt.getAttribute("data-allowed-chars")) continue; // // // // if Register our event handler function on this input element keypress is a legacy event handler that works everywhere. textInput (mixed-case) is supported by Safari and Chrome in 2010. textinput (lowercase) is the version in the DOM Level 3 Events draft. (elt.addEventListener) { elt.addEventListener("keypress", filter, false); elt.addEventListener("textInput", filter, false); elt.addEventListener("textinput", filter, false); } else { // textinput not supported versions of IE w/o addEventListener() elt.attachEvent("onkeypress", filter); } 482 | Chapter 17: Handling Events } // This is the keypress and textInput handler that filters the user's input function filter(event) { // Get the event object and the target element target var e = event || window.event; // Standard or IE model var target = e.target || e.srcElement; // Standard or IE model var text = null; // The text that was entered // If this keystroke is a function key of any kind, do not filter it if (code < 32 || // ASCII control character e.charCode == 0 || // Function key (Firefox only) e.ctrlKey || e.altKey) // Modifier key held down return; // Don't filter this event } // Convert character code into a string var text = String.fromCharCode(code); // Now look up information we need from this input element var allowed = target.getAttribute("data-allowed-chars"); // Legal chars var messageid = target.getAttribute("data-messageid"); // Message id if (messageid) // If there is a message id, get the element var messageElement = document.getElementById(messageid); // Loop through the characters of the input text for(var i = 0; i < text.length; i++) { var c = text.charAt(i); if (allowed.indexOf(c) == -1) { // Is this a disallowed character? // Display the message element, if there is one if (messageElement) messageElement.style.visibility = "visible"; } }); } } // Cancel the default action so the text isn't inserted if (e.preventDefault) e.preventDefault(); if (e.returnValue) e.returnValue = false; return false; // If all the characters were legal, hide the message if there is one. if (messageElement) messageElement.style.visibility = "hidden"; The keypress and textinput events are triggered before the newly input text is actually inserted into the focused document element, which is why handlers for these events can cancel the event and prevent the insertion of the text. Browsers also implement an input event type that is fired after text is inserted into an element. These events cannot be canceled, and they do not specify what the new text was in their event object, but 17.8 Text Events | 483 Client-Side JavaScript // Get the character or text that was entered if (e.type === "textinput" || e.type === "textInput") text = e.data; else { // This was a legacy keypress event // Firefox uses charCode for printable key press events var code = e.charCode || e.keyCode; they do provide notification that the textual content of an element has changed in some way. If you wanted to ensure that any text entered into an input field was in uppercase, for example, you might use the input event like this: SURNAME: HTML 5 standardizes the input event and it is supported by all modern browsers except IE. You can achieve a similar effect in IE by using the nonstandard propertychange event to detect changes to the value property of a text input element. Example 17-7 shows how you might force all input to uppercase in a cross-platform way. Example 17-7. Using the propertychange event to detect text input function forceToUpperCase(element) { if (typeof element === "string") element = document.getElementById(element); element.oninput = upcase; element.onpropertychange = upcaseOnPropertyChange; } // Easy case: the handler for the input event function upcase(event) { this.value = this.value.toUpperCase(); } // Hard case: the handler for the propertychange event function upcaseOnPropertyChange(event) { var e = event || window.event; // If the value property changed if (e.propertyName === "value") { // Remove onpropertychange handler to avoid recursion this.onpropertychange = null; // Change the value to all uppercase this.value = this.value.toUpperCase(); // And restore the original propertychange handler this.onpropertychange = upcaseOnPropertyChange; } } 17.9 Keyboard Events The keydown and keyup events are fired when the user presses or releases a key on the keyboard. They are generated for modifier keys, function keys, and alphanumeric keys. If the user holds the key down long enough for it to begin repeating, there will be multiple keydown events before the keyup event arrives. The event object associated with these events has a numeric keyCode property that specifies which key was pressed. For keys that generate printable characters, the key Code is generally the Unicode encoding of the primary character that appears on the key. Letter keys always generate uppercase keyCode values, regardless of the state of the Shift key since that is what appears on the physical key. Similarly, number keys always generate keyCode values for the digit that appears on the key, even if you are holding down Shift in order to type a punctuation character. For nonprinting keys, the key Code property will be some other value. These keyCode values have never been stand- 484 | Chapter 17: Handling Events ardized, but reasonable cross-browser compatibility is possible, and Example 17-8 includes a mapping from keyCode values to function key names. Like mouse event objects, key event objects have altKey, ctrlKey, metaKey, and shift Key properties, which are set to true if the corresponding modifier key is held down when the event occurs. The DOM Level 3 key property is not yet implemented in any browsers at the time of this writing. The Webkit-based browsers Safari and Chrome define a keyIdentifier property in the event object for these events, however. Like key, keyIdentifier is a string rather than a number and it has useful values like “Shift” and “Enter” for function keys. For printing keys, this property holds a less useful string representation of the Unicode encoding of the character. It is “U+0041” for the A key, for example. Example 17-8 defines a Keymap class that maps keystroke identifiers such as “PageUp”, “Alt_Z”, and “ctrl+alt+shift+F5” to JavaScript functions that are invoked in response to those keystrokes. Pass key bindings to the Keymap() constructor in the form of a JavaScript object in which property names are keystroke identifiers and property values are handler functions. Add and remove bindings with the bind() and unbind() methods. Install a Keymap on an HTML element (often the Document object) with the install() method. Installing a keymap on an element registers a keydown event handler on that element. Each time a key is pressed, the handler checks to see if there is a function associated with that keystroke. If there is, it invokes it. The keydown handler uses the DOM Level 3 key property, if it is defined. If not, it looks for the Webkit keyIdentifier property and uses that. Otherwise, it falls back on the nonstandard keyCode property. Example 17-8 begins with a long comment that explains the module in more detail. Example 17-8. A Keymap class for keyboard shortcuts /* * * * * * * * * * * * Keymap.js: bind key events to handler functions. This module defines a Keymap class. An instance of this class represents a mapping of key identifiers (defined below) to handler functions. A Keymap can be installed on an HTML element to handle keydown events. When such an event occurs, the Keymap uses its mapping to invoke the appropriate handler. When you create a Keymap, you can pass a JavaScript object that represents the initial set of bindings for the Keymap. The property names of this object are key identifers, and the property values are the handler functions. After a Keymap has been created, you can add new bindings by passing a key 17.9 Keyboard Events | 485 Client-Side JavaScript The keydown and keyup events and the keyCode property have been in use for more than a decade but have never been standardized. The DOM Level 3 Events draft standard does standardize the keydown and keyup event types, but it does not attempt to standardize keyCode. Instead, it defines a new key property that contains the key name as a string. If the key corresponds to a printable character, the key property will just be that printable character. If the key is a function key, the key property will be a value like “F2”, “Home”, or “Left”. * identifer and handler function to the bind() method. You can remove a * binding by passing a key identifier to the unbind() method. * * To make use of a Keymap, call its install() method, passing an HTML element, * such as the document object. install() adds an onkeydown event handler to * the specified object. When this handler is invoked, it determines the key * identifier of the pressed key and invokes the handler function, if any, * bound to that key identifier. A single Keymap may be installed on more than * one HTML element. * * Key Identifiers * * A key identifier is a case-insensitive string representation of a key plus * any modifier keys that are held down at the same time. The key name is * usually the (unshifted) text on the key. Legal key names include "A", "7", * "F2", "PageUp", "Left", "Backspace", and "Esc". * * See the Keymap.keyCodeToKeyName object in this module for a list of names. * These are a subset of the names defined by the DOM Level 3 standard and * this class will use the key property of the event object when implemented. * * A key identifier may also include modifier key prefixes. These prefixes are * Alt, Ctrl, Meta, and Shift. They are case-insensitive, and must be separated * from the key name and from each other with spaces or with an underscore, * hyphen, or +. For example: "SHIFT+A", "Alt_F2", "meta-v", and "ctrl alt left". * On Macs, Meta is the Command key and Alt is the Option key. Some browsers * map the Windows key to the Meta modifier. * * Handler Functions * * Handlers are invoked as methods of the document or document element on which * the keymap is installed and are passed two arguments: * 1) the event object for the keydown event * 2) the key identifier of the key that was pressed * The handler return value becomes the return value of the keydown handler. * If a handler function returns false, the keymap will stop bubbling and * cancel any default action associated with the keydown event. * * Limitations * * It is not possible to bind a handler function to all keys. The operating * system traps some key sequences (Alt-F4, for example). And the browser * itself may trap others (Ctrl-S, for example). This code is browser, OS, * and locale-dependent. Function keys and modified function keys work well, * and unmodified alphanumeric keys work well. The combination of Ctrl and Alt * with alphanumeric characters is less robust. * * Most punctuation characters that do not require the Shift key (`=[];',./\ * but not hyphen) on standard US keyboard layouts are supported. But they are * not particularly portable to other keyboard layouts and should be avoided. */ // This is the constructor function function Keymap(bindings) { this.map = {}; // Define the key identifier->handler map if (bindings) { // Copy initial bindings into it 486 | Chapter 17: Handling Events } } for(name in bindings) this.bind(name, bindings[name]); // Bind the specified key identifier to the specified handler function Keymap.prototype.bind = function(key, func) { this.map[Keymap.normalize(key)] = func; }; Client-Side JavaScript // Delete the binding for the specified key identifier Keymap.prototype.unbind = function(key) { delete this.map[Keymap.normalize(key)]; }; // Install this Keymap on the specified HTML element Keymap.prototype.install = function(element) { // This is the event-handler function var keymap = this; function handler(event) { return keymap.dispatch(event, element); } }; // Now install it if (element.addEventListener) element.addEventListener("keydown", handler, false); else if (element.attachEvent) element.attachEvent("onkeydown", handler); // This method dispatches key events based on the keymap bindings. Keymap.prototype.dispatch = function(event, element) { // We start off with no modifiers and no key name var modifiers = "" var keyname = null; // if if if if Build the modifier string in canonical lowercase alphabetical order. (event.altKey) modifiers += "alt_"; (event.ctrlKey) modifiers += "ctrl_"; (event.metaKey) modifiers += "meta_"; (event.shiftKey) modifiers += "shift_"; // The keyname is easy if the DOM Level 3 key property is implemented: if (event.key) keyname = event.key; // Use the keyIdentifier on Safari and Chrome for function key names else if (event.keyIdentifier && event.keyIdentifier.substring(0,2) !== "U+") keyname = event.keyIdentifier; // Otherwise, use the keyCode property and the code-to-name map below else keyname = Keymap.keyCodeToKeyName[event.keyCode]; // If we couldn't figure out a key name, just return and ignore the event. if (!keyname) return; // The canonical key id is modifiers plus lowercase key name var keyid = modifiers + keyname.toLowerCase(); // Now see if the key identifier is bound to anything var handler = this.map[keyid]; 17.9 Keyboard Events | 487 if (handler) { // If there is a handler for this key, handle it // Invoke the handler function var retval = handler.call(element, event, keyid); // If the handler returns false, cancel default and prevent if (retval === false) { if (event.stopPropagation) event.stopPropagation(); // else event.cancelBubble = true; // if (event.preventDefault) event.preventDefault(); // else event.returnValue = false; // } bubbling DOM model IE model DOM IE // Return whatever the handler returned return retval; }; } // Utility function to convert a key identifier to canonical form. // On non-Macintosh hardware, we could map "meta" to "ctrl" here, so that // Meta-C would be "Command-C" on the Mac and "Ctrl-C" everywhere else. Keymap.normalize = function(keyid) { keyid = keyid.toLowerCase(); // Everything lowercase var words = keyid.split(/\s+|[\-+_]/); // Split modifiers from name var keyname = words.pop(); // keyname is the last word keyname = Keymap.aliases[keyname] || keyname; // Is it an alias? words.sort(); // Sort remaining modifiers words.push(keyname); // Add the normalized name back return words.join("_"); // Concatenate them all }; Keymap.aliases = { "escape":"esc", "delete":"del", "return":"enter", "ctrl":"control", "space":"spacebar", "ins":"insert" }; // // // // Map common key aliases to their "official" key names used by DOM Level 3 and by the key code to key name map below. Both keys and values must be lowercase here. // The legacy keyCode property of the keydown event object is not standardized // But the following values seem to work for most browsers and OSes. Keymap.keyCodeToKeyName = { // Keys with words or arrows on them 8:"Backspace", 9:"Tab", 13:"Enter", 16:"Shift", 17:"Control", 18:"Alt", 19:"Pause", 20:"CapsLock", 27:"Esc", 32:"Spacebar", 33:"PageUp", 34:"PageDown", 35:"End", 36:"Home", 37:"Left", 38:"Up", 39:"Right", 40:"Down", 45:"Insert", 46:"Del", // Number keys on main keyboard (not keypad) 48:"0",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:"8",57:"9", // Letter keys. 65:"A", 66:"B", 74:"J", 75:"K", 83:"S", 84:"T", Note that we don't distinguish upper and lower case 67:"C", 68:"D", 69:"E", 70:"F", 71:"G", 72:"H", 73:"I", 76:"L", 77:"M", 78:"N", 79:"O", 80:"P", 81:"Q", 82:"R", 85:"U", 86:"V", 87:"W", 88:"X", 89:"Y", 90:"Z", 488 | Chapter 17: Handling Events // Keypad numbers and punctuation keys. (Opera does not support these.) 96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6",103:"7",104:"8",105:"9", 106:"Multiply", 107:"Add", 109:"Subtract", 110:"Decimal", 111:"Divide", // Punctuation keys that don't require holding down Shift // Hyphen is nonportable: FF returns same code as Subtract 59:";", 61:"=", 186:";", 187:"=", // Firefox and Opera return 59,61 188:",", 190:".", 191:"/", 192:"`", 219:"[", 220:"\\", 221:"]", 222:"'" }; 17.9 Keyboard Events | 489 Client-Side JavaScript // Function keys 112:"F1", 113:"F2", 114:"F3", 115:"F4", 116:"F5", 117:"F6", 118:"F7", 119:"F8", 120:"F9", 121:"F10", 122:"F11", 123:"F12", 124:"F13", 125:"F14", 126:"F15", 127:"F16", 128:"F17", 129:"F18", 130:"F19", 131:"F20", 132:"F21", 133:"F22", 134:"F23", 135:"F24", CHAPTER 18 Scripted HTTP The Hypertext Transfer Protocol (HTTP) specifies how web browsers get documents from and post form contents to web servers, and how web servers respond to those requests and posts. Web browsers obviously handle a lot of HTTP. Usually HTTP is not under the control of scripts and instead occurs when the user clicks on a link, submits a form, or types a URL. It is possible for JavaScript code to script HTTP, however. HTTP requests are initiated when a script sets the location property of a window object or calls the submit() method of a form object. In both cases, the browser loads a new page. This kind of trivial HTTP scripting can be useful in a multiframed web page but is not the topic we’ll cover here. Instead, this chapter explains how scripts can communicate with a web server without causing the web browser to reload the content of any window or frame. The term Ajax describes an architecture for web applications that prominently features scripted HTTP. 1 The key feature of an Ajax application is that it uses scripted HTTP to initiate data exchange with a web server without causing pages to reload. The ability to avoid page reloads (which were the norm in the early days of the Web) results in responsive web applications that feel more like traditional desktop applications. A web application might use Ajax technologies to log user interaction data to the server or to improve its start-up time by displaying only a simple page at first and then downloading additional data and page components on an as-needed basis. The term Comet refers to a related web application architecture that uses scripted HTTP.2 In a sense, Comet is the reverse of Ajax: in Comet, it is the web server that initiates the communication, asynchronously sending messages to the client. If the web application needs to respond to these messages sent by the server, it can then use Ajax 1. Ajax is an (uncapitalized) acronym for Asynchronous JavaScript and XML. The term was coined by Jesse James Garrett and first appeared in his February 2005 essay “Ajax: A New Approach to Web Applications”. “Ajax” was a popular buzzword for many years; now it is simply a useful term for an web application architecture based on scripted HTTP requests. 2. The name Comet was coined by Alex Russell in “Comet: Low Latency Data for the Browser”. The name is likely a play on Ajax: both Comet and Ajax are US brands of scouring powder. 491 techniques to send or request data. In Ajax, the client “pulls” data from the server. With Comet, the server “pushes” data to the client. Other names for Comet include “Server Push,” “Ajax Push,” and “HTTP Streaming.” There are a number of ways to implement Ajax and Comet, and these underlying implementations are sometimes known as transports. The element, for example, has a src property. When a script sets this property to a URL, an HTTP GET request is initiated to download an image from that URL. A script can therefore pass information to a web server by encoding that information into the query-string portion of the URL of an image and setting the src property of an element. The web server must actually return some image as the result of this request, but it can be invisible: a transparent 1-pixel-by-1-pixel image, for instance.3 An element does not make a good Ajax transport, because the data exchange is one-way: the client can send data to the server, but the server’s response will always be an image that the client can’t easily extract information from. The