HTML5 8th class notes (simulate form submission data, xml parsing, jQuery Ajax method usage, mui ajax)

HTML5 8th class notes (simulate form submission data, xml parsing, jQuery Ajax method usage, mui ajax)

1. simulate form submission data: (get Mode)

 

"Get" action = "DataTest7 ">

"Text" name = "Uname"Value = "Yang"Id = "Myname">

"Password" name = "Upass"Value = "123"Id = "Mypass">

"Submit" value = "Login">

 

<Script>

VarOName = document. getElementById ("myname"). value;

VarOPass = document. getElementById ("mypass"). value;

VarXml =NewXMLHttpRequest ();

// Create a request

Xml. open ("GET", "DataTest7? Uname = "+ oName +" & upass = "+ oPass,True);

Xml. onreadystatechange =Function()

{

If(Xml. readyState = 4) // The response is returned, which does not necessarily mean that the response is successful.

{

If(Xml. status = 200) // The request is successful.

{

Alert (xml. responseText); // return the response body

}

}

}

Xml. send (Null);

</Script>

 

Returned data:

 

2. simulate form submission data: (post Mode)

 

"Get" action = "DataTest7">

"Text" name = "Uname"Id = "Myname"Value = "Fengjing"/>

"Password" name = "Upass"Id = "Mypass"Value = "123554">

"Submit" value = "Login"/>

 

<Script>

VarXhr =NewXMLHttpRequest ();

VarUname = document. getElementById ("myname"). value;

VarUpass = document. getElementById ("mypass"). value;

Xhr. open ("POST", "DataTest7 ",True); // Construct the request

// Xhr. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); // you can add any Header

Xhr. onreadystatechange =Function(){

If(Xhr. readyState = 4)

{

If(Xhr. status = 200)

{

Alert (xhr. responseText); // response body

}

}

};

Xhr. send ("uname =" + uname + "& upass =" + upass );

</Script>

 

 

The returned result is null.

 

We can see that the ajax refresh method and the form submission method have different headers, so data cannot be returned.

Add the header to return the correct result.

Xhr. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); // you can add any header.

 

 

3. xml parsing:

 

 

<Script>

VarXhr =NewXMLHttpRequest ();

// Create a request

Xhr. open ("GET", "DataTest4 ",TRue);

Xhr. onreadystatechange =Function()

{

If(Xhr. readyState = 4) // The response is returned, which does not necessarily mean that the response is successful.

{

If(Xhr. status = 200) // The request is successful.

{

// The Response Header must be application/xml or text/xml. xml will automatically generate xml interaction with the server.

VarOnodes = xhr. responseXML. getElementsByTagName ("title"); // the data type is detected.

// Alert (onodes. length );

For(VarI = 0; I

{

Alert (onodes [I]. childNodes [0]. nodeValue); // The text is the first node.

}

}

}

}

Xhr. send (Null);

</Script>

Note: xhr. responseXML indicates the xml dom, provided that the Content-Type of the Response Header must be text/xml or applicaion/xml.

 

 

 

Obtain the data in the title.

VarOnodes = xhr. responseXML. getElementsByTagName ("title"); // the data type is detected.

// Alert (onodes. length );

For(VarI = 0; I

{

Alert (onodes [I]. childNodes [0]. nodeValue); // The text is the first node.

}

}

 

 

 

 

 

Xml returned in the response body

 

 

 

4. jQuery Ajax method usage

 

<Scriptsrc = > </Script>

<Script>

$. Ajax ({

Url: "DataTest7 ",

Cache:False, // Prevents caching

Data: "uname = yang & upass = 123 ",

// DataType: "xml", // return xml

Type: "GET ",

Success:Function(Res) {// callback

Alert (res );

}

});

</Script>

 

 

 

5. mui ajax