Quick learning of Ajax 2 Basic Ajax Extension

In the previous lesson, I gave a simple example and analyzed how to create an XMLHTTPRequest object.

In this lesson, we will describe the XMLHTTPRequest object in detail.

First, let's take a look at the XMLHTTP. Send (); Method encountered in the last lesson. This send (string) can contain a parameter. However, it must be in "Post" mode. In my above example, it should be written as XMLHTTP. Send (null );

Can you give it a try? Is the result correct?

So there may be a problem? Under what conditions is post and get used?

First, we know that there are two ways to submit a form.

Get: Certainly faster than post. And the available range is wide.

Post:

Post is recommended in the following cases

1. Send a large amount of data to the server.

2. Send the password or something. Why? High security.

 

Let's continue with yesterday's example: a problem may be found by our garden friends yesterday, that is, we click show time. If the browser is not closed, open it again, so our time is always a time. Why?

Because you may get cache results. It's also very easy to solve this problem.ProgramPersonnel should have a habit of solving this problem.

Okay, no more. You can add a parameter to the URL in the above example.

 
FunctionGetajax () {XMLHTTP. Open ("Get","Ajax. ashx? I ="+ Math. Random (),True); XMLHTTP. onreadystatechange =Function(){If(XMLHTTP. readystate = 4 & XMLHTTP. Status = 200) {alert (XMLHTTP. responsetext) ;}} XMLHTTP. Send ();}
 

What is the effect of wood? Are the results still the same?

The following is an example. If you are interested in shoes, you can log on to the shoes by yourself. Also, I am Based on ASP. net's original ecological Ajax, so you may, so some of my examplesCodeIs Based on ASP. NET.

So you may need to pay attention to it.

First, modify Ajax. ashx [Code of this general handler]

 

 

Public voidProcessrequest (HttpcontextContext) {context. response. contenttype ="Text/html";StringName = context. request ["Name"]. Tostring ();StringSex = context. request ["Sex"]. Tostring (); context. response. Write (String. Format ("Hello everyone, I am {0} and I am {1 }", Name, sex ));}
 

After modification, the following is the page code of ajax1.htm.

 

 <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"> < Head  > <  Title  > </  Title  > <  Script  Type  = "Text/JavaScript"> VaR XMLHTTP = False ; // It doesn't matter what it means  Try {XMLHTTP = New Activexobject ( "Msxml2.xmlhttp" );}Catch (E1 ){ Try {XMLHTTP = New Activexobject ( "Microsoft. XMLHTTP" );} Catch (E2) {XMLHTTP = False ;}} If (! XMLHTTP && Typeof XMLHttpRequest! = 'Undefined' ) {XMLHTTP = New XMLHttpRequest ();

} Function Getajax () {XMLHTTP. Open ( "Get" , "Ajax. ashx? Name = kindz & sex = man" , True ); XMLHTTP. onreadystatechange = Function (){ If (XMLHTTP. readystate = 4 & XMLHTTP. Status = 200) {document. getelementbyid ( 'Gettext' ). Innerhtml = XMLHTTP. responsetext;} XMLHTTP. Send ();} </  Script  > </  Head > <  Body  > <  Input  Type  = "Button"  Value  = "Click me to show who I am? "  Onclick  = "Getajax ();"/> <  Div  ID  = "Gettext"> </  Div  > </  Body  > </ Html  > 

Now, we have prepared for the task. You can see it this time.

XMLHTTP. Open ("Get","Ajax. ashx? Name = kindz & sex = man",True); Do you understand this sentence? The get method can contain parameters.

The following is a post version of the above example.

 

FunctionGetajax () {XMLHTTP. Open ("Post","Ajax. ashx",True); XMLHTTP. setRequestHeader ("Content-Type","Application/X-WWW-form-urlencoded"); XMLHTTP. onreadystatechange =Function(){If(XMLHTTP. readystate = 4 & XMLHTTP. Status = 200) {document. getelementbyid ('Gettext'). Innerhtml = XMLHTTP. responsetext;} XMLHTTP. Send ("Name = kingdz & sex = man");}
 

Remember the above

XMLHTTP. setRequestHeader ("Content-Type","Application/X-WWW-form-urlencoded"); This must be set. setRequestHeader () is used to add the HTTP header.

The following is the setting ---- we will explain it later.

SetRequestHeader (Header name,Value);

Now, let's take a look at XMLHTTP. Open ("Post","Ajax. ashx",True); "True ";

If the XMLHTTPRequest object is used for Ajax, The async parameter of its open () method must be set to true:

Note: async: True (asynchronous) or false (synchronous)

When async = true is used, we can use the functions executed when the onreadystatechange event is in the ready state.

This is the example we used earlier.

When you use async = false, do not use the onreadystatechange function.

Put the code we run after the send () statement.

 

You can find this document. However, for beginners, remember to set it to true and use Ajax.

FunctionGetajax () {XMLHTTP. Open ("Post","Ajax. ashx",False); XMLHTTP. setRequestHeader ("Content-Type","Application/X-WWW-form-urlencoded"); XMLHTTP. Send ("Name = kingdz & sex = man"); Document. getelementbyid ('Gettext'). Innerhtml = XMLHTTP. responsetext ;}
 

 

Now let's talk about the responsetext or responsexml attributes of the XMLHTTPRequest object.

Frequently used:

Responsetext:

Obtain response data in string format.

Responsexml:

Obtain response data in XML format.

Not commonly used: [do not elaborate]

Responsebody:

Obtain response data in the form of an unsigned byte array

Responsestream

Obtain response data in the istream format.

 

We have always used responsetext above.

 

Next, let's talk about responsexml in detail.

First, we need to prepare an XML file ajax1.xml

 <?  XML  Version  = " 1.0 " Encoding  = " UTF-8 " ?> <  Ajaxstudent  > <  Student Name  = " Kinddz " > <  Sex  > 21 </  Sex  > <  Chinesename  > Haha </  Chinesename  > </  Student  > < Student  Name  = " Wdz " > <  Sex  > 22 </  Sex  > <  Chinesename  > Haha </  Chinesename  > </  Student  > < Student  Name  = " ADZ " > <  Sex  > 22 </  Sex  > <  Chinesename  > Xi </  Chinesename  > </  Student  > </ Ajaxstudent  > 

Now, modify the following:

 Function Getajax () {XMLHTTP. Open ( "Get" , "Ajax1.xml" , True ); XMLHTTP. onreadystatechange = Function (){ If (XMLHTTP. readystate = 4 & XMLHTTP. Status = 200) {xmldoc = XMLHTTP. responsexml; // Read the ajax1.xml File Getxml = "" ; Chinesename = xmldoc. getelementsbytagname ("Chinesename" ); // This is a node in our XML file.  For (I = 0; I <chinesename. length; I ++) {getxml = getxml + chinesename [I]. childnodes [0]. nodevalue + "<Br/>" ;} Document. getelementbyid ( "Getxml" ). Innerhtml = getxml ;}} XMLHTTP. Send ();}

 
Okay. After modification, modify the HTML code.
 

<Body> <InputType= "Button"Value= "Click I to display the chinesename in the XML file? "Onclick= "Getajax ();"/> <DivID= "Getxml"> </Div> </Body>
 

OK is over

At this point, we have learned about the basic Ajax knowledge. Thank you for your support!