// 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 specify a function name that has been written.
If (Ajax. readystate = 4) {// data returned successfully
If (Ajax. status = 200) {// The HTTP Request status code returns OK
var xmldata = Ajax. responsexml; // receives and returns XML format data
var READ = xmldata. getelementsbytagname ("read"); // obtain all Read tag
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 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
}< BR >}< br> Ajax. send (null);
}< br>
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. onreadystatechange attribute specified Program 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"
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
