Yes, the effect we're going to make today is. Read and display server-side data without refreshing the page.
Take out the things we prepared last time.
The function of the 1:xmlhttprequest object.
2:asp output XML-formatted file. You can click to view the contents of the file
Copy Code code as follows:
<%
' From: Http://Www.Web666.Net
' Author: Kang Dong
' If you want to reprint, please be sure to keep the above information
' Define a variable to hold the XML data
Dim xml
XML = "<?xml version= ' 1.0 ' encoding= ' gb2312 '?><body> '"
XML = xml& "<msg> a simple ASP output XML example, later in our Ajax tutorial instance, we will use this file for data reading operations </msg>"
xml=xml& "</body>"
Response.Clear
Response.contenttype= "Text/xml"
response.charset= "gb2312"
Response.Write XML
Response.End
%>
When you open it, you will find that we use ASP technology to dynamically output an XML-formatted data. If you don't know about the technology, go back to Reading: Ajax begins to prepare an article with a msg tag in the output data. The label contains a paragraph of text content. Today we're going to read this msg tag. and display the text content on your Web page.
Look at the following code first. and attach an effect demo
Copy Code code as follows:
<title> Create an available Xmlhttpreuqest object </title>
<body>
<div id= "str" ></div><!--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, suitable for 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;
}
//loop to create XMLHTTP based on IE browser. end
If not IE browser, create a browser based on Firefox XMLHttpRequest
if (!_xmlhttp && typeof XMLHttpRequest!= "undefined")
{
_xmlhttp=new XMLHttpRequest ();
}
return _xmlhttp;
}
Send Request function
function Post () {
var ajax = Ajax_xmlhttp (); Assigns a 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 an already-written name
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>
Let me slowly analyze how the instance is implemented. In the above code, in addition to the XMLHttpRequest function we created yesterday. At the top is a div with the id attribute of STR, which is used to display the data we request back. Then we wrote a new function called post. The function is when you click the Read data to press the button. Sends the request, returns the data, displays the data.
Let's first look at the first line of the Post function: var ajax = Ajax_xmlhttp (); The line means that the function with the XMLHttpRequest object is assigned to a variable with an AJAX name, and the AJAX variable itself equals the XMLHttpRequest object. We can use this variable to refer to the various methods and properties in the XMLHttpRequest object.
Second line: Ajax.open ("Post", "web_ajax.asp", true); Indicates that a request is specified, the request is post, and the requested server-side Web page is represented by the Web_ajax.asp,true as an asynchronous request. You can refer to: Open method
Third line: Ajax.onreadystatechange=function () {}, specifying a section of custom programs. We look at the contents of the function. When the readystate state equals 4, the readystate equals 4, which means that the requested data has been successfully returned! and status returns 200,status representing the HTTP request status code, and returns 200 to represent OK. At the same time we use Responsexml to receive all the data returned by the server. Responsexml represents the receipt of data in XML format.
We assign all the XML data returned by the server to a XMLData variable. Xmldata.getelementsbytagname ("MSG"), which represents the label that gets the returned XML data in the name of MSG. You can refer to: getelementsbytagname explanations and examples
Msg[0] Represents a reference to the first MSG label. In fact, there is only one msg in our data. and returns the textual content of the first child element of the label. The first child of MSG is that paragraph of text. NodeValue representatives get the text. Reference: FirstChild method and NodeValue when the returned data is resolved successfully, locate the div with STR in the page, and use innerHTML to display the data to the Web page.
The last line in the Post function: Ajax.send (null); everybody knows it. Send the request. Null represents sending an empty request with no data to submit.
Finally, let's focus on the Onreadysatechange attribute. Said he was an attribute, but he had an event mechanism. That means you can specify a function for him. onReadyStateChange's working principle is: each readystate state changes. Executes the function specified by onreadystatechange. In fact, before ajax.send (null) is not executed. The onreadystatechange has been executed at least once. Because when the open method is invoked, the state of the readystate is changed. Therefore, the onreadystatechange function is triggered. This is similar to a recursive mechanism. The state of the readystate is changed to perform the function of onreadystatechange. We also judge the Readysate state value in the function, in fact, in a complete request process, the readystate will occur at least 4 times change. Depending on the browser will be different. Only when the readystate equals 4. We begin to receive data and parse it. If you are not clear enough, please read: onReadyStateChange property readystate method, and status
OK, this is the "Ajax initial reading of the data section," So far, if you still do not understand the place, please practice, and slowly try to figure out. I believe there will be some gains. Next we say: "Ajax read data to table"
