The combination of XML and HTML (on)

zhaozj2021-02-11 202

Beijing University of Posts and Telecommunications

XML limitations

Currently, the content data of many web websites 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.

Treatment method of data island in IE

In order to be able to handle this embedded XML code HTML page, Internet Explorer 4.0 (hereinafter referred to as IE 4.0) introduces DSO (Data Source Objects, Data Source Object) technology, implemented with Java Applet.

E.g:

ID = "xmldso" width = 0 height = 0 Mayscript = true>

In the above example, the Code property indicates the DSO Java applet, and the MayScript property guarantees the user-end script to handle the data object, and the Param tag indicates the location of the XML document.

Limitations using Java are only to explain XML URL addresses in the HTML document, and the XML tags cannot be embedded directly, which has a certain gap with the real data island program. Microsoft has expanded DSO technology in Internet Explorer 5.0 (IE 5.0), breaking through previous restrictions, so that HTML and XML are truly integrated together. The HTML page supports direct use of the tab.

E.g:

Some XML ...

As long as the ID of each data island is unique, you can embed the data island in any necessary places in the page, and these DSOs are independent of each other.

In addition to this direct embedded manner in the above example, you can use an external reference to link the data island.

E.g:

In this way, Java Applet is the option to consider when the company's customer object continues to use IE 4.0, and in order to solve the compatibility problem of this part of customers. 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.

XML data binding

1. ADO record set mapping

Each main element in the XML is mapped to a record in the ADO recordset, while the child elements are mapped to fields (also known as domain) in the recordset.

For example, there is an XML data island books.xml as follows:

straight talk about computers </ title></p> <p><ISBN> 72-80088-005 </ ISBN></p> <p></ book></p> <p><book></p> <p><title> gourmet microwave </ title></p> <p><ISBN> 72-80081-082 </ ISBN></p> <p></ book></p> <p></ booklist></p> <p></ Xml></p> <p>At this time, the ADO record set after the map is:</p> <p>Title ISBN</p> <p>Straight Talk About Computers 72-80088-005</p> <p>Gourmet microwave 72-80081-082</p> <p>2. Binds with HTML elements</p> <p>After embedding the data island in the HTML document, you can bind the XML data island to the HTML element. 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.</p> <p>For example, the code binds to the DIV element is as follows:</p> <p><Div id = title datasrc = # xmldso datafld = "title"> </ div></p> <p><Div id = price datasrc = # xmldso datafld = "isbn"> </ div></p> <p>Note: Not all HTML elements can be bound to XML data island. Currently, the elements that support this DSO binding mechanism are as follows:</p> <p>A, Applet, Button, Div, Frame, IFRAME, IMG, INPUT (here: Checkbox, Hidden, Label, Password, Radio, and Text), Label, Marquee, SELECT, SPAN, TABLE, and Textarea.</p> <p>3. Explicit XML data in a table</p> <p>If the XML data is bound to the Table element, you can automatically display a multi-line form.</p> <p>For example, the code that XML data is bound to the Table element is as follows:</p> <p><Table border = 1 DataSRC = "# xmldso"></p> <p><THEAD></p> <p><TR> <TH> Title </ TH> <TH> ISBN </ TH> </ TR></p> <p></ THEAD></p> <p><TBODY></p> <p><TR> <TD> <Div DataFld = "Title"> </ div> </ td></p> <p><TD> <Div DataFld = "ISBN"></p> <p></ Div> </ td> </ tr></p> <p></ Tbody></p> <p></ TABLE></p> <p>In this way, bind two 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></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-5256.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="5256" 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.037</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 = 'Dw76WX8eoGB5ZXCbW51jXTY_2F7prfP7ugTf6L2WufEJemK6njNeMctraB00RGeyV2i4w1Lr3dqAXy40q6WlQDUQ_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>