Making asynchronous requests using JavaScript and Ajax

In this article, you will begin to touch the most basic and basic Ajax-related objects and programming methods: XMLHttpRequest objects. This object is actually just a public thread spanning all Ajax applications, and you may have expected that only a thorough understanding of the object would give full play to the potential of programming. In fact, sometimes you'll find that you can't use XMLHttpRequest to use XMLHttpRequest correctly. What the hell is going on here?

WEB 2.0 Glimpse

Before delving into the code, take a look at the recent view--be sure to be very clear about the concept of Web 2.0. When you hear the Word Web 2.0, you should first ask "What is Web 1.0?" "Although you rarely hear about Web 1.0, it actually refers to a traditional web with a completely different request and response model." For example, click a button on the Amazon.com site or enter a search term. A request is sent to the server, and then the response is returned to the browser. This request is not just a list of books and bibliographies, but another complete HTML page. So when a Web browser is redrawn with a new HTML page, you may see flicker or jitter. In fact, you can see the requests and responses clearly from each new page you see.

Web 2.0 (to a large extent) eliminates this visible reciprocating interaction. For example, visit sites such as Google Maps or Flickr (see Resources for links to these support Web 2.0 and Ajax sites). For example, on Google Maps, you can drag the map, zoom in and out, with little redraw operations. Of course there are still requests and responses, but they are hidden behind the scenes. As a user, the experience is more comfortable and feels like a desktop application. This new feeling and paradigm is what you realize when someone mentions Web 2.0.

The need to be concerned is how to make these new interactions possible. Obviously, you still need to make requests and receive responses, but it is the HTML redraw that interacts with each request/response that makes for slow, clumsy Web interaction. So it's clear that we need a way to make requests and receive responses that only contain the data that you need rather than the entire HTML page. The only time you need to get the whole new HTML page is when you want the user to see the new page.

Most interactions, however, add details to existing pages, modify body text, or overwrite existing data. In these cases, Ajax and Web 2.0 methods allow data to be sent and received without updating the entire HTML page. For those who often surf the internet, this ability can make your applications feel faster, respond more promptly, and let them visit your site from time to times.