Basic Tutorials | tutorials | Sample |ajax This article will take you through the basics of Ajax and show you two simple examples to ease your journey.
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:
You can send a request 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 open () is the way that HTTP request –get, POST, head, or any server support 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 request page. Due to its own security features, this page cannot be a third party domain Name page. At the same time must ensure that all pages are using the exact domain name, 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 (in interaction)
4 (complete)
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
step 3– "Everything is ready!"-simple example
We will now complete the whole process once and send a simple HTTP request. We request an HTML file with JavaScript, test.html, and the text of the file is "I ' m a test." Then we "alert ()" test.html the contents of the file.
Style= "Cursor:pointer; Text-decoration:underline "
>
Make a request
In this example:
User clicks on the "Request" link on the browser;
Then the function makerequest () is invoked. Its parameter –html file test.html in the same directory;
This initiates a request. The results of the onreadystatechange will be transmitted to alertcontents ();
Alertcontents () checks that the server's response was received successfully and, if so, "alert ()" test.html the contents of the file.
step 4– an "x-document"---process an XML response
In the previous example, when the server's response to the HTTP request was received, we invoked the Reponsetext property of the Request object. This property contains the contents of the test.html file. Now let's try the Responsexml attribute.
First, we create a valid XML file, which we will use later. The file (test.xml) source code looks like this:
I ' m a test.
In this script, we just need to modify the request part:
...
>
...
Then, in Alertcontents (), we will alert () Code alert (Http_request.responsetext), and replace with:
var xmldoc = Http_request.responsexml;
var root_node = xmldoc.getelementsbytagname (' root '). Item (0);
alert (root_node.firstChild.data);
Here, we use the XmlDocument object provided by Responsexml and the DOM method to get the content that is stored in the XML file.
