Reading data in Ajax pilot

Time:2021-12-1

Take out what we prepared last time. 1: the function of XMLHttpRequest object. 2: ASP outputs a file in XML format. You can click to view the content of the file: ASP outputs data in XML format
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
web_ajax.asp

Copy codeThe code is as follows:
<?xml version=”1.0″ encoding=”gb2312″ ?>
<body>
< MSG > a simple example of ASP outputting XML. In our Ajax tutorial examples, we will use this file to read data < / MSG >
<read>
<li>Html</li>
<li>Css</li>
<li>Dom</li>
<li>JavaScript</li>
<li>Ajax</li>
</read>
</body>

The following is the static page content

Copy codeThe code is as follows:
<html>
<head>
< title > create an available xmlhttpreuqest object < / Title >
</head>
<body>
<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++){
try
{
_xmlhttp=new ActiveXObject(msXmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
}/ / 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;
}
}
}
ajax.send(null);
}
</script>
</body>
</html>

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”
come from: http://Www.Web666.Net
Author: Kang Dong

Recommended Today

MySQL replace into those hidden risks

catalogue Primary key conflict during replace into Unique index conflict during replace into Primary key Conflict & replace unique index conflict Existing problems conclusion Is replace into in MySQL as expected: if there is existing data in the table, delete the existing data and insert new data? Prepare data CREATE TABLE `test_replace` (    `id` […]