Combination of XML and HTML
Zhang Jian
Part 1: 1, XML Limitations Currently, the content data of many web sites is stored in a database or data file. For web program developers, if you want to extract useful information from the database, the traditional method is to write a script (such as VBScript, JavaScript, CGI, ASP, Perl, etc.) to execute the database. The SQL query gets the relevant record, and then organizes the query to the HTML page to return to the client, and the user uses the browser to observe the final result. In order to improve the flexibility and scalability of system services, the range of service objects is broader, and many business websites are provided as much as possible as much as possible as independent services. The way HTML has data in the way it is clearly not in accordance with this requirement. Therefore, store the original data in the XML document, using style single file display content is the advantage of XML technology suitable for e-commerce. However, in essence, XSL technology is not a data display, it is a format conversion technology, which is far from HTML in the display means and mode. For programmers, a more desirable solution is to combine HTML and XML technology, complementary advantages, so that true raw data can make full use of HTML, the change of HTML. skill. The XML data island is a product fusion product, which uses the tab to embed XML data directly into the HTML page, thereby achieving the advantages of both. 2, the processing of data islands in IE In order to handle this HTML page of this embedded XML code, Internet Explorer 4.0 (IE 4.0) introduces DSO (Data Source Objects, Data Source Object) technology, implemented with Java Applet. For example:
For example: This only when the company's customer object continues to use IE 4.0, and Java Applet is Sub-programmers should consider. In the DSO technology implemented in IE 5.0, if the data is queried by the SQL language, store them in the ADO (ActiveX Data Objects) recordset. The server sends this ActiveX control (usually the ADO recordset) to the client, and further processing is made by the client scripter. In fact, IE 5.0 is to process XML data island as a special ADO recordset. 3, XML data binding (1) The main element in the map of the ADO record set is mapped to a record in the ADO recordset, while the child elements are mapped to the fields in the recordset (also known as area). For example, there is an XML data island books.xml as follows: straight talk about computers </ title> <ISBN> 72 -80088-005 </ isbn> </ book> <book> <title> gourmet microwave </ title> <isbn> 72-80081-082 </ isbn> </ book> </ booklist> </ xml> At this time The ADO record set after mapping is: Title ISBN Straight Talk About Computers 72-80088-005 Gourmet Microwave 72-80081-082 (2) XML data can be used after embedding the data island in the HTML document with the HTML document The island is binds with HTML elements. Each DSO entry (ie, data island) has a unique ID number. First set the DataSRC attribute in the HTML element to the corresponding ID, you can link the HTML element and the data island. Then by setting the DataFld property value to determine the extracted XML element. For example, the code bound to the div element is as follows: <div id = title datasrc = # xmldso datafld = "title"> </ div> <div id = price datasrc = # xmldso datafld = "ISBN"> </ div> pay attention : Not all HTML elements can be bound to XML data island. At present, the elements of this DSO binding mechanism are as follows: A, Applet, Button, Div, Frame, IFRAME, IMG, INPUT (here: Checkbox, Hidden, Label, Password, Radio and Text), Label, Marquee , SELECT, SPAN, TABLE and TEXTAREA. (3) Explicit XML data in a table mode If the XML data is bound to the Table element, it can be automatically displayed as multi-line form.</p>
<p>For example, the code that is bound to the Table element is as follows: <Table Border = 1 DataSRC = "# xmldso"> <TAB> <TR> <TH> Title </ TH> <TH> ISBN </ TH> </ TR > </ Thead> <tbody> <tr> <td> <div datafld = "title"> </ div> </ td> <td> <div datafld = "ISBN"> </ div> </ td> < / TR> </ tbody> </ table> This is bound by setting the DataSRC attribute in the table element to #xmldso. The table is divided into two parts of the header (TBODY). Each <book> element is displayed as a pair of tables, which is specified by the DataFld property in the DIV element per column.</p>
<p>Part II: 1, XML Nested Treatment Under normal circumstances, the result set we get from the database may be large, so when the data is returned from the server to the client, the data is divided into several pages separately. At this point, use the DataPagesize property in the Table element to specify the number of items containing the record set entry. For example: <Table DatasRC = "# xmldso" datapagesize = 10> It is clear if the XML data format is symmetrical, whether it is mapped to the ADO record set or bind to a table element, the effect will be fine. In practical applications, XML data is a non-symmetrical example. For example, the authors of a book may not only, this will have a certain amount of trouble when mapping and binding. The solution to the problem is to use nested. Each row is still corresponding to a main element, and each column also corresponds to a child element. For repeating elements, use nested forms. We assume that in Books.xml, the first book author is Dean Straight, the second book of the second book is Charlotte Cooper, Shelley Burke and Regina Murphy. At this point, the binding process is as follows: ● Create a Table element and assign the data island ID to the DataFld property; ● For a separate XML element, such as <ISBN>, create a TD element, and set the corresponding DataFld property; ● For repetition Elements, nested in TD elements, nested a table; ● Show the author information in the form of a single row. Note that the DataFld property here must be set to "$ TEXT" to ensure that the content of the nested element is all displayed in the specified element. Complete HTML code as follows: <table border = 1 DataSRC = "# xmldso"> <TAD> <TH> <THOR TITLE </ TH> <TH> ISBN </ TH> <TH> Author </ th> </ TR> </ THEAD> <TBODY> <Tr> <TD> <Div DataFld = "Title> </ div> </ td> <td> <div datafld =" ISBN> </ div> </ TD> <TD> <table border = 0 DATASRC = "# xmldso" datafld = "author"> <tr> <td> <span datafld = "$ text"> </ span> </ td> </ tr> < / Table> </ td> </ tr> </ tbody> </ table> In fact, the best use of DSO effect is a target symmetrical data, and the more efficient way to handle non-symmetrical data is to use us. DOM technology described. 2, DSO technology application 1. The property of the access element is very simple with the properties of the DSO access element, and the property can be processed directly by sub-elements.</p>
<p>For example: <book isbn = "9-001-122-12"> ... </ book> This, you can directly process the child elements when bind to the HTML table: <TD> <span datafld = " ISBN "> </ span> </ td> If the attribute name is the same as the sub-element name, add"! "in front of the element name. 2. Traversing record set DSO A major advantage for processing XML data island as an ADO record set is that the data sources can be accessed using the various methods provided by ADO, especially when tie the data island with SPAN, DIV and INPUT. timing. Usually these elements show the first record of the record set. To traverse the record set, you can use ADO methods: Move, MoveFirst, Movese, MoveNext, and MovePrevious. For example, create a button response function, as long as the user clicks on the "Next" button, you can browse the corresponding record one by one. For example: <XML ID = "xmldso" src = "books.xml"> </ xml> sub btnnext_onclick () xmldso.recordset.movenext End Sub 3. Combined with Script language Some users are used to writing Script languages, using DSO technology, using DSO technology can also be combined with various Script. For example (as an example of VB Script), when the recordset is accessed, the code is as follows: DIM RSBooks Set Rsbooks = XMLDSO.Recordset Access field (sub-element) value: DIM Stitle Stitle = RSBooks ("Title") You can use InnerText and InnerHTML properties Pass the resulting value to the HTML element. For example, there is a DIV element name, assignment code as follows: Divtitle.innertext = Stitle uses the script to handle many DSO events, the following table lists some of the events: Event trigger event Response OnDataavailable New Data Ready Currently The number of records in the run state recorded inDataSetComplete data has reached the display data, or returns a confirmation message ondatasetchanged record set, you can access the updated data ONROWENTER Current record pointer has moved in display data The method for performing the necessary formatting for data in the script is to use the for property to specify the XML data island ID in the <script> tag, and use the Event property to determine the event type. For example, obtain the number of recorded entries: <script language = "vb script" for = "xmldso" Event = "onDataavailable"> lblRecords.Value = Booklist.Recordset.RecordCount </ script> In addition to displaying record data, scripting The program can also perform fast query, sort, editing, etc. However, it is to point out that although the ADO technology is provided to sort the XML data, the effect is not as sorted in XSL, so it is recommended to make full use of XSL technology to implement this part of the function.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-4541.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="4541" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.040</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'DdwTpMOaOBmefSHtf1cFo0miOOnTL7Oc9mUeoU5Xj6EUhtAx5QAaYYIJqqDpB4lCXQN6AWHap27DbwWqTn_2FC5w_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
