Rookie Cai Zhi’s Ajax review Chapter 1 (background ASP. Net) (traditional JavaScript methods to realize Ajax functions)

Time:2021-10-26

In fact, the simplest can be understood as: Javascript + XMLHttpRequest + CSS + server-side collection, which is essentially a browser-side technology. okay,

A simple description, now directly on the code!

(1) . Function Description:

Create two new HTML pages, 1.html and 2.html respectively. Click the “get data” button on the 1.html page without refreshing, and the contents of the 2.html page will be displayed in the < div > tag of the 1.html page.

(2) . implementation code:

1. HTML implementation code:

Copy codeThe code is as follows:
<head>
< title > traditional JavaScript methods to realize Ajax functions < / Title >

<script type=”text/javascript”>

//Declare an empty objxmlhttp object
var objXmlHttp = null;

//Depending on the browser, the changed entity object is returned
function CreateXMLHTTP() {
if (window.ActiveXObject) {
objXmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
} else {
if (window.XMLHttpRequest) {
objXmlHttp = new XMLHttpRequest();
} else {
Alert (“error initializing xmlhttp!”);
}
}
}

function GetSendData() {
Document. Getelementbyid (“divmsg”). InnerHTML = “loading…”// Initialization content
//Set the sending address variable and assign the initial value
var strSendUrl = “2.html?date=” + Date();// In order to get the changed data of 2.html in real time, send
//The function of setting parameters during URL is to empty the loaded variable information in the cache and re obtain new real-time data
//Instantiate XMLHttpRequest object
CreateXMLHTTP();
//The open method initializes XMLHttpRequest
objXmlHttp.open(“GET”, strSendUrl, true);
//Sets 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
//Get data
document.getElementById(“divMsg”).innerHTML = objXmlHttp.responseText;
}
}
}
objXmlHttp.send(null);
}
</script>
</head>
<body>
< input type = “button” value = “get data” onclick = “getsenddata()” / >
<div>
</div>
</body>
</html>

2. HTML implementation code:

Copy codeThe code is as follows:
<head>
<title></title>
</head>
<body>
Name: side dish < br / >
Gender: male < br / >
Email: [email protected]
</body>
</html>

Ha ha, there are so many parts. It’s simple! Alas, the original magic AJAX is also simple (trembling at the beginning of human-computer interaction). Try it quickly! children’s shoes……

Recommended Today

OC basis

IOS development interview essential skills chart.png What are objects and what are the objects in OC? An object is an instance of a class; Is an instance created through a class, which is generally called an instance object; Common objects in OC include instance objects, class objects, and metaclass objects; What is a class? What […]