Traditional ajax Code
Copy codeThe Code is as follows: <script language = "javascript">
Var xmlHttp;
Function createXMLHttpRequest (){
If (window. ActiveXObject)
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
Else if (window. XMLHttpRequest)
XmlHttp = new XMLHttpRequest ();
}
Function startRequest (){
CreateXMLHttpRequest ();
XmlHttp. open ("GET", "14-1.aspx", true );
XmlHttp. onreadystatechange = function (){
If (xmlHttp. readyState = 4 & xmlHttp. status = 200)
Document. getElementById ("target"). innerHTML = xmlHttp. responseText;
}
XmlHttp. send (null );
}
</Script>
JQuery Method
CodeCopy codeThe Code is as follows: <script language = "javascript" src = "jquery. min. js"> </script>
<Script language = "javascript">
Function startRequest (){
$ ("# Target"). load ("14-1.aspx ");
}
</Script>
Get and post
CodeCopy codeThe Code is as follows: <title> get vs. POST </title>
<Script language = "javascript" src = "jquery. min. js"> </script>
<Script language = "javascript">
Function createQueryString (){
Var firstName = encodeURI ($ ("# firstName"). val ());
Var birthday = encodeURI ($ ("# birthday"). val ());
// Combine them into objects
Var queryString = {firstName: firstName, birthday: birthday };
Return queryString;
}
Function doRequestUsingGET (){
$. Get ("14-5.aspx", createQueryString (),
// Send a GET request
Function (data ){
$ ("# ServerResponse" pai.html (decodeURI (data ));
}
);
}
Function doRequestUsingPOST (){
$. Post ("14-5.aspx", createQueryString (),
// Send a POST request
Function (data ){
$ ("# ServerResponse" pai.html (decodeURI (data ));
}
);
}
</Script>
</Head>
<Body>
<H2> enter name and birthday <Form>
<Input type = "text" id = "firstName"/> <br>
<Input type = "text" id = "birthday"/>
</Form>
<Form>
<Input type = "button" value = "GET" onclick = "doRequestUsingGET ();"/> <br>
<Input type = "button" value = "POST" onclick = "doRequestUsingPOST ();"/>
</Form>
<Div id = "serverResponse"> </div>
</Body>
</Html>
Control ajax
CodeCopy codeThe Code is as follows: <title >$. ajax () method </title>
<Script language = "javascript" src = "jquery. min. js"> </script>
<Script language = "javascript">
Function createQueryString (){
// The Chinese issue can be solved only when the encoding is performed twice.
Var firstName = encodeURI ($ ("# firstName"). val ()));
Var birthday = encodeURI ($ ("# birthday"). val ()));
// Combine them into objects
Var queryString = "firstName =" + firstName + "& birthday =" + birthday;
Return queryString;
}
Function doRequestUsingGET (){
$. Ajax ({
Type: "GET ",
Url: "14-5.aspx ",
Data: createQueryString (),
Success: function (data ){
$ ("# ServerResponse" pai.html (decodeURI (data ));
}
});
}
Function doRequestUsingPOST (){
$. Ajax ({
Type: "POST ",
Url: "14-5.aspx ",
Data: createQueryString (),
Success: function (data ){
$ ("# ServerResponse" pai.html (decodeURI (data ));
}
});
}
</Script>
</Head>
<Body>
<H2> enter name and birthday <Form>
<Input type = "text" id = "firstName"/> <br>
<Input type = "text" id = "birthday"/>
</Form>
<Form>
<Input type = "button" value = "GET" onclick = "doRequestUsingGET ();"/> <br>
<Input type = "button" value = "POST" onclick = "doRequestUsingPOST ();"/>
</Form>
<Div id = "serverResponse"> </div>
</Body>
</Html>
Set ajax globally
CodeCopy codeThe Code is as follows: <title >$. ajaxSetup () method </title>
<Script language = "javascript" src = "jquery. min. js"> </script>
<Script language = "javascript">
$. AjaxSetup ({
// Global settings
Url: "14-5.aspx ",
Success: function (data ){
$ ("# ServerResponse" pai.html (decodeURI (data ));
}
});
Function createQueryString (){
// The Chinese issue can be solved only when the encoding is performed twice.
Var firstName = encodeURI ($ ("# firstName"). val ()));
Var birthday = encodeURI ($ ("# birthday"). val ()));
// Combine them into objects
Var queryString = "firstName =" + firstName + "& birthday =" + birthday;
Return queryString;
}
Function doRequestUsingGET (){
$. Ajax ({
Data: createQueryString (),
Type: "GET"
});
}
Function doRequestUsingPOST (){
$. Ajax ({
Data: createQueryString (),
Type: "POST"
});
}
</Script>