Traditional Ajax Code
Copy Code code 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
Code
Copy Code code as follows:
<script language= "javascript" src= "Jquery.min.js" ></script>
<script language= "JavaScript" >
function Startrequest () {
$ ("#target"). Load ("14-1.aspx");
}
</script>
Get and Post
Code
Copy Code code 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 ());
Grouped into the form of an object
var querystring = {Firstname:firstname,birthday:birthday};
return querystring;
}
function Dorequestusingget () {
$.get ("14-5.aspx", createquerystring (),
Send a GET request
function (data) {
$ ("#serverResponse"). HTML (decodeURI (data));
}
);
}
function Dorequestusingpost () {
$.post ("14-5.aspx", createquerystring (),
Send POST request
function (data) {
$ ("#serverResponse"). HTML (decodeURI (data));
}
);
}
</script>
<body>
<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>
Controlling Ajax
Code
Copy Code code as follows:
<title>$.ajax () method </title>
<script language= "javascript" src= "Jquery.min.js" ></script>
<script language= "JavaScript" >
function createquerystring () {
Must be coded two times to solve Chinese problems
var firstName = encodeURI (encodeURI ($ ("#firstName"). Val ());
var birthday = encodeURI (encodeURI ($ ("#birthday"). Val ());
Grouped into the form of an object
var querystring = "Firstname=" +firstname+ "&birthday=" +birthday;
return querystring;
}
function Dorequestusingget () {
$.ajax ({
Type: "Get",
URL: "14-5.aspx",
Data:createquerystring (),
Success:function (data) {
$ ("#serverResponse"). HTML (decodeURI (data));
}
});
}
function Dorequestusingpost () {
$.ajax ({
Type: "POST",
URL: "14-5.aspx",
Data:createquerystring (),
Success:function (data) {
$ ("#serverResponse"). HTML (decodeURI (data));
}
});
}
</script>
<body>
<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>
Global Settings Ajax
Code
Copy Code code as follows:
<title>$.ajaxsetup () method </title>
<script language= " JavaScript "src=" Jquery.min.js ></script>
<script language= "JavaScript" >
$.ajaxsetup ({
/ /global setting
URL: "14-5.aspx",
success:function (data) {
$ ("#serverResponse"). HTML (decodeURI (data));
}
});
Function createquerystring () {
//must be encoded two times to resolve the Chinese problem
var firstName = encodeURI (encodeURI ($ ("#firstName"). Val () ));
var birthday = encodeURI (encodeURI ($ ("#birthday"). Val ());
//Combined into an object form
var querystring = "Firstname=" +firstname+ "&birthday=" +birthday;
return querystring;
}
Function Dorequestusingget () {
$.ajax ({
data:createquerystring (),
Type: ' Get '
});
}
Function Dorequestusingpost () {
$.ajax ({
data:createquerystring (),
Type: "POST"
});
}
</script>
