What we want to talk about today is: read multiple pieces of data from the server using the Ajax no-refreshing technology, and display the returned data in a table. at the same time, I will show how to use JavaScript scripts and Dom interfaces to create a table for a webpage. display the ajax request data in this table.
In the result of this ajax instance, the requested server webpage is still: Web_ajax.Asp. This webpage uses the Asp output xml technology. if you do not know how to use Asp to output xml, please return: "ajax Preparation"
Note: before each ajax tutorial starts, you must view the data structure in the Web_ajax.asp file of the current day, because the tags and content to be read in each instance are different. CLICK: View Web_ajax.Asp
Copy codeThe Code is as follows:
<%
'From: http://Www.Web666.Net
'Author: Kang Dong
'The above information must be retained if reprinted
'Define a variable to save xml data.
Dim xml
Xml = "<? Xml version = '1. 0' encoding = 'gb2312 '?> <Body>"
Xml = xml & "<msg> a simple example of xml output by Asp. In our ajax Tutorial example, we will all use this file to read data </msg>"
Xml = xml & "</body>"
Response. Clear
Response. ContentType = "text/xml"
Response. CharSet = "gb2312"
Response. Write xml
Response. End
%>
The msg tag we read last time. today, we want to read the new read tag in xml. the effect we want to achieve is to include the Html, Css, Dom, JavaScript, and Ajax text content under the read tag. displayed in the table on our webpage.
Let's take a look at the following code.
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> ajax reads data to a table </title>
</Head>
<Body>
<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; // receives xml format data.
Var read = xmlData. getElementsByTagName ("read"); // obtain 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 the table to the 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; // write text content to cells.
}
}
}
}
}
Ajax. send (null );
}
</Script>
</Body>
</Html>
Today we will not talk about the content repeated yesterday. In the Post function, we also have a few lines of code. We can compare it with the previous "ajax Initial Data Reading.
Next, let's talk about the role of the new code today.
If read. length! = 0: determines whether the read tag is obtained successfully. If the legnth attribute is not equal to 0, it indicates that the read tag already exists. You can parse it.
The returned data is parsed, but no data elements are displayed on the webpage. Therefore, we create a table named var t = document. createElement ("table"). For details, see createElement.
T. setAttribute ("border", "1"); add a border attribute to the table. See setAttribute.
Document. body. appendChild (t); Add the created table to the webpage body element. See: appendChild
After the table is added, the system starts to traverse all the sub-elements in the read tag, such as html, css, dom, javascript, and ajax.
Start a loop. read [0]. childNodes. length indicates the number of all child elements in the read label. 5. I = 0; I <5 Condition OK! The I variable is automatically incremented by 1 at each cycle. A row is added to the table and a column is added to the row. at the same time, write the text content of the read sub-element I for this column. until I = 5, I will not be less than the number of read sub-elements. the condition is not met. loop stops. the data is displayed!
To help readers better understand the situation. I will explain the implementation process of this instance again: When you click "show data", the Post function is enabled, A variable named ajax in the function is assigned a reference to the XMLHTTPRequest object. then the open method is opened. use the send method to send a request to the server. whether it is the open or send method, the status value of the readyState method is changed. once the readyState changes, the onreadystatechange attribute is triggered. the program specified by the onreadystatechange attribute will be executed. then, Judge again in the program whether the status value of readyState is equal to 4. If yes, it indicates that the entire request has been sent successfully and the data returned by the server. at the same time, check whether status is equal to 200. If yes, it indicates that the http Request status code is OK! At this time, we can safely receive of the data, so we use the responseXML attribute to receive the returned data. this attribute only limits the receipt of data in xml format. I always think that data in xml format is used as an intermediary for request and return. is the most standard way to use ajax!
Today's ajax example tutorial-"reading data from ajax to a table" has come to an end. Should I leave a question for readers to solve? Have you found any problems in the instance demonstration. if you click "show data" again, click the button. the table is created repeatedly. the data will be read repeatedly. I hope you can solve this problem.
Next time, let's talk about: "real-time reading of ajax data"
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
