Ankit Jain » ajax

Let’s Digg into Google Maps

Ankit — Thu, 17 Apr 2008 17:25:40 +0000

The Web would not be so simpler and interactive without Ajax. This technology makes Web applications pleasant, interactive, quick responsive and light weight. Take any of the online map applications, no matter whether it is Yahoo Maps, Google Maps or Windows Live Local, and you will find awesome precession, cutting edge technology (beyond DHTML, XML and JavaScript) well managed data. Being software developer, these always attract me and I want to understand the scene behind those best software architectures/implementations. Over the last few days I was studying (hacking) Google maps and wanted to see how it works? Here are my investigations.

Tiles: The very first observation is – not whole map is fetched at once. Instead the entire map is divided into tiles and a series of Ajax requests are fired to retrieve some part of the actually map. As soon as a tile is fetched it is displayed at its position. Their position is well calculated no matter user drags the maps while requests are on the way. The benefit here is, the user interface remains responsive and it makes user eager to analyze an area of map as soon as it’s available.

Overlaying: The tiles can be considered basic unit of mapping applications. They are atomic and have minimal required information. The DHTML allows overlapping one tile (image) over another and makes development easier. Here is how.

For each type of data there exists an independent tile. The Ajax application retrieves these tiles and overlaps one above another. For example – the user requests to see map and satellite image together, and here is how the rendered image is showed.

	+
\|\|

Tiles are Independent: Each tile is an independent unit and its request can be customized from client browser itself. For example making a request of http://kh2.google.com/kh?n=415&v=22&hl=en&t=trtssqrtqsqqtqq returns -

This is a newer image. While the request for http://kh2.google.com/kh?n=415&v=21&hl=en&t=trtssqrtqsqqtqq yields and older image for the same area.

Here the difference in the requests is of a single parameter ‘v’ and as per my guess its ‘version’. The next parameter ‘t’ seems a combination of zoom index, and the corner coordinates. For tiles of type map having some text, their language can be controlled using ‘hl=en’. Try using ‘hl=ru’ and you can see difference. So, the JavaScript executing in the client’s browser has complete control over what to display.

Ajax: Probably this needs to be the first point I should discuss. Google Maps does not use XMLHttpRequest for making Ajax calls. Instead, they have used I-FRAME (iFrame) for preloading images. When you use Firebug you won’t be also to trace any XMLHttpRequest calls. I think the reason for this would be the difficulty in using and image/jpeg response from XMLHttpRequest as an image object and display it in browser.

- ankit

Ajax Tutorial Series

Ankit — Fri, 20 Oct 2006 06:18:54 +0000

Want to learn Ajax from scratch? Here is a series of tutorials for you.

Mastering Ajax, Part 7: Using XML in requests and responses
Brett McLaughlin demonstrates how you can use XML as the data format for sending asynchronous requests.

Mastering Ajax, Part 6: Build DOM-based Web applications
Continue to explore how DOM programming fits into interactive Ajax applications as Brett McLaughlin completes his trilogy of articles on DOM programming with a DOM application in practice.

Mastering Ajax, Part 5: Manipulate the DOM
Last month Brett introduced the Document Object Model, whose elements work behind the scenes to define your Web pages. This month he dives even deeper into the DOM. Learn how to create, remove, and change the parts of a DOM tree, and take the next step toward updating your Web pages on the fly!

Mastering Ajax, Part 4: Exploiting DOM for Web response
The great divide between programmers (who work with back-end applications) and Web programmers (who spend their time writing HTML, CSS, and JavaScript) is long standing. However, the Document Object Model (DOM) bridges the chasm and makes working with both XML on the back end and HTML on the front end possible and an effective tool. In this article, Brett McLaughlin introduces the Document Object Model, explains its use in Web pages, and starts to explore its usage from JavaScript.

Mastering Ajax, Part 3: Advanced requests and responses in Ajax
For many Web developers, making simple requests and receiving simple responses is all they’ll ever need, but for developers who want to master Ajax, a complete understanding of HTTP status codes, ready states, and the XMLHttpRequest object is required. In this article, Brett McLaughlin will show you the different status codes and demonstrate how browsers handle each and he will showcase the lesser-used HTTP requests that you can make with Ajax.

Mastering Ajax, Part 2: Make asynchronous requests with JavaScript and Ajax
Most Web applications use a request/response model that gets an entire HTML page from the server. The result is a back-and-forth that usually involves clicking a button, waiting for the server, clicking another button, and then waiting some more. With Ajax and the XMLHttpRequest object, you can use a request/response model that never leaves users waiting for a server to respond. In this article, Brett McLaughlin shows you how to create XMLHttpRequest instances in a cross-browser way, construct and send requests, and respond to the server.

Mastering Ajax, Part 1: Introduction to Ajax
Ajax, which consists of HTML, JavaScript, DHTML, and DOM, is an outstanding approach that helps you transform clunky Web interfaces into interactive Ajax applications. The author, an Ajax expert, demonstrates how these technologies work together — from an overview to a detailed look — to make extremely efficient Web development an easy reality. He also unveils the central concepts of Ajax, including the XMLHttpRequest object.

~ Ankit

[Edited on March 20, 2007:

One more classsic tutorial for Ajax basics: http://www.harrymaugans.com/2007/03/18/tutorial-ajax-made-easy/

]

AJAX Guide !

Ankit — Mon, 31 Jul 2006 09:09:42 +0000

Johnson compiles a useful list of Ajax resources. It contains resource for PHP/Java/ASP.net.

[Edited: Oct 13th, 2006]
And here we go to hack an Ajax website.

Using ‘Firebug’ (and extension to FireFox) you can discover ajax calls, stack trace of errors, etc;
Using ‘chickenfoot’ provides a programming environment within the browser (ie. simulation of user clicks, etc;)

~ Ankit