Developer Center: AJAX Getting Started Asynchronous JavaScript and XML, while not a technology in itself, is a term coined in 2005 by Jesse James Garrett, that describes a "new" approach to using a number of existing technologies together, including HTML or XHTML, CSS, JavaScript, DOM, XML, XSLT, and most importantly the XMLHttpRequest object. When these technologies are combined in the Ajax model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions. Although X in Ajax stands for XML, JSON is preferred over XML nowadays because of its many advantages such as being a part of JavaScript, thus being lighter in size. Documentation Getting Started This article guides you through the Ajax basics and gives you two simple hands-on examples to get you started. Using the XMLHttpRequest API The XMLHttpRequest API is the core of Ajax. Fetch API Server-sent events XPath FileReader API
Creating an AJAX Driven Web Chat Program Creating the Chat Tables We are going to create two tables for the chat program, but we will only use one for the first part of this tutorial. The two tables are "chat" where we will in later tutorials store all of the different chat rooms, and "message" which contains the list of all messages sent to the chat system. --Chat Table DROP TABLE IF EXISTS `chat`; CREATE TABLE `chat` ( `chat_id` INT ( 11 ) NOT NULL AUTO_INCREMENT , `chat_name` VARCHAR ( 64 ) DEFAULT NULL , `start_time` DATETIME DEFAULT NULL , PRIMARY KEY ( `chat_id` ) ) ENGINE= INNODB DEFAULT CHARSET =latin1; --Message Table DROP TABLE IF EXISTS `message`; CREATE TABLE `message` ( `message_id` INT ( 11 ) NOT NULL AUTO_INCREMENT , `chat_id` INT ( 11 ) NOT NULL DEFAULT '0' , `user_id` INT ( 11 ) NOT NULL DEFAULT '0' , `user_name` VARCHAR ( 64 ) DEFAULT NULL , `message` TEXT , `post_time` DATETIME DEFAULT NULL , PRIMARY KEY ( `message_id` ) ) ENGINE= INNODB DEFAULT CHARSET =latin1; Now lets add the rest of the HTML:
JavaScript Auto-Complete Type-Ahead affect for dropdown menus Feature of the script Cross-browser JavaScript that adds (correct) type-ahead/auto-complete effect for dropdown menus in IE and other browsers Browsers compatibility (tested July 2010) Internet Explorer: Works well and now IE menus can finally have type-ahead feature! Firefox: Works well and fixes a long-standing Firefox bug (typing 'CCCC' won't find the right entry) Chrome: Works well and fixes the same browser bug (typing 'CCCC' won't find the right entry) Opera: Works well but not needed - Opera already has correct type-ahead feature Safari: Sometimes does not work - Safari does have its own buggy implementation of type-ahead, but it also has the 'CCCC' bug that is NOT corrected by this script Demo Try the following menus (simply select one and start typing 'a', 'b', 'c' (or '1' etc. in the 2nd menu) in any order, and the menu will jump to the option matching what you typed) How to use the script: Version change log
Using prototype.js v1.4.0 last update: August 18th 2007 Table of Contents What is that? In case you haven't already used it, prototype.js is a JavaScript library initially written by Sam Stephenson. When I first started trying to use this library, a few years ago, I noticed that the documentation was definitely not one of its strongest points. I'm also offering an un-official reference for the objects, classes, functions, and extensions provided by this library. As you read the examples and the reference, developers familiar with the Ruby programming language will notice an intentional similarity between Ruby's built-in classes and many of the extensions implemented by this library. As far as browser support goes, prototype.js tries to support Internet Explorer (Windows) 6.0+, Mozilla Firefox 1.5+, Apple Safari 1.0+, and Opera 9+. toc Related article Advanced JavaScript guide. The utility functions The library comes with many predefined objects and utility functions. Using the $() function Using the $$() function <?
2008 - A Year of Awesome JavaScript Games It's been a great year for JavaScript games. It looks like DHTML and canvas-based games are now capable of taking over some of the areas where Flash used to dominate. Many people have been building remakes of classic video games like Super Mario, Pac-Man, Breakout, Space Invaders, Bomberman or T&C Surf Designs. Others took the old arcade traditions and applied them to their own ideas, giving us cool games like Matt Hackett's Spacius, Mark Wilcox's Invaders from Mars, VertigoProject's RedLine Racing or a twist on the classic Tetris game. We've even seen some roleplaying games, like the very cool Tombs of Asciiroth or the more graphical CanvasQuest by Andrew Wooldridge and the Prototype based ProtoRPG by Pierre Chassaing. 2008 also saw a few libraries for JavaScript / DHTML game development pop up, most notably GameJS (pictured to the left with its demo game, Jetris) and GameQuery, the latter being an extension to the popular jQuery library. Demos Emulation Graphics Audio Odds and ends
Izzy Video: DV Tutorials (Video Podcast) I know what porn you surf: Analytics gets creepy – Watching Webs There’s a known weakness in browsers which we wrote about in the book. Every time we talked with someone about it, they’d ask us why we didn’t start a company that took advantage of the loophole, and the answer was, well, it’s creepy. The loophole basically lets you see where else your visitors have been on the Internet. Well, it’s now out in the open, in two forms: Beencounter, and Haveyourfriendsbeenthere. To be perfectly clear, the site won’t show you everything your visitors surf–just whether or not they’ve been to a set of sites you define. You decide what sites you’d like to find out aboutYou embed these sites in a hidden portion of the pageWhen a visitor loads the page, the sites that are visited are marked a:visited in the page’s CSSThe Javascript in the page can then grab this property of each link and send it back to you Knowing where a visitor has been can be used for all kinds of things.
Google Gears (BETA) Last February, we let you know we were shifting our focus from Gears to HTML5. Over the last year or so, we’ve been working closely with other browser vendors and standards bodies to help define and standardize HTML5 features across browsers, and we’ve worked hard to improve these HTML5 capabilities in Chrome: We implemented support for application caches, which are a great replacement for Gears’ offline features. App caches are already being used by web apps like the NYTimes app in the Chrome Web Store. With all this now available in HTML5, it’s finally time to say goodbye to Gears. The code itself will of course remain open source, and anyone is free to use it. Our mission with Gears was to enable more powerful web applications. Edit: Corrected timeframe for removing Gears from Chrome.