A simple Ajax example and Analysis

Source: Internet
Author: User
I sorted out the first small program I wrote when I started reading Ajax last year. It should be regarded as the simplest application of Ajax.

First, demonstrate the actual running ajax/ajax.html 'target = '_ blank' class = 'l2'> effect. Click the "see Author" link in the pop-up page. You will see the author of this page. From the Page Submission to the display of the results obtained from the server, you will not find the page refresh.
The code for this example is as follows:
1. ajax.html

1. <HTML>
2. 3. <meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1">
4. <title> A simple Ajax example </title>
5. <SCRIPT type = "text/JavaScript"> <! --
6. Function findauthor (File ){
7. var xmlobj = NULL;
8. If (window. XMLHttpRequest ){
9. xmlobj = new XMLHttpRequest ();
10.} else if (window. activexobject ){
11. xmlobj = new activexobject ("Microsoft. XMLHTTP ");
12.} else {
13. return;
14 .}
15. xmlobj. onreadystatechange = function (){
16. If (xmlobj. readystate = 4 ){
17. updateobj ('author ',
18. xmlobj. responsexml. getelementsbytagname ('name') [0]. firstchild. data );
19 .}
20 .}
21. xmlobj. Open ('get', file, true );
22. xmlobj. Send ('');
23 .}
24. Function updateobj (OBJ, data ){
25. var textnode = Document. createtextnode (data );
26. Document. getelementbyid (OBJ). appendchild (textnode );
27 .}
28. // --> </SCRIPT>
29. 30. <body>
31. 32. <p id = "OBJ"> This page is powered by <a id = 'link' href = "data. xml"
33. Title = "view the author ."
34. onclick = "findauthor ('data. xml'); this. style. Display = 'none'; return false"> see
35. Author. </a> <span id = "author" style = "color: olive; font-weight: bolder"> </span> </P>
36. </body>
37.

2. Data. xml

1. <? XML version = "1.0" encoding = "UTF-8"?>
2. <author>
3. <Name> www.jsfchina.org </Name>
4. </author>

Resolution.

This example is the simplest Ajax application. For simplicity, no server technologies, such as Servlet and CGI, are used here. No business method is used here, but data is read directly from an XML document (data. XML) on the server. For simplicity, the Javascript file is also integrated into ajax.html, which can be used independently in practical applications.

In this example, a JavaScript method is triggered by clicking the link and then interactive processing is performed.

The core of AJAX is XMLHttpRequest. In this example, this object is created using the following code:

1. var xmlobj = NULL;
2. If (window. XMLHttpRequest ){
3. xmlobj = new XMLHttpRequest ();
4.} else if (window. activexobject ){
5. xmlobj = new activexobject ("Microsoft. XMLHTTP ");
6.} else {
7. return;
8 .}

If (window. XMLHttpRequest) processes the Mozilla browser, while if (window. activexobject) processes the IE browser for the purpose of creating an XMLHTTPRequest object. This object is created to allow the XMLHTTPRequest object to interact with the server without affecting the page that the user is browsing. This is also the origin of Ajax title. Asynchronous JavaScript interacts with XML processing.

After an XMLHTTPRequest object is created, the called function listens to changes in the object status, that is, the onreadystatechange attribute. The XMLHTTPRequest object has five statuses, ranging from 0 to 4 integers. That is to say, the function called by onreadystatechange (function () {...} in the example) will be executed four times. In this example, we process this object when it is in the completed state (readystate = 4) (at this time, the server has returned all information ), added a textnode for the span object with ID "author", which is data. the value of the first child element of the Name node in the XML document.

Well, this is the step required to complete an Asynchronous interaction.

Note.

First, you can use post for the http get method used in this example, but you need to set the Content-Type value, that is, xmlobj. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded"), which is used to set the MIME type. Note that these methods should be written in uppercase, otherwise they will not work in Firefox.

Second, xmlobj. Open ('get', file, true ). This method establishes a link with the server. 'get' indicates the HTTP call method; file indicates the called URL; true indicates that the call is asynchronous, which can be omitted, the default value is 'true '.

Third, xmlobj. Send (para) sends a request to the server. Send a request to the server using post. The parameter format is: Name = namevalue & so = on

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.