In fact, the simplest can be understood as: JavaScript + XMLHttpRequest + CSS + server-side collection, which is essentially a browser-side technology. All right
A simple description, now directly on the code!
(1). Function Description:
The new two HTML pages are 1.html and 2.html, and when you click the "Get Data" button on the 1.html page without refreshing, the contents of the 2.html page are displayed in the <div> tag of the 1.html page.
(2). Implementation code:
1.html Implementation code:
Copy Code code as follows:
<title> traditional JavaScript methods to implement AJAX functions </title>
<script type= "Text/javascript" >
Declares an empty objXmlHttp object
var objxmlhttp = null;
Returns the changed entity object, depending on the browser
function Createxmlhttp () {
if (window. ActiveXObject) {
objXmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
} else {
if (window. XMLHttpRequest) {
objXmlHttp = new XMLHttpRequest ();
} else {
Alert ("Initialize XMLHTTP Error!") ");
}
}
}
function Getsenddata () {
document.getElementById ("Divmsg"). InnerHTML = "Loading ..."; Initializing content
Set the Send address variable and assign an initial value
var strsendurl = "2.html?date=" + date ()//In order to instantly get 2.html changed data, send
URL to set parameters, the function is to empty the cache has been loaded variable information, to retrieve new real-time data
Instantiating a XMLHttpRequest Object
Createxmlhttp ();
The Open method initializes the XMLHttpRequest
Objxmlhttp.open ("Get", Strsendurl, True);
To set an event handler for an asynchronous request
Objxmlhttp.onreadystatechange = function () {//callback event function
if (objxmlhttp.readystate = = 4) {//If the request completes loading
if (Objxmlhttp.status = = 200) {//If the response is successful
Get Data
document.getElementById ("Divmsg"). InnerHTML = Objxmlhttp.responsetext;
}
}
}
Objxmlhttp.send (NULL);
}
</script>
<body>
<input type= "button" id= "BTN" value= "Fetch data" onclick= "Getsenddata ()"/>
<div id= "Divmsg" >
</div>
</body>
2.html implemented code:
Copy Code code as follows:
<title></title>
<body>
Name: Vegetable <br/>
Sex: Male <br/>
Email: cj1161059871@163.com
</body>
Oh 、、、 This part is so much, simple! Alas, the original magic Ajax is also simple (think about the beginning of human-computer interaction shivering), quickly try it! Children's shoes ...
