In fact, the simplest way is to understand: JavaScript + XMLHttpRequest + CSS + server-side collection, which is essentially a browser-side technology. Okay,
Let's briefly describe the code now!
(1). Function Description:
The <div> tag on the dimensions page.
(2). Implementation Code:
1.html implementation code:
Copy codeThe Code is as follows:
<Head>
<Title> Ajax functions implemented by traditional javascript methods </title>
<Script type = "text/javascript">
// Declare an empty objXmlHttp object
Var objXmlHttp = null;
// Return the changed object based on the browser
Function CreateXMLHTTP (){
If (window. ActiveXObject ){
ObjXmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
} Else {
If (window. XMLHttpRequest ){
ObjXmlHttp = new XMLHttpRequest ();
} Else {
Alert ("XMLHTTP initialization error! ");
}
}
}
Function GetSendData (){
Document. getElementById ("divMsg"). innerHTML = "loading..."; // initialize the content
// Set the Sending address variable and assign the Initial Value
Var strSendUrl = "2.html? Date = "+ Date (); // to obtain the data changed from 2.html
// Set the parameter when the URL is used to clear the loaded variable information in the cache and obtain new real-time data.
// Instantiate the XMLHttpRequest object
CreateXMLHTTP ();
// Initialize XMLHttpRequest using the open method
ObjXmlHttp. open ("GET", strSendUrl, true );
// Set the event handler for asynchronous requests
ObjXmlHttp. onreadystatechange = function () {// callback event function
If (objXmlHttp. readyState = 4) {// if the request completes Loading
If (objXmlHttp. status = 200) {// if the response is successful
// Obtain data
Document. getElementById ("divMsg"). innerHTML = objXmlHttp. responseText;
}
}
}
ObjXmlHttp. send (null );
}
</Script>
</Head>
<Body>
<Input type = "button" id = "btn" value = "Get Data" onclick = "GetSendData ()"/>
<Div id = "divMsg">
</Div>
</Body>
</Html>
2.html implementation code:
Copy codeThe Code is as follows:
<Head>
<Title> </title>
</Head>
<Body>
Name: coriander <br/>
Gender: male <br/>
Email: cj1161059871@163.com
</Body>
</Html>
Haha, that's all. It's easy! Alas, the original magic Ajax is also simple (think about the first man-machine interaction and trembling), please try it! Kids shoes ......