Chapter 2: Send asynchronous requests using JavaScript and Ajax

xiaoxiao2021-04-04  283

In this article, you will begin contact with the most basic and basic objects and programming methods for Ajax: XMLHttpRequest objects. This object is actually just a common thread across all Ajax applications, which may have been expected that only thorough understanding the object to give full play to the potential of programming. In fact, sometimes you will find that XMLHTPREQUEST is not possible to use XMLHttpRequest correctly. What has actually happened?

WEB 2.0

First see the nearest view before going deep into the study - I must know the concept of Web 2.0. When I heard the word Web 2.0, I should first ask "What is WEB 1.0?" Although few listening to people mentioned Web 1.0, it is actually a traditional web that has a completely different request and response model. For example, click on a button or enter the search term on the Amazon.com website. Just send a request to the server, then return to the browser. This request is not just a list of books and books, but another complete HTML page. Therefore, when the web browser is redrawged with the new HTML page, it may be blinking or jitter. In fact, the request and response can be clearly seen by seeing each new page.

Web 2.0 (to a large extent) eliminates this visible reciprocal interaction. For example, access to Google Maps or Flickr (see Resources) for these supports Web 2.0 and AJAX sites. For example, on Google Maps, you can drag maps, zoom in, and shrink, only few redraw operations. Of course, there is still a request and response here, but it is only hidden behind the scenes. As a user, the experience is more comfortable, it feels like a desktop app. This new feeling and model is that when someone mentioned Web 2.0 you experience.

What you need to care is how to make these new interactions. Obviously, it is still necessary to issue a request and reception response, but it is the feeling of slow, clumsy web interaction, which is a slow, clumsy web interaction. So it is clear that we need a way to make the request and the received response contain only the required data instead of the entire HTML page. The only need to get the entire new HTML page, you want users to see the new page.

However, most interactions add details on existing pages, modify the main text or overwrite the original data. In these cases, AJAX and Web 2.0 methods allow for sending and receiving data without updating the entire HTML page. For those who are often online, this ability allows your app to feel faster, respond more timely, let them visit your website from time to time.

Introduction to XMLHttpRequest

To truly implement this beautiful miracle, you must be very familiar with a JavaScript object, ie XMLHttpRequest. This little object is actually existed in several browsers. It is the core of Web 2.0, Ajax, and most other contents to be introduced in the next few months. In order for you to know it quickly, the following will give a few ways and properties that will be used for this object.

Open (): Create a new request to the server. Send (): Sends a request to the server. Abort (): Exit the current request. ReadyState: Provides the current HTML ready state. ResponseText: The request responded to the server returned.

If you don't understand these (or any one of them), you don't have to worry, we will introduce each method and attribute in the following articles. What should I know now is to make anything to do with XmlhttpRequest. Note that these methods and properties are related to the send requests and process responses. In fact, if all methods and properties of XMLHttpRequest are seen, they will find that they are related to very simple request / response models. Obviously, we will not encounter a very new GUI object or a certain ultrabic mysterious way to create a user interaction, we will use a very simple request and a very simple response. It seems that there is not much attractive, but the object can completely change your app. Simple New

First, you need to create a new variable and assign it an instance of an XMLHttpRequest object. This is very simple in JavaScript, as long as the NEW keyword is used, as shown in Listing 1.

Listing 1. Creating a new XMLHttpRequest object