Technology Update: Ajax Basics Tutorial

Ajax| Basic Tutorials What is AJAX?

AJAX (asynchronous JavaScript and XML) is a new term, designed to describe two powerful features of JavaScript. These two properties have been overlooked by web developers for years, until recently Gmail, Google suggest and Google Maps's birth made people begin to realize its importance.

These two overlooked properties are:

* Request can be sent to the server without reloading the entire page.
* Parsing and processing of XML documents.

　　 Step "Please!"---how to send an HTTP request

To send an HTTP request to the server with JavaScript, you need a class instance with this functionality.

Such classes are first introduced by Internet Explorer as ActiveX objects, known as XMLHTTP. Later Mozilla, Safari and other browsers followed suit, providing the XMLHttpRequest class, which supports the methods and properties provided by Microsoft's ActiveX objects.

Therefore, in order to create a cross browser class instance (object), you can apply the following code:

if (window. XMLHttpRequest) {//Mozilla, Safari, ...
Http_request = new XMLHttpRequest ();
else if (window. ActiveXObject) {//IE
Http_request = new ActiveXObject ("Microsoft.XMLHTTP");
}

(The previous example simplifies the code to explain how to create an instance of the XMLHTTP class.) The actual code instance can be read in this step 3.

If the server's response does not have an XML Mime-type header, some Mozilla browsers may not work correctly. To solve this problem, if the header of the server response is not text/xml, other methods can be invoked to modify the header.

Http_request = new XMLHttpRequest ();
Http_request.overridemimetype (' Text/xml ');

Next you decide what you need to do when you receive a response from the server. This requires telling the HTTP request object which JavaScript function to use to handle the response. You can set the object's onReadyStateChange property to the name of the JavaScript function to use. As shown below:

Http_request.onreadystatechange = nameofthefunction;

Note: There is no parentheses after the function name, and there is no need to pass parameters. There is also a way to define a function in the title page (fly) and the behavior it will take in response, as follows:

Http_request.onreadystatechange = function () {
Do the Thing
};

After defining how to handle the response, the request is sent. You can call the open () and send () methods of the HTTP request class, as follows:

Http_request.open (' Get ', ' http://www.example.org/some.file ', true);
Http_request.send (NULL);

The first parameter of the * open () is the way that the HTTP request –get, POST, head, or any server supports you want to invoke. This argument is capitalized according to the HTTP specification, otherwise some browsers, such as Firefox, may not be able to process the request. For more information about HTTP request methods refer to http://www.w3.org/Protocols/rfc2616/ Rfc2616-sec9.html Specs

* The second parameter is the URL of the requesting page. Due to its own security features, this page cannot be a third party domain Name page. Also make sure to use the exact domain name in all pages, otherwise call open () will get "Permission denied" Error message. A common mistake is to use DOMAIN.TLD when you visit a site, but when you request a page, you use WWW.DOMAIN.TLD.

* The third parameter sets whether the request is asynchronous. If true, the JavaScript function will continue to execute without waiting for the server to respond. This is "a" in "AJAX".

If the first argument is "POST", the parameter of the Send () method can be any data that you want to send to the server. The data is then sent to the server as a string, as follows:

Name=value&anothername=othervalue&so=on

Step 2– "Receive!"---processing server response

When sending a request, provide the name of the JavaScript function that specifies the response to be processed.

Http_request.onreadystatechange = nameofthefunction;

Let's see what the function of this function is. First, the function checks the state of the request. If the status value is 4, it means that a full server response has been received and you will be able to handle the response.

if (http_request.readystate = = 4) {
Everything is good, the response is received
} else {
Still not ready
}

The readystate values are as follows:

* 0 (uninitialized)
* 1 (loading)
* 2 (Load complete)
* 3 (Interactive)
* 4 (complete)

(Source)

The function then checks the status value of the HTTP server response. Full state values can be found in the site. We focus on the response value of the OK.

if (Http_request.status = = 200) {
perfect!
} else {
There was a problem with the request,
For example the "response may" a 404 (Not Found)
or (Internal Server Error) Response codes
}

After checking the status value of the request and the HTTP status value of the response, you can process the data from the server. There are two ways to get this data:

* http_request.responsetext– Returns the response of the server as a text string
* http_request.responsexml–

Returns the response as a XmlDocument object. Processing XmlDocument objects can use JavaScript DOM functions

[1] [2] Next page