jquery has been written over the years, traditional JavaScript has been a long time, and many things have been forgotten, and how many people remember that Ajax operations in JavaScript need to use the XMLHttpRequest object, in fact, the Ajax nature of jquery is this , well, take a moment today to demonstrate how to use traditional JavaScript to get text content and display on the page, nonsense, directly on the code, comments written in detail, we should be able to understand:
Copy Code code as follows:
<script type= "Text/javascript" >
(A) ① Get text file method (traditional JavaScript to implement AJAX notation)
function LoadXMLDoc1 ()
{
var xmlhttp;
if (window. XMLHttpRequest)
{
Code for ie7+, Firefox, Chrome, Opera, Safari
Xmlhttp=new XMLHttpRequest ();
}
Else
{
Code for IE6, IE5
Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");
}
onReadyStateChange a stored function (or function name) that is called whenever the ReadyState property is changed.
Xmlhttp.onreadystatechange=function ()
{
ReadyState
The state of being xmlhttprequest. Changed from 0 to 4.
0: Request not initialized
1: The server connection has been established
2: Request received
3: In Request processing
4: The request is complete and the response is ready
Status
: "OK"
404: Page Not Found
if (xmlhttp.readystate==4 && xmlhttp.status==200)
{
document.getElementById ("MyDiv1"). Innerhtml=xmlhttp.responsetext;
}
}
Xmlhttp.open ("Get", "Doc/test1.txt", true);
Xmlhttp.send ();
}
HTML page code:
Copy Code code as follows:
<body>
<form id= "Form1" runat= "Server" >
<%--gets the text file on the server and displays the--%>
<div id= "myDiv1" ><button id= "BtnChange1" type= "button" onclick= "LoadXMLDoc1 ()" > Change content via AJAX (get test1.txt above text) </button>
</form>
</body>
Demo Effect:
