Today we're going to talk about using Ajax without the refresh technique to read multiple data from the server and display the returned data to a table. I'll also show you how to use JavaScript scripts and DOM interfaces to create a table for a Web page. Displays the data from the AJAX request to the table.
The server-side page requested in this Ajax instance effect is still: Web_ajax. ASP this Web page uses ASP output XML technology. If you still don't know how to use ASP to output XML, please return to: "Ajax start preparing articles"
Reminder: Before each instance of an AJAX tutorial begins, you must look at the data structure in the web_ajax.asp file for the day. Because the labels and content that we read in each instance are different. Click: View Web_ajax. Asp
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
%>
Last time we read the MSG tag. Today we're going to read the new read tag in XML. The effect we're going to achieve is to html,css,dom,javascript,ajax the text under the Read label. Display to the table in our web page.
Look at the following code first. and instance Demo
Copy Code code as follows:
<title>ajax read data to table </title>
<body>
<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;//Receive return XML format data
var read = Xmldata.getelementsbytagname ("read");//Get all read tags
if (read.length!=0) {
var t = document.createelement ("table");//create a TABLE element
T.setattribute ("Border", "1");
Document.body.appendChild (t)//Add table to Doby
for (Var i=0;i<read[0].childnodes.length;i++) {
var tr = T.insertrow (t.rows.length);//Add a row
var td = Tr.insertcell (0);//Add a column
td.innerhtml = read[0].childnodes[i].firstchild.nodevalue;//writes text content to cell
}
}
}
}
}
Ajax.send (NULL);
}
</script>
</body>
Today we are not going to repeat what we said yesterday. Also within the function of the post. A few more lines of code. Can be compared with the previous "Ajax initial read data article".
Let's talk about the role of the new code today.
If read.length!=0: That is, to determine whether the read label was successfully fetched. If its Legnth property is not equal to 0, then the read already exists. It can be parsed
Begins parsing the returned data, but there is no element in the Web page that displays the data. So we create a table: var t = document.createelement ("table");. Please refer to: createelement
T.setattribute ("Border", "1"); Add a border property to the table. Please refer to: setattribute
Document.body.appendChild (t); Adds the created table to the BODY element of the Web page. Please refer to: appendchild
Table add complete. Begins traversing all child elements within the read label. Namely: Html,css,dom,javascript,ajax these contents.
Start a loop, read[0].childnodes.length means to get the number of all the child elements in the read label. This will return 5. I=0;i<5 conditions ok! Each cycle I variable automatically +1, the table adds a row, and adds a column to the row. The text content of the read I sub element is also written for this column. Until I=5,i is no longer less than the number of read child elements. condition is not satisfied. Loop stop. The data is displayed right now!
In order for each reader to deepen their understanding. I'm going to go over it again. The implementation process for this instance effect: When you click the "Show Data" button, the Post function is enabled, and a variable named Ajax in the function is assigned a reference to the XMLHttpRequest object. The Open method is then opened. and use the Send method to send a request to the server. Either the open or the Send method will cause a change in the state value of the ReadyState method. The onreadystatechange attribute is triggered once the readystate has changed. The program specified by the onReadyStateChange property will be executed. Then in the program again to determine whether the state value of readystate is equal to 4, if it proves that the entire send request and server-side return data has been successful. At the same time and determine whether the status of 200, if it is the HTTP please status code has been ok! at this time can be assured of 100% of the received data, so we use the Responsexml property to receive the returned data. This property restricts the receipt of data in XML format only. I always think of XML-formatted data as an intermediary for requests and postbacks. Ajax is the most standard way to use!
Today's Ajax example tutorial-"Ajax read data to table" is over. I wonder if I should leave a question for the readers to solve? Have you found anything in the example demo. If you click the "Show data" button repeatedly, press the button. The table will be created repeatedly. The data will also be read repeatedly. I hope that readers can solve the problem.
The next time we say: "Ajax add data Real-time reading chapter"
