Ajax first experience above hand posts _ajax related

Ajax is a hot thing in the past two years, I also join the fun, some days to find some tutorials to learn, the following is the whole process of learning to write their own things, but, because it is a beginner, so

Please forgive me if you have a mistake, and you are welcome to correct me, vipxjw#163.com.

PS. After the finished reading, the results again verify that the tutorial is really messy can, East said a piece of the West said, the level is not very clear said:).

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, in the creation of XMLHttpRequest should also take into account a variety of bangs

The situation of the navigator. 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 referring to some information, I use

The following method creates the XMLHttpRequest object:

Copy Code code as follows:

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, if it is not

An "Access Denied" error appears. At the local height, you must also run a Web server and not open the page directly in the browser.

Copy Code code as follows:

Open a request using the Open method, which has 3 parameters, namely, the request method, the URL of the request file, and the synchronization method (? Not quite clear what it is called:)

The request method can be one of the get,post,head, because I want to get the file, so I

Request the URL of the file, directly with the relative path

Synchronous mode, which indicates 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 is meant to be asynchronous, so here

With True

Xmlobj.open ("Get", "Sample.xml", true);

Because the asynchronous way is used, it is necessary to handle the state of the XMLHttpRequest object as it is changed.

Xmlobj.onreadystatechange=function () {

If the XMLHttpRequest state is 4, it should be ready, then continue processing

if (xmlobj.readystate==4) {

Need to determine whether the return state is OK, in some cases, if the file does not exist, to return 404

if (xmlobj.status==200) {

All OK, call the processing process

Domyxml ();

}

}

}

Send the request because it is get, so send's contents 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.

Copy Code code as follows:

<%

' Modifier Header ID indicates that this is an XML document

Response.contenttype= "Text/xml"

' ......

Strxml= "<?xml versin=" "1.0" "encoding=" "gb2312" "?>"

' 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:

Copy Code code as follows:

<?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:

Copy Code code as follows:

function Domyxml () {

    var xmldoc,items,title,content;

   //First get XML document from XMLHttpRequest object

    xmldoc=xmlobj.responsexml;

   //Get Items

    items=xmldoc.getelementsbytagname ("item");

   //finally get what you want based on tagname

   //If there is more than one item in the 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:

Copy Code code as follows:

<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;
[/code]
OK, these are almost the basis for writing AJAX programs, specifically to see the individual play, of course, Ajax and not only these, and if the Post method to send data, but this has not learned,

So we can only talk about these ^_^. Or that sentence, because it is a beginner, there are mistakes unavoidable, welcome to correct.