Let's take a look at an AJAX example
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<body>
<input type= "button" value= Ajax submits "onclick=" Ajax (); "/>
<div id= "ResText" ></div>
</body>
<script type= "Text/javascript" >
function Ajax () {
var xmlhttpreq = null;//declares an empty object to mount the XMLHttpRequest object
if (window. ActiveXObject) {
Xmlhttpreq = new ActiveXObject ("Microsoft.XMLHTTP");//ie5 IE6 introduced ActiveXObject in XMLHttpRequest way.
else if (window. XMLHttpRequest) {///except IE5 IE6 browser XMLHttpRequest is a child object of window
Xmlhttpreq = new XMLHttpRequest ()//Instantiate a XMLHttpRequest object
}
if (xmlhttpreq!= null) {
Xmlhttpreq.open ("Get", "test.jsp", true);//Call The Open () method and use asynchronous methods
Xmlhttpreq.onreadystatechange = requestcallback;//Set callback function
Xmlhttpreq.send (null);//Because a Get method is committed, you can use the null parameter to call the
}
function Requestcallback () {//Once the readystate value is changed, it will be called
if (xmlhttpreq.readystate = = 4) {
if (Xmlhttpreq.status = = 200) {
Assign the Xmlhttpreq.responsetext value to an element with an ID of restext
document.getElementById ("ResText"). InnerHTML = Xmlhttpreq.responsetext;
}
}
}
}
</script>
Content of test.jsp:
Copy Code code as follows:
<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%>
<%out.println ("Hello ajax!"); %>
Let's look at the Ajax in jquery
1.load ()
The load () method is the simplest and most commonly used Ajax method in jquery to load HTML code remotely and insert it into the DOM.
Remote HTML code:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<body>
<div class= "comment" >
<p class= "para" > Sofa .</p>
</div>
<div class= "comment" >
<p class= "Para" > Bench .</p>
</div>
<div class= "comment" >
<p class= "Para" > Flooring .</p>
</div>
</body>
Load () Load HTML
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<script type= "Text/javascript" src= ". /.. /js/jquery-2.1.3.js "></script>
<style>
* {margin:0; padding:0;}
body {font-size:12px;}
. comment {margin-top:10px; padding:10px border:1px solid #ccc; background: #DDD;}
. Comment h6 {font-weight:700; font-size:14px;}
. para {margin-top:5px; Text-indent:2em;background: #DDD;}
</style>
<title></title>
<body>
<input type= "button" id= "Send" value= "ajax Fetch"/>
<div class= "comment" > has commented </div>
<div id= "ResText" ></div>
</body>
<script type= "Text/javascript" >
$ (function () {
$ ("#send"). Click (function () {
$ ("#resText"). Load ("test.html");
});
})
/**
* Ajax in jquery
*
* jquery encapsulates Ajax operations,
* The $.ajax () method in jquery is the lowest-level method,
* Layer 2nd is load (), $.get (), $.post () method
* The 3rd layer is the $.getscript () and $.getjson () method
*
*
The * Load () method is the simplest and most commonly used Ajax method in jquery to load remote HTML code and insert it into the DOM.
* Load (URL [, data] [, callback])
*
* URL String request URL address of HTML interface
* Data (optional) Object sent to the server's Key/value
* Callback (optional) a callback function when a function request completes, whether the request succeeds or fails
* */
</script>
Load () load filtered HTML document
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<script type= "Text/javascript" src= ". /.. /js/jquery-2.1.3.js "></script>
<style>
* {margin:0; padding:0;}
body {font-size:12px;}
. comment {margin-top:10px; padding:10px border:1px solid #ccc; background: #DDD;}
. Comment h6 {font-weight:700; font-size:14px;}
. para {margin-top:5px; Text-indent:2em;background: #DDD;}
</style>
<title></title>
<body>
<input type= "button" id= "Send" value= "ajax Fetch"/>
<div class= "comment" > has commented </div>
<div id= "ResText" ></div>
</body>
<script type= "Text/javascript" >
$ (function () {
$ ("#send"). Click (function () {
$ ("#resText"). Load ("test.html. para");
});
})
/**
* Filter the loaded HTML document
*
* The syntax structure of the URL parameter for the load () method is: "URL selector", note that there is a space between the URL and the selector
*
* The transfer mode of the load () method is based on the parameter data from the dynamic designation.
* If no parameter is passed, the Get mode is used to transmit;
* Instead, it is automatically converted to post delivery
*
* **/
</script>
Load () method---callback function
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<script type= "Text/javascript" src= ". /.. /js/jquery-2.1.3.js "></script>
<style>
* {margin:0; padding:0;}
body {font-size:12px;}
. comment {margin-top:10px; padding:10px border:1px solid #ccc; background: #DDD;}
. Comment h6 {font-weight:700; font-size:14px;}
. para {margin-top:5px; Text-indent:2em;background: #DDD;}
</style>
<title></title>
<body>
<input type= "button" id= "Send" value= "ajax Fetch"/>
<div class= "comment" > has commented </div>
<div id= "ResText" ></div>
</body>
<script type= "Text/javascript" >
$ (function () {
$ ("#send"). Click (function () {
$ ("#resText"). Load ("test.html. Para", function (ResponseText, textstatus, XMLHttpRequest) {
Alert ($ (this). html ());
alert (responsetext);//Request returned content
Alert (Textstatus)//Request Status: Success, error, notmodified, timeout
alert (XMLHttpRequest);//xmlhttprequest Object
});
});
})
/**
*
* The callback parameter of the load () method
*
* **/
</script>
End
The above is the entire content of this article, hope to be helpful to everyone.
