មេរៀន XML JavaScript
មេរៀន XMLHttpRequest Objectវត្ថុ XMLHttpRequest ត្រូវបានប្រើដើម្បីផ្លាស់ប្តូរទិន្នន័យជាមួយម៉ាស៊ីនបម្រើដែលនៅពីក្រោយឆាកមួយ។
-ធ្វើឱ្យទាន់សម័យទំព័របណ្ដាញដោយមិនបាន reloading ទំព័រ
-ស្នើសុំទិន្នន័យពីម៉ាស៊ីនបម្រើបន្ទាប់ពីទំព័រមួយដែលបានផ្ទុក
-ទទួលបានទិន្នន័យពីម៉ាស៊ីនបម្រើមួយបន្ទាប់ពីទំព័រដែលបានផ្ទុក
-ផ្ញើទិន្នន័យទៅកាន់ម៉ាស៊ីនបម្រើនៅក្នុងផ្ទៃខាងក្រោយ
ឩទាហរណ៍ XMLHttpRequest នៅពេលដែលអ្នកវាយតួអក្សរមួយនៅក្នុងវាលបញ្ចូលដូចខាងក្រោម: XMLHttpRequest មួយត្រូវបានផ្ញើទៅកាន់ម៉ាស៊ីនបម្រើ – ការផ្ដល់យោបល់និងឈ្មោះរបស់វាត្រូវបានត្រឡប់ (ពីឯកសារនៅលើម៉ាស៊ីនបម្រើមួយ):
បង្កើតវត្ថុ XMLHttpRequestទាំងអស់កម្មវិធីរុករកសម័យទំនើប (IE7 + របស់ Firefox, Chrome, Safari និងរបស់ Opera) មានវត្ថុ XMLHttpRequest មានស្រាប់នៅក្នុង។វាក្យសម្ព័ន្ធសម្រាប់ការបង្កើតវត្ថុ XMLHttpRequest:
xmlhttp=new XMLHttpRequest();
កំណែចាស់នៃការរុករកអ៊ិនធឺណិ (IE5 និង IE6) ប្រើវត្ថុ ActiveX:
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
មេរៀន XML Parser
Parse an XML Document
បំណែកកូដដូចខាងក្រោមញែកឯកសារ XML មួយចូលទៅក្នុងវត្ថុមួយរបស់ XML របស់ DOM:
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.open(“GET”,”books.xml”,false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
Parse an XML String
បំណែកកូដដូចខាងក្រោមញែកខ្សែអក្សរ XML ដែលចូលទៅក្នុងវត្ថុមួយរបស់ XML របស់ DOM:
txt=”<bookstore><book>”;
txt=txt+”<title>Everyday Italian</title>”;
txt=txt+”<author>Giada De Laurentiis</author>”;
txt=txt+”<year>2005</year>”;
txt=txt+”</book></bookstore>”;
if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,”text/xml”);
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject(“Microsoft.XMLDOM”);
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}
មេរៀន XML DOM
XML DOM ការ XML មានរបស់ DOM កំណត់វិធីស្តង់ដារសម្រាប់ការចូលដំណើរការនិងការគណនាឯកសារ XML មួយឯកសារ។
ការ XML មានរបស់ DOM views ឯកសារ XML ជាមែកធាងរចនាសម្ព័ន្ធ។
DOM HTML HTML & របស់ DOM កំណត់វិធីស្តង់ដារសម្រាប់ការចូលដំណើរការនិងការគណនាឯកសារ HTML ។
ទាំងអស់ធាតុ HTML ដែលអាចត្រូវបានចូលដំណើរការតាមរយៈ HTML & របស់ DOM ។
Load an XML File – Cross-browser
ឧទាហរណ៍ដូចខាងក្រោមញែកឯកសារ XML (” note.xml “) ចូលទៅក្នុងវត្ថុមួយរបស់ XML របស់ DOM ហើយបន្ទាប់មកដកស្រង់ព័ត៌មានខ្លះពីវាជាមួយការអនុញ្ញាត JavaScript ថា:
ឧទាហរណ៏
<html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id=”to”></span><br />
<b>From:</b> <span id=”from”></span><br />
<b>Message:</b> <span id=”message”></span>
</div>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.open(“GET”,”note.xml”,false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.getElementById(“to”).innerHTML=
xmlDoc.getElementsByTagName(“to”)[0].childNodes[0].nodeValue;
document.getElementById(“from”).innerHTML=
xmlDoc.getElementsByTagName(“from”)[0].childNodes[0].nodeValue;
document.getElementById(“message”).innerHTML=
xmlDoc.getElementsByTagName(“body”)[0].childNodes[0].nodeValue;
</script>
</body>
</html>
សារ:សំខាន់ ដើម្បីដកស្រង់អត្ថបទ “Tove” ពីធាតុ <to> នៅក្នុងឯកសារ XML ខាងលើ (“note.xml”) វាក្យសម្ព័ន្ធគឺ:
getElementsByTagName(“to”)[0].childNodes[0].nodeValue
ចំណាំថាប្រសិនបើទោះបីជាឯកសារ XML ដែលមានធាតុតែមួយប៉ុណ្ណោះ <to> អ្នកនៅតែមានដើម្បីបញ្ជាក់លិបិក្រមអារេបាន [0] ។ នេះគឺដោយសារតែ getElementsByTagName នេះ () វិធីសាស្ត្រត្រឡប់អារេមួយ។
Load an XML String – Cross-browser
ឧទាហរណ៍ដូចខាងក្រោមញែកខ្សែអក្សរ XML ដែលចូលទៅក្នុងវត្ថុមួយរបស់ XML របស់ DOM ហើយបន្ទាប់មកដកស្រង់ព័ត៌មានខ្លះពីវាជាមួយការអនុញ្ញាត JavaScript ថា:
ឧទាហរណ៏
<html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id=”to”></span><br />
<b>From:</b> <span id=”from”></span><br />
<b>Message:</b> <span id=”message”></span>
</div>
<script>
txt=”<note>”;
txt=txt+”<to>Tove</to>”;
txt=txt+”<from>Jani</from>”;
txt=txt+”<heading>Reminder</heading>”;
txt=txt+”<body>Don’t forget me this weekend!</body>”;
txt=txt+”</note>”;
if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,”text/xml”);
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject(“Microsoft.XMLDOM”);
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}
document.getElementById(“to”).innerHTML=
xmlDoc.getElementsByTagName(“to”)[0].childNodes[0].nodeValue;
document.getElementById(“from”).innerHTML=
xmlDoc.getElementsByTagName(“from”)[0].childNodes[0].nodeValue;
document.getElementById(“message”).innerHTML=
xmlDoc.getElementsByTagName(“body”)[0].childNodes[0].nodeValue;
</script>
</body>
</html>
មេរៀន XML នៅក្នុង HTML
បង្ហាញទិន្នន័យ XML មានក្នុងទំព័រ HTML មួយ
នៅក្នុងឧទាហរណ៍ខាងក្រោមនេះយើងបើកឯកសារ XML (” cd_catalog.xml “) បន្ទាប់មកយើងរង្វិលជុំគ្នាតាមរយៈធាតុស៊ីឌីនិងបង្ហាញតម្លៃនៃ ធាតុសិល្បករនិងចំណងជើងធាតុនៅក្នុងតារាង HTML ដែលមួយ:
ឧទាហរណ៏
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.open(“GET”,”cd_catalog.xml”,false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write(“<table border=’1′>”);
var x=xmlDoc.getElementsByTagName(“CD”);
for (i=0;i<x.length;i++)
{
document.write(“<tr><td>”);
document.write(x[i].getElementsByTagName(“ARTIST”)[0].childNodes[0].nodeValue);
document.write(“</td><td>”);
document.write(x[i].getElementsByTagName(“TITLE”)[0].childNodes[0].nodeValue);
document.write(“</td></tr>”);
}
document.write(“</table>”);
</script>
</body>
</html>
មេរៀន XML Applications
បង្ហាញស៊ីឌីលើកដំបូងនៅក្នុងធាតុ div មួយរបស់ HTML ឧទាហរណ៍ដូចខាងក្រោមទទួលបានទិន្នន័យ XML មានពីធាតុស៊ីឌីលើកដំបូងហើយបង្ហាញវានៅក្នុងធាតុរបស់ HTML មួយជាមួយលេខសម្គាល់ = “showCD” ។ displayCD នេះ () មុខងារត្រូវបានគេហៅថាពេលទំព័រត្រូវបានផ្ទុក:
ឧទាហរណ៏
x=xmlDoc.getElementsByTagName(“CD”);
i=0;
function displayCD()
{
artist=(x[i].getElementsByTagName(“ARTIST”)[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName(“TITLE”)[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName(“YEAR”)[0].childNodes[0].nodeValue);
txt=”Artist: ” + artist + “<br />Title: ” + title + “<br />Year: “+ year;
document.getElementById(“showCD”).innerHTML=txt;
}
Navigate Between the CDs ដើម្បីរុករករវាងស៊ីឌីនៅក្នុងឧទាហរណ៍ខាងលើបន្ថែម next() និង previous() function:
ឧទាហរណ៏
function next()
{ // display the next CD, unless you are on the last CD
if (i<x.length-1)
{
i++;
displayCD();
}
}
function previous()
{ // displays the previous CD, unless you are on the first CD
if (i>0)
{
i–;
displayCD();
}
}
Post a Comment