Ajax preliminary test of reading data implementation code


Yes, the effect we want to achieve today is to read and display the server data without refreshing the web page
Take out what we prepared last time
1: Function of XMLHttpRequest object
2: ASP outputs a file in XML format. You can click to view the contents of the file

Copy codeThe code is as follows:
‘from: http://Www.Web666.Net
Author: Kang Dong
‘if you need to reprint, please keep the above information
‘define a variable to hold XML data
dim xml
xml = “<?xml version=’1.0′ encoding=’gb2312′?><body>”
XML = XML & “< MSG > a simple example of ASP outputting XML. Later, in our Ajax tutorial example, we will use this file to read data < / MSG >”
Response.Write xml

After opening, you will find that we use ASP technology to dynamically output data in XML format. If you don’t understand this technology, please go back to reading: Ajax begins to prepare. There is an MSG tag in the output data. The tag contains a paragraph of text content. Today we will read this msg tag and display the text content on your web page
First look at the following code. And attach the effect demonstration

Copy codeThe code is as follows:
< title > create an available xmlhttpreuqest object < / Title >
<div></div><!– The requested data will be displayed in this div — >
< input type = “button” value = “display data” onclick = “post()” / >
<script type=”text/javascript”>
function ajax_xmlhttp(){
//Create XMLHttpRequest in ie, which is applicable to all versions above ie5.0
var msXmlhttp = new Array(“Msxml2.XMLHTTP.5.0″,”Msxml2.XMLHTTP.4.0″,”Msxml2.XMLHTTP.3.0″,”Msxml2.XMLHTTP”,”Microsoft.XMLHTTP”);
for(var i=0; i<msXmlhttp.length; i++){
_xmlhttp=new ActiveXObject(msXmlhttp[i]);
}/ / end of loop creation of xmlhttp. Based on IE browser
//If it is not an IE browser, create an XMLHttpRequest based on a browser such as Firefox
if(!_xmlhttp && typeof XMLHttpRequest != “undefined”)
_xmlhttp=new XMLHttpRequest();
return _xmlhttp;

//Send request function
function Post(){
var ajax = ajax_ xmlhttp(); // Assign the XMLHttpRequest object to a variable
ajax.open(“post”,”web_ajax.asp”,true);// Set request mode, request file, asynchronous request
Ajax. Onreadystatechange = function() {/ / you can also specify a written function name here
If (Ajax. ReadyState = = 4) {/ / data returned successfully
If (Ajax. Status = = 200) {/ / HTTP request status code returns OK
var xmlData = ajax.responseXML;
var msg = xmlData.getElementsByTagName(“msg”);// Get all MSG elements
var data = msg[0].firstChild.nodeValue;
document.getElementById(“str”).innerHTML = data;

Let me slowly analyze how this instance is implemented. In the above code, in addition to the XMLHttpRequest function we created yesterday, a div with ID attribute STR is added at the top, The div is used to display the data we requested. Then we wrote a new function called post. The function is to send the request, return the data and display the data when you click the read data button
Let’s start with the first line of the post function: VAR Ajax = Ajax_ xmlhttp(); This line means that the function with XMLHttpRequest object is assigned to a variable named Ajax. At this time, the Ajax variable itself is equal to the XMLHttpRequest object. We can use this variable to refer to various methods and properties in the XMLHttpRequest object
The second line: Ajax. Open (“post”, “web_ajax. ASP”, true); Indicates that a request is specified. The request method is post, and the server page of the request is web_ Ajax.asp, true means asynchronous request. You can refer to the open method
The third line: Ajax. Onreadystatechange = function() {}, specifies a custom program. Let’s look at the content in function. When readyState state is equal to 4, readyState is equal to 4, which means that the requested data has been successfully returned! And status returns 200. Status represents HTTP request status code, and 200 represents OK. At the same time, we use responsexml to receive all data returned by the server. Responsexml represents to receive data in XML format
We assign all XML data returned by the server to an xmldata variable. Xmldata. GetElementsByTagName (“MSG”); That is to get all tags with the name MSG in the returned XML data. You can refer to: getElementsByTagName explanation and instance
MSG [0] refers to the first MSG tag. In fact, there is only one MSG in our data. The text content of the first child element of the tag is returned. The first child element of MSG is the text. NodeValue refers to obtaining these text. Reference: firstchild method and nodeValue. When the returned data is successfully parsed, find the div with ID STR in the page, Use innerHTML to display data in web pages
The last line in the post function: Ajax. Send (null); Send request. Null means to send an empty request with no data to submit
Finally, let’s focus on the property onreadystatechange. It is said that it is a property, but it has an event mechanism. That is, you can specify a function for it. The working principle of onreadystatechange is that every time the state of readyState changes, the function specified by onreadystatechange will be executed. In fact, it is in ajax.send (null) Before execution, onreadystatechange has been executed at least once. Because the state of readyState will change after the open method is called. Therefore, the function of onreadystatechange will be triggered. This is similar to a recursive mechanism. The state of readyState changes and the function of onreadystatechange will be executed. And we judge the readyState state value in the function, In fact, readyState will change at least four times during a complete request. It will vary according to the browser. Only when readyState is equal to 4. We start receiving data and parsing. If you don’t understand it enough, please read carefully: onreadystatechange property, readyState method, and status
OK, that’s all for our “reading data in the first Ajax test”. If you still don’t understand, please practice and figure it out slowly. I’m sure you’ll get something. In the next article, we’ll talk about “reading data from Ajax to table”

Recommended Today

Vue、Three. JS implementation panorama

1、 First, we need to create a Vue project This paper mainly records the process of building panorama in detail, so building Vue project is not described too much. 2、 Install three js npm install three –save npm install three-trackballcontrols –save npm install three-orbit-controls –save npm i three-obj-mtl-loader –save npm i three-fbx-loader –save npm i […]