Take out what we prepared last time. 1: XMLHTTPRequest object function. 2: Asp outputs an xml file. You can click to view the file content: Asp outputs xml format data
After opening it, you will find that we use Asp technology to dynamically output a data in xml format. if you do not know about this technology, please read back: ajax started to prepare the article. There is a msg tag in the output data. the tag contains a text section. we will read this msg label today. and display the text on your webpage.
Let's take a look at the following code and attach a demo.
Web_ajax.asp
Copy codeThe Code is as follows:
<? Xml version = "1.0" encoding = "gb2312"?>
<Body>
<Msg> a simple example of xml output by Asp. In our ajax tutorial instance, we will use this file for Data Reading. </msg>
<Read>
<Li> Html </li>
<Li> Css </li>
<Li> Dom </li>
<Li> JavaScript </li>
<Li> Ajax </li>
</Read>
</Body>
Below is the static page content
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> Create an available xmlhttpreuqest object </title>
</Head>
<Body>
<Div id = "str"> </div> <! -- The requested data will be displayed in the div -->
<Input type = "button" value = "display data" onclick = "Post ()"/>
<Script type = "text/javascript">
Function ajax_xmlhttp (){
// Create xmlhttpRequest in IE for all IE5.0 and later versions
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;
}
} // Cyclically create xmlhttp. End Based on IE browser
// If not, create xmlhttpRequest Based on FireFox and other browsers
If (! _ Xmlhttp & typeof XMLHttpRequest! = "Undefined ")
{
_ Xmlhttp = new XMLHttpRequest ();
}
Return _ xmlhttp;
}
// Send the request Function
Function Post (){
Var ajax = ajax_xmlhttp (); // assign the xmlhttprequest object to a variable.
Ajax. open ("post", "web_ajax.asp", true); // sets the request method, request file, and asynchronous request.
Ajax. onreadystatechange = function () {// You can also specify a name for the function that has been written.
If (ajax. readyState = 4) {// data returns success
If (ajax. status = 200) {// Return OK for the http Request status code
Var xmlData = ajax. responseXML;
Var msg = xmlData. getElementsByTagName ("msg"); // obtain all msg Elements
Var data = msg [0]. firstChild. nodeValue;
Document. getElementById ("str"). innerHTML = data;
}
}
}
Ajax. send (null );
}
</Script>
</Body>
</Html>
Let me analyze how the instance is implemented. in the above Code, apart from the XMLHTTPRequest function we created yesterday. A div whose ID attribute is str is added at the top. This div is used to display the data returned by our request. then we wrote a new function named Post. this function is used when you click to read data. send a request, return data, and display data.
Let's take a look at the first line of the Post function: var ajax = ajax_xmlhttp (); this line means that the function with the XMLHTTPRequest object is assigned to a variable named ajax, the ajax variable itself is equal to the XMLHTTPRequest object. we can use this variable to reference each method and attribute in the XMLHTTPRequest object.
Row 2: ajax. open ("post", "web_ajax.asp", true); specifies a request, the request method is post, the request server webpage is web_ajax.asp, and true indicates asynchronous request. you can refer to: open Method
Row 3: ajax. onreadystatechange = function () {} specifies a custom program. let's look at the content in function. when readyState is 4, if readyState is 4, the request data is successfully returned! In addition, status returns 200, status indicates the http Request status code, and 200 indicates OK. At the same time, we use responseXML to receive all data returned by the server. responseXML indicates receiving data in xml format.
We assign all xml data returned by the server to an xmlData variable. xmlData. getElementsByTagName ("msg"); that is, to obtain all the labels named msg in the returned xml data. for more information, see getElementsByTagName and examples.
Msg [0] indicates referencing the first msg tag. in fact, only one msg exists in our data. return the text content of the first child element of the tag. the first child element of msg is the text. nodeValue indicates obtaining the text. see firstChild method and nodeValue. When the returned data is successfully parsed, find the div with the id of str on the page and use innerHTML to display the data to the webpage.
The last row in the Post function: ajax. send (null). As you can see, sending a request. null indicates sending an empty request with no data to submit.
Finally, we will focus on the onreadysatechange attribute. he is an attribute, but he has an event mechanism. in other words, you can specify a function for it. the working principle of onreadystatechange is: the status of readyState changes every time. the specified onreadystatechange function is executed. in fact, in ajax. send (null) before execution. onreadystatechange has been executed at least once. because after the open method is called, The readystate status changes. therefore, the onreadystatechange function is triggered. this is similar to a recursive mechanism. the status of readystate changes and the onreadystatechange function is executed. the readysate status value is determined in the function. In fact, in a complete request process, the readyState changes at least four times. varies according to the browser. only when readystate is 4. we began to receive and parse the data. if you still do not understand, read the readyState method of the onreadystatechange attribute and the status
Well, this is the end of our "ajax first try to read data". If you still don't understand anything, please practice it and try again. I believe there will be some gains. next article: "ajax reading data to a table"
From: http://Www.Web666.Net
Author: Kang Dong
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
