Basic Ajax tutorial (1) _ sending requests

Last Update:2018-12-05 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1, The open () method of the XMLHttpRequest object specifies the request to be sent. The open () method has three parameters: a string indicating the method used (usually GET or POST), a string indicating the URL of the target resource, and a Boolean value, indicates whether the request is asynchronous.

2, The send () method of the XMLHttpRequest object sends the request to the specified target resource. The send () method accepts a parameter, usually a string or a DOM object. This parameter is sent to the target URL as part of the Request body. When providing parameters to the send () method, make sure that the method specified in open () is POST. If no data is sent as part of the Request body, null is used.

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<Head>

<Title> Simple XMLHttpRequest </title>

Var xmlHttp;

Function createXMLHttpRequest () {if (window. activeXObject) {xmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");} else if (window. XMLHttpRequest) {xmlHttp = new XMLHttpRequest ();}

}

Function startRequest () {createXMLHttpRequest (); xmlHttp. onreadystatechange = handleStateChange; xmlHttp. open ("GET", "simpleResponse. xml", true); xmlHttp. send (null );

}

Function handleStateChange () {if (xmlHttp. readyState = 4) {if (xmlHttp. status = 200) {alert ("The server replied with:" + xmlHttp. responseText );}}

}

</Script>

</Head>

</Body>

</Html>

Send request parameters

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<Head>

<Title> Sending Request Data Using GET and POST </title>

<Script type = "text/javascript">
Var xmlHttp;
Function createXmlHttp (){
If (window. ActiveXObject ){
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHttpRequest ){
XmlHttp = new XMLHttpRequest ();
}

}
Function createQueryString ()
{
Var firstName = document. getelementbyidx_x_x_x_x_x_x_x ("firstName"). value;
Var middleName = document. getelementbyidx_x_x_x_x_x_x_x ("middleName"). value;
Var birthday = document. getelementbyidx_x_x_x_x_x_x_x ("birthday"). value;
Var queryString = "firstName =" + firstName + "& middleName =" + middleName + "& birthday =" + birthday;
Return queryString;
}

Function doRequestUsingGET ()
{
CreateXmlHttp ();
Var queryString = "Default. aspx? ";
QueryString = queryString + createQueryString () + "timeStamp =" + new Date (). getTime ();
XmlHttp. onreadystatechange = handleStateChange;
XmlHttp. open ("Get", queryString, true );
XmlHttp. send (null );
}
Function doRequestUsingPOST ()
{
CreateXmlHttp ()
Var url = "Default. aspx? TimeStamp = "+ new Date (). getTime ();
Var queryString = createQueryString ();
XmlHttp. onreadystatechange = handleStateChange;
XmlHttp. open ("Post", url, true );
XmlHttp. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded ;");
XmlHttp. send (queryString );

}
Function handleStateChange ()
{
If (xmlHttp. readyState = 4 ){
If (xmlHttp. status = 200 ){
GetResult ();
}
}

}

Function getResult ()
{
Var responseDiv = document. getelementbyidx_x_x_x_x_x_x_x ("serverResponse ");
If (responseDiv. hasChildNodes ()){
ResponseDiv. removeChild (responseDiv. childNodes [0]);
}
Var responseText = document. create_r_r_r_r_r_r_r_rTextNode (xmlHttp. responseText );
ResponseDiv. appendChild_xss (responseText );

}
</Script>

</Head>

<Body>
<H1> Enter your first name, middle name, and birthday: <Table> <tbody>
<Tr> <td> First name: </td> <input type = "text" id = "firstName"/> </tr>
<Tr> <td> Middle name: </td> <input type = "text" id = "middleName"/> </tr>
<Tr> <td> Birthday: </td> <input type = "text" id = "birthday"/> </tr> </tbody> </table>
<Form action = "#">
<Input type = "button" value = "Send parameters using GET" onclick = "doRequestUsingGET ();"/> <br/>
<Input type = "button" value = "Send parameters using POST" onclick = "doRequestUsingPOST ();"/> </form>
<Br/>

</Body>

</Html>

Request Parameters are sent as XML

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> No title page </title>
<Script>
Var xmlHttp = null;
Function createHttpRequest (){
If (xmlHttp = null ){
If (window. XMLHttpRequest ){
XmlHttp = new XMLHttpRequest ();
} Else if (window. ActiveXObject ){
Try {
XmlHttp = new ActiveXObject ("Msxml2.XMLHTTP ");
} Catch (e ){
Try {
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
} Catch (e ){
Alert ("xmlHttp creation failed! ");
}
}
}
}

}

Function createXML ()
{
Var xml = "<? Xml version = '1. 0' encoding = 'utf-8'?> <Pets> ";
Var options = document. getElementByIdx_x_x_x ("petTypes ");
Var option = null;
For (var I = 0; I <options. length; I ++ ){
Option = options [I];
If (option. selected ){
Xml = xml + "<type>" + option. value + "<\/type> ";
}
}
Xml = xml + "<\/pets> ";
Return xml;
}

Function sendPetTypes (){
If (xmlHttp = null ){
CreateHttpRequest ();
If (xmlHttp = null)
{
Alert ("xmlHttp creation failed ");
}
}
Var xml = createXML ();
Var url = "Default. aspx? TimeState = "+ new Date (). getTime ();
XmlHttp. open ("Post", url, true );
XmlHttp. onreadystatechange = handleStateChange;
XmlHttp. setRequestHeader ("Content_Type", "application/x-www-form-urlencoded ;")
XmlHttp. send (xml );
}

Function handleStateChange (){
If (xmlHttp. readyState = 4 ){
If (xmlHttp. status = 200 ){
ParseResults ();
}
}
}

Function parseResults (){
Var responseDiv = document. getElementByIdx_x_x_x ("serverResponse ");
If (responseDiv. hasChildNodes ()){
ResponseDiv. removeChild (responseDiv. childNodes [0]);

}
Var responseText = document. create_r_rtextnode (xmlHttp. responseText );
ResponseDiv. appendChild_xss (responseText );
}

</Script>
</Head>
<Body> <Form action = "#">
<Select id = "petTypes" size = "6" multiple = "true">
<Option value = "cats"> Cats </option>
<Option value = "dogs"> Dogs </option>
<Option value = "fish"> Fish </option>
<Option value = "birds"> Birds </option>
<Option value = "hamsters"> Hamsters </option>
<Option value = "rabbits"> Rabbits </option>
</Select> <br/>
<Input type = "button" value = "Submit Pets" onclick = "sendPetTypes ();"/>

</Form>

<H2> Server Response:

</Html>

Server code

Using System;
Using System. Collections;
Using System. Configuration;
Using System. Data;
Using System. Linq;
Using System. Web;
Using System. Web. Security;
Using System. Web. UI;
Using System. Web. UI. HtmlControls;
Using System. Web. UI. WebControls;
Using System. Web. UI. WebControls. WebParts;
Using System. Xml. Linq;
Using System. Xml;

Public partial class _ Default: System. Web. UI. Page
{
Protected void Page_Load (object sender, EventArgs e)
{
XmlDocument xmlDoc = new XmlDocument ();
XmlDoc. Load (Request. InputStream );
XmlNodeList nodeList = xmlDoc. getElementsByTagName_r ("type ");
String type = null;
String responseText = "Selected Pets :";
For (int I = 0; I <nodeList. Count; I ++)
{
Type = nodeList [I]. FirstChild. Value;
ResponseText = responseText + "" + type;
}
Response. Write (responseText );
Response. End ();
}
}

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Basic Ajax tutorial (1) _ sending requests

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support