Outline: 1: Example Effect 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 expressed as:</p>
<p>Program code: [Copy code to clipboard]</p>
<p><! Element Catalog (CD) *> <! Element CD (Title, Artist, Year, Country, Company, Price)> <! Element Title (#pcdata)> <! Element Artist (#pcdata)> <! Element Year #Pcdata)> <! Element country (#pcdata)> <! Element Company (#pcdata)> <! Element Price (#pcdata)></p>
<p>This code indicates that the element Catalog contains multiple CD child elements, while the child element CD contains Title, Artist, Year, Country, Company, Price six sub-elements, and their content is defined as text (character, number, text) . (Note: The specific grammatical description can look at the introduction of DTD) Step 2: Establish an XML document.</p>
<p>Program code: [Copy code to clipboard]</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 it is the content of the document, the structure tree is very clear:</p>
<p>Program code: [Copy code to clipboard]</p>
<p><Catalog> <cd> ... </ cd> <cd> ... </ cd> </ catalog></p>
<p>5 sets of data were defined. We will save the above code as a CD.xml file for an order. 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:</p>
<p>Program code: [Copy code to clipboard]</p>
<p><object width = "0" height = "0" classid = "CLSID: 550DDA30-0541-11D2-9CA9-0060B0EC3D39" ID = "XmLDSo"> </ Object> Defines an Object, ID name is XMLDSO. Then introduced XML data in the HEAD area:</p>
<p>Program code: [Copy code to clipboard]</p>
<p><script for = "window" Event = "onload"> xmldso.xmldocument.Load ("cd.xml"); </ script></p>
<p>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>. code show as below:</p>
<p>Program code: [Copy code to clipboard]</p>
<p><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" datarc = # xmldso datafld = "year"> </ span> <td> </ tr> <tr> <td> country: </ td> <td> <Span id = "country" datasrc = # xmldso datafld = "country"> </ span> <TD> </ tr> <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></p>
<p>3. Action operation. Finally, provide the browsing button for the data:</p>
<p>Program code: [Copy code to clipboard]</p>
<p><Input Type = Button Value = "Previous CD" OnClick = "MovePrevious ()"> <input type = button value = "Next CD" OnClick = "MOVENEXT ()> and use JS to complete two mouse Click on the function: MoveNext () and MovePrevious (). Add the following code in the HEAD zone:</p>
<p>Program code: [Copy code to clipboard]</p>
<p><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></p>
<p>Ok, let's see all the original code of the HTML file:</p>
<p>Program code: [Copy code to clipboard]</p>
<p><html> <head> <script for = "window" Event = "online"> Xmldso.xmldocument.load ("cd.xml"); </ script> <script language = "javascript"> function moveXT () {i (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> <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> </ TD> <TD> Price: </ td> <TD> <span ID = "price" D Atasrc = # xmldso datafld = "price"> </ span> </ td> </ tr> </ table> <p> <input type = button value = "</p>
<p>Previous CD "OnClick =" MOVEPREVIOS () "> <input type = button value =" Next CD "onclick =" MOVENEXT ()> </ p> </ body> </ html> to save the above code For the cd.htm file, the second step CD.xml file is put together. Open the CD.htm file, you will see the same effect as above. Well, until today, we have learned about XML. Less knowledge, let's summarize the previous five chapters, which are XML quick start, XML concept principle, XML terms, XML grammar, and instance analysis of this chapter. Here, the tutorial is over. During the writing process, Abie has strive to speak popular and easy to understand about XML concept, try to tell you his understanding, but because I have learned XML time, it is not enough system and deep, so it is inevitable. Place, please correct and understand, thank you!</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-70164.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="70164" 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.044</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 = 'xknc2hzV0DM8sZ_2B19YIhFsQ7LfyNB_2BrDcY_2BoiChGKAxTbu_2FcC10zmENOIpe5eZRDUZX3qjC57lj4IDz_2BinjW4w_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>
