AJAX Tutorial with Prototype December 13, 2005 Here's the AJAX prototype example that I used in my AJAX presentation today. I wanted to give an example of a good use of AJAX, and at the same time keep it simple. So I thought a good example would be to build a zip code verifier. So the user first sees this: Once the zip code is entered, and the response received it looks like this: If the zip code is not found in the db: Ok, now lets build it... Download prototype, and a zip code db First you need to download prototype.js from prototype.conio.net Next you need to downloaded a zip code database. zipcode_example.html We are using the onkeyup event in the zip code input tag to fire the JavaScript function checkZip(). When the zip code length is 5, we make the AJAX request using prototype's Ajax.Updater class. Prototype also lets us define an error handler, we are using the function reportError to handle this. By now you're probably wondering what the $F() function does. checkZip.cfm style.css Related Entries Trackbacks Comments Pete,
articles | alternatives to innerHTML version 1.0 Last Revision: 02.10.2006 steve@slayeroffice.comslayeroffice.com Introduction The focus of this article will be to show you ways of doing things commonly reserved for innerHTML with only DOM methods. In each example, the innerHTML method will be shown, followed by its DOM based alternative. What's wrong with innerHTML? A few things: It's not a standard. Ok...anything good about it? Sure. It's faster than DOM methods. It was when my favelets stopped working for people when they were invoked on application/xhtml+xml sites that I decided to wash my hands of it (and do a lot of re-coding). Example One [1a] Creating an element. This example introduces three DOM methods. The second is the setAttribute method. The last is the appendChild method. innerHTML document.getElementById("mContainer").innerHTML = "<div id=\"myDiv\"></div>"; [1b] Creating an Element with Text In this example you'll use the createTextNode method of the document object. In this example, you'll create two elements.
AJAX Interface Design When any new technology undergoes fast and widespread adoption, there’s always an opportunity for unintended misuse. So it’s no surprise that the World Wide Web has seen its fair share of mishandled technologies: Download-heavy Java applets for simple page navigation Flash movies for superfluous intro animations Frames that disable simple book-marking and URL-sharing The overuse of images when simple HTML text would do Some of these technologies have been permanently scarred by excessive misuse. “Many of us have been so bombarded with bad press on client-side Java that advising anything other than an HTML-based front end would be like digging your own grave.” - Alex Kalinovsky Now as a flurry of interest in AJAX sweeps the Web, it’s worthwhile to consider the design implications of this technology lest we end up with “Skip AJAX” in the future. Fast & Incremental Of course updating only certain elements of a Web application interface is possible without AJAX. Communicating Change
A library of DHTML and AJAX scripts - DHTM Developing Web Applications with Ajax, Part 3 - WebReference.com In part 3 of this series on Ajax, we'll learn how to use Ajax in conjunction with server-side processing and how these technologies can produce powerful web applications. If you're interested in learning how to create webapps like GMail or Google Maps, this is a basic approach (although those are much more complex than we will get into in this article). For this article, I use PHP as the server-side language, but Ajax is compatible with any server-side language, so feel free to use whichever language is your favorite! Once more, we begin with code from the previous article, so you might need to read it for reference.
XMLHttpRequest & Ajax Working Examples - Links and Resources, Fiftyfoureleven.com LiveSearch - Bitflux Blog Wiki (#) Posted in Ajax Examples and Demos (XMLHttpRequest) on Friday, February 25th, 2005 The wiki page for the livesearch function. From the page: On the client side, we use XMLHttpRequest for sending the request to the server. There we have a little PHP script, which returns a small HTML file ( Amazon Zuggest (#) Posted in Ajax Examples and Demos (XMLHttpRequest) on Friday, March 4th, 2005 | Via From the site: This is my take on Google Suggest only with Amazon so I've called it "Amazon Zuggest". Francis writes "The Javascript runs in the browser and fires every so often, looks for something to search on, it shoots a request using XMLHttp to my webserver, which in turn creates a SOAP message that gets sent to Amazon. This is a cool little app. AJaX for weblogs (#) Posted in Ajax Examples and Demos (XMLHttpRequest) on Wednesday, March 9th, 2005 | Via XHTML live Chat via XMLHttpRequest (#) SproutLiner (#) Very cool...
myajaxos.com Editor gratutio para HTML, ASP, etc... JSON and Browser Security JSON is a data interchange format. It is used in the transmission of data between machines. Since it carries only data, it is security-neutral. The web browser is a peculiar application environment. This pain can be avoided by adopting good practices. I will share here a small set of principles which can be seen to be true. Never Trust The Browser The browser cannot and will not protect your secrets, so never send it your secret sauce. Keep Data Clean JSON is a subset of JavaScript, which makes it especially easy to use in web applications. On the server side, always use good JSON encoders and decoders. Script Tags Script tags are exempt from the Same Origin Policy. Any page that includes scripts from other sites is not secure. Another use of script tags is to deliver JSON data from different sites. Script tags can also be used to deliver Ajax Libraries. Don’t Send Data To Strangers All requests must be authenticated. Use SSL
How To Use AJAX Introduction AJAX, an acronym for Asynchronous JavaScript and XML, is the latest technology buzzword. Asynchronous means that you can make a request to a server via Hypertext Transfer Protocol (HTTP) and continue to process other data while waiting for the response. This means, for example, that you can make calls to a server-side script to retrieve data from a database as XML, send data to a server-side script to be stored in a database, or simply load an XML file to populate pages of your Web site without refreshing the page. I'm assuming that you have a basic understanding of the JavaScript and XML part of the acronym. I've created a sample project for this article (you can download the source code). How to Develop Web Applications with Ajax: Pt. 2 - WebReference. By Jonathan Fenocchi In part one of this series, we discussed how to retrieve remote data from an XML file via JavaScript. In this article, we'll learn how to process that data in a more complex manner. This article builds on the example code used in the previous article, so if you don't understand the code we start with here, you may want to go back and read it. Let's Begin Let's begin with our first step: forming the XML. Above, we have the XML declaration (states that the document is an XML 1.0 document, encoded with the UTF-8 character set standard), a root element ( We’re going to build upon the HTML document I built in the last lesson and expand it to make it more flexible with the new XML file here: You’ll notice we’re calling the function in the same way as last time, via a link, and we’re putting data into a DIV (this time named “dataArea”). We no longer have the updateObj function. Let’s analyze that processXML function now. First, a few variables are defined.
sproutliner Ajax on Rail by Curt Hibbs 06/09/2005 In a few short months, Ajax has moved from an obscure and rarely used technology to the hottest thing since sliced bread. This article introduces the incredibly easy-to-use Ajax support that is part of the Ruby on Rails web application framework. This is not a step-by-step tutorial, and I assume that you know a little bit about how to organize and construct a Rails web application. If you need a quick refresher, check out Rolling with Ruby on Rails Revisited and Rolling with Ruby on Rails Revisited, Part Two, as well as Bill Walton's monthly series, Cookin' With Ruby on Rails. Welcome back! Just in case you've been stranded on a faraway island for most of the year, here's the history of Ajax in 60 seconds or less. In the beginning, there was the World Wide Web. XMLHttpRequest must have been one of the Web's best kept secrets. Traditional Web App vs. an Ajax App At this point, a traditional web application sends the value of the input field to the server. Figure 1.
How to Develop Web Applications with Ajax, Pt. 1 - WebReference. By Jonathan Fenocchi In the past, web applications were limited because a web page had to be reloaded (or another page loaded in its place) in order for new data to be obtained. Other methods were available (without loading another page), but the techniques weren’t well supported and had a tendency to be buggy. The first step is to create an XML file with some data. Now let’s create a simple web page containing some sample data. Note that we link to the data.xml file for users without JavaScript. That’s quite a bit, so let’s take this one piece at a time. if(window.XMLHttpRequest){ xmlObj = new XMLHttpRequest(); } else if(window.ActiveXObject){ xmlObj = new ActiveXObject("Microsoft.XMLHTTP"); } else { return; } This is just a test for the availability of different objects – some browsers implement the XMLHttpRequest object differently, so when we define “xmlObj” as our XMLHttpRequest object, we have to define it depending on what browser implementation is available. Next is this block: