Ajax first experience above hand posts _ajax related

Ajax first Experience Hand posts

Ajax is a hot thing these two years, I also join in the fun, some days to find some tutorials to learn, the following on the whole process of their own learning to write, but, because is a beginner, so there are mistakes please forgive me, welcome to correct the ^_^.

1. Create a XMLHttpRequest Object

Now there are many browsers, the way to create XMLHttpRequest is not the same, so in order to be compatible with various browsers, the creation of XMLHttpRequest should also take into account the situation of various browsers. The current mainstream browsers under Windows have IE, Firefox and opera, so we write code to try to be compatible with these several browsers. After referencing some of the data, I use the following method to create the XMLHttpRequest object:

CODE:

First define a variable and assign the initial value to False to make it easy to determine if the object was created successfully
var xmlobj = false;
Use try to capture the creation failure, and then another way to create
try {
Use this method in Mozilla to create a XMLHttpRequest object
Xmlobj=new XMLHttpRequest;
}
catch (e) {
try {
If unsuccessful, try the way in newer IE
Xmlobj=new ActiveXObject ("MSXML2"). XMLHTTP ");
}
catch (E2) {
try {
Failure attempts to use the older version of IE in the way
Xmlobj=new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (E3) {
or fail, it is assumed that the creation failed ...
Xmlobj=false;
}
}
}
If creating a XMLHttpRequest object fails, remind the visitor that the page may not be properly accessed
if (!xmlobj) {
Alert ("XMLHttpRequest init failed!");
}

2. Use XMLHttpRequest to get XML documents

Using XMLHttpRequest to get XML needs to be aware that this document must be in the same domain as myself, and my understanding is under the same domain name, or in the same directory, and if not, there will be an "access denied" error. At the local height, you must also run a Web server and not open the page directly in the browser.

CODE:

The

//uses the Open method to open a request, which has 3 parameters, namely, the request method, the URL of the request file, and the synchronization method (? Not exactly what it is called:)
//request can be get,post, One of the head, because I'm going to get the file, so I'll use the Getting
//Request file URL, directly using the relative path to
///sync, to indicate whether the request is waiting for a response (false) or continues to execute the following code (TRUE), which is called asynchronous. Ajax's first a means asynchronous, so this is true
Xmlobj.open ("Get", "Sample.xml", true);
Because you use asynchronous methods, you do the appropriate processing when the state of the XMLHttpRequest object changes
Xmlobj.onreadystatechange=function () {
   //IF The XMLHttpRequest state is 4 and should be ready, so continue with
    if (xmlobj.readystate==4) {
        //need to determine whether the return status is OK, and in some cases, if the file does not exist, return 404
        if ( xmlobj.status==200) {
           //All OK, calling process
            Domyxml ();
       }
   }
}
//Send the request because it is get, so the contents of send are null
Xmlobj.send (NULL);

3. Use ASP to create XML document

In order to dynamically display the need, it is necessary to use the Dynamic Web page, I use ASP.

CODE:

<%
' Modifier Header ID indicates that this is an XML document
Response.contenttype= "Text/xml"
' ......
Strxml= "<?xml versin=" "1.0" "encoding=" "Utf-8" "?>"
' Here's what XML requires to output the contents of the database.
strxml=strxml& "..."
' ......
Response.Write (Strxml)
%>

4. Working with XML documents

After you get the XML document, get what you need, if I get the following XML document from the service:

CODE:

<?xml version= "1.0" encoding= "gb2312"?>
<root>
<item>
<title>ajax study</title>
<content>study ajax</content>
</item>
</root>

What I want is title and content, so you can do this as follows:

CODE:

function Domyxml () {
var xmldoc,items,title,content;
Get the XML document from the XMLHttpRequest object first
Xmldoc=xmlobj.responsexml;
Get Items again
Items=xmldoc.getelementsbytagname ("item");
Finally, according to TagName to get what you want.
If you have more than one item in an XML document, you can use the subscript of the array to represent the first few
Title=items[0].getelementsbytagname ("title") [0].firstchild.data;
Content=items[0].getelementsbytagname ("content") [0].firstchild.data;
}

Well, now that I've got what I want, I can show it.

5. Output processing Results

Let's assume that you have an HTML document that shows what you want to output:

CODE:

<title>ajax study</title>
<body>
<div id= "Mydisplay" ></div>
</body>

This defines a DIV container with ID mydisplay to display the output, OK, and then go to JS:

CODE:

//... Connect Domyxml;
Content=items[0] ...
var strhtml;
Organize what you want to show first.
Strhtml= "Item title:" + title + "<br/>item content:" + content;
Gets the target container, and then sets its innerhtml to be displayed
document.getElementById ("Mydisplay"). innerhtml=strhtml;

Well, these are almost the basis for writing AJAX programs, the specific use of personal play, of course, Ajax and not only these, more can refer to the relevant information.