Chapter 5: XML Instance Analysis Outline: 1: Example Effects 2: Instance Analysis 1. Define the new identity. 2. Establish an XML document. 3. Establish a corresponding HTML file. XML has a wide range of applications in different fields, such as Mathml, wireless communication applications in technology, SVG in network images, etc., we focus on the application of XML on the Web. The application of XML on the web is mainly used with its powerful data operation capabilities. Generally use server-side program such as JavaScript and ASP to implement almost all applications on the network. Consider explaining convenience, we will introduce a simple example below and does not include server-side programs. The purpose is to let you have a sensibility to XML's data operation capacity. Ok, we first [click here] to see the effects of the instance. (Please open with IE5.0 or later) This is a simple CD record data search function. You can see the information about the single CD by clicking "Previous", "Next". Such an effects can be implemented in two ways: 1. Take DHTML, hide data in different layers, sequentially displayed by mouse events; 2. Use background programs (such as ASP, CGI, PHP, JSP, etc.), call Server data. But in this example, we open the page original code, where there is no DIV of DHTML, there is no form of action, which is fully implemented with XML. Let's analyze its production process: Step 1: Define new logos. According to the actual CD data, first create an identifier named ; secondly build it related data identity, namely: CD name , singer <artist>, publishing Year <Year>, national <country> , Issued company <company> and price <price>; finally establish an identity named catalog <catalog>. Why build a <catalog> ID again? Because in the XML document, you must have a root element (identifier), we have multiple CD data, which is parallel, so you need to establish a root element for these side. The definitions and relationships of the above elements are fully compliant, and the DTD definition can be omitted without the special DTD files. If we want to use DTD to define, the above process can be represented as: <! Element Catalog (CD) *> <! Element CD (Title, Artist, Year, Country, Company, Price)> <! Element Title (#pcdata)> <! Element artist (#pcdata)> <! Element country (#pcdata)> <! Element company (#pcdata)> This code is represented: Element Catalog contains multiple CD child elements, while sub-element CDs contain Title, Artist, Year, Country, Company, Price six sub-elements, and their content is defined as text (characters, numbers, text). (Note: The specific grammatical description can look at the introduction of DTD) Step 2: Establish an XML document.</p>
<p><? XML Version = "1.0"?> <catalog> <cd> <title> Empire Burlesque </ title> <artist> Bob Dylan </ Artist> <country> USA </ country> <company> Columbia </ company> <Price> 10.90 </ price> <year> 1985 </ year> </ cd> <cd> <title> hide your heart </ title> <artist> Bonnie Tylor </ artist> <country> UK </ country> <Company> CBS Records </ company> <price> 9.90 </ price> <year> 1988 </ year> </ cd> <cd> <title> greatest hits </ title> <artist> Dolly Parton </ artist> <Country> USA </ country> <company> RCA </ company> <price> 9.90 </ price> <year> 1982 </ year> </ cd> <cd> <title> still got the blues </ title> <Artist> Gary More </ Artist> <country> UK </ country> <company> Virgin redords </ company> <price> 10.20 </ price> <year> 1990 </ year> </ cd> <CD> <CD> < Title> Eros </ Title> <Artist> Eros Ramazzotti </ Artist> <country> Eu </ country> <company> BMG </ company> <price> 9.90 </ price> <year> 1997 </ year> </ CD> </ catalog> The above code first uses <? XML Version = "1.0"?> Declarative statement indicates that this is an XML document, its format complies with the XML 1.0 standard specification. Then the document content, the structure tree is very clear: <catalog> <cd> ... <<cd> <cd> ... <</ cd> </ catalog> defines 5 sets of data. We will save the above code as a CD.xml file for an order.</p>
<p>Step 3: Establish a corresponding HTML file. 1. Import XML data. We know that in the current popular browser, we temporarily only have Microsoft IE5.0 or higher browser support XML. IE is imported into the Object object in HTML and is imported into the XML and through the XMLDocument.Load () method of JS. We look at the code: <object width = "0" height = "0" classid = "CLSID: 550DDA30-0541-11D2-9CA9-0060EC3D39" ID = "xmldso"> </ Object> Defines an Object, ID name is XMLDSO. Then introduced XML data in the Head area: <script for = "window" Event = "online"> xmldso.xmldocument.load ("cd.xml"); </ script> 2. Bundle data. The XML data will then be bound to the table with the <span> identifier. Where ID, Datasrc, DTATFLD are the properties of <span>. The code is as follows: <table> <tr> <td> title: </ td> <td> <span id = "title" Datasrc = # xmldso datafld = "title"> </ span> </ td> </ tr> <TR> <TD> Artist: </ TD> <TD> <span id = "artist" datasrc = # xmldso datafld = "artist"> </ span> </ td> </ tr> <tr> <td> Year: </ td> <TD> <span id = "year" Datasrc = # xmldso datafld = "year"> </ span> </ td> </ tr> <tr> <td> country: </ td> <TD> <span id = "country" DATASRC = # xmldso datafld = "country> </ span> <td> </ tr> <tr> <td> Company: </ td> <td> <span id = "Company" Datasrc = # xmldso datafld = "company"> </ span> <td> </ tr> <tr> <td> price: </ td> <td> <span id = "price" DataSRC = #xmldso datafld = "price"> </ span> </ td> </ tr> </ table> 3. Action operation.</p>
<p>Finally, provide browsing buttons for data: <input type = button value = "Previous CD" Onclick = "MovePrevious ()"> <input type = button value = "Next CD" onclick = "MOVENEXT ()"> And JS is used to complete two mouse click function: MoveNext () and MovePrevious ().</p>
<p>Was added in the head region following code: <script language = "JavaScript"> function movenext () {if (xmldso.recordset.absoluteposition <xmldso.recordset.recordcount) {xmldso.recordset.movenext ();}} function moveprevious () { IF (xmldso.recordset.absoluteposition> 1) {xmldso.recordset.moveprevious ();}} </ script> Well, let's see all the original code of the HTML file: <html> <head> <script for = "window" event = "onload"> xmldso.XMLDocument.load ( "cd.xml"); </ script> <script language = "JavaScript"> function movenext () {if (xmldso.recordset.absoluteposition <xmldso.recordset.recordcount) {xmldso.recordset.movenext ();}} function moveprevious () {if (xmldso.recordset.absolutePosition> 1) {xmldso.recordset.moveprevious ();}} </ script> <title> cd navigate </ title> </ head> <body> <p> <object width = "0" Height = "0" classid = "CLSID: 550DDA30-0541-11D2-9CA9-0060B0EC3D39" ID = "xmldso"> </ object> <table> <TR> <TD> Title: </ TD> <TD> <span id = "title" Datasrc = # xmldso datafld = "title"> </ span> <td> </ tr> <tr> <td> Artist: </ td> <td> <span id = "artist" datasrc = # xmldso datafld = "artist"> </ span> </ td> </ tr> <tr> <td> year: </ td> <TD> <SP An id = "year" Datasrc = # xmldso datafld = "year"> </ span> <td> </ tr> <tr> <td> country: </ td> <td> <span id = "country" Datasrc = # xmldso datafld = "country"> </ span> </ td> </ tr> <tr> <td> Company: </ td> <td> <</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-95726.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="95726" 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.032</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 = '1uHqW_2FZKxad6ArhqxiXtdkzeoJIq8BhXSggWQlErRd4SAFb7Z045pR8LAbtExfyCEV1FwvFn716X96t6';
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>
