اگر می خواهید به صورت حرفه ای با XML کار کنید ، می توانید مطالب ارائه شده در این بخش از مقالات طراحی سایت را مطالعه نمایید. در بخش مباحث پیشرفته XML اطلاعات جامع و کاملی را در این زمینه برای شما علاقه مندان به علم طراحی سایت ارائه کرده ایم.
وارد کردن اطلاعات یک فایل XML در HTML
در این بخش از آموزش XML می خواهیم وارد کردن اطلاعات یک فایل XML در HTML را برای شما توضیح می دهیم .
با بیان مثالی می خواهیم برای شما وارد کردن اطلاعات یک فایل XML در HTML را برای شما توضیح دهیم.در این مثال برنامه به کمک یک اسکریپت ، از طریق یک حلقه ، در میان اجزای تفکیک شده فایل XML حرکت می کنیم و با خواندن محتویات تک تک عناصر ، آن ها را در خروجی نمایش دهید .
<catalog>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<YEAR>1982</YEAR>
</CD>
</catalog>
مفهوم و نحوه کار با XML DOM
در این بخش از آموزش xml میخواهیم مفهوم و نحوه ی کار با XML DOM را برای شما بیان می کنیم .
همانطور که قبلا گفته شد از XML DOM یک روش استاندارد برای دسترسی به اجزای یک فایل XML و همچنین خواندن و یا تغییر آنها را میتوان انجام داد.مدل XML DOM فایل XML را به شکل نمودار درختی تبدیل می کند به صورتی که PARENT مانند شاخه های درخت و فرزندان آن ها برگ ها می باشد..هر المنت و متن نوشته شده در فایل XML به عنوانیک گره یا node در صفحه شناخته شده و قابل دسترسی می باشد .در مثال زیر ، محتویات یک فایل XML به نام note.xml را خوانده و اجزای درونی آن را در یک شی به نام xmlDoc ریخته ایم . سپس به وسیله متد ( ) getElementsByTagName ، اجزای درونی آن را با یک تگ <div> ترکیب کرده ایم.
<?xml version="1.0" encoding="utf-8" ?>
<note>
<to> Hamed </to>
<from>Ali</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
کد و خروجی :
<html>
<body>
<h1> Developer1 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)
{
xmlhttp = new XMLHttpRequest(); // ساخت یک شی جدید ایجکس برای ارتباط با سرور
}
xmlhttp.open("GET", "note.xml", false); // و خواندن آن XML باز کردن فایل
xmlhttp.send( ); // ارسال اطلاعات به سرور
xmlDoc = xmlhttp.responseXML; // xmlDoc در شی XML تجزیه و ریختن محتویات فایل
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>
در این مقاله از طراحی سایت به نحوه کار با متد ( ) getElementsByTagName در XML DOM می پردازیم:
برای استخراج متن " Hamed " از المنت <to> ، ساختار دستوری آن به صورت زیر است . دقت داشته باشید که اگر حتی هر عنصر XML مثل <to> حتی دارای یک فرزند هم باشد ، شما بایستی اندیس آرایه که در اینجا 0 است را تعیین نمایید . زیرا متد ( ) getElementsByTagName ، با آرایه ها کار می کند .
getElementsByTagName("to")[0].childNodes[0].nodeValue ;
مفسر XML در جاوا اسکریپت ( parser )
در این قسمت از آموزش xml می خواهیم مفسر xml در جاوا اسکریپت را برای شما بیان کنیم .
اگر بخواهید به یک عنصر با المنت در فایل XML دسترسی داشته باشید باید ابتدا فایل xml را توسط مفسر یا جاوا اسکریپت به اجزای سازنده اش تجزیه کرد پس از آن به وسی له ی متدهای xml dom به عنصر موردنظر دست یابید فراموش نکنید که همه ی مرورگر ها دارای مفسر می باشند .
مثال زیر یک فایل XML به نام books.xml را توسط تجزیه کننده جاوا اسکریپت به اجزای سازنده تبدیل کرده و در شی xmlDoc قرار داده ایم توجه داشته باشید بعدا از شی xmlDoc می توانید برای دسترسی به عناصر سند XML دسترسی داشته باشید .
<script type="text/javascript">
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest( ); // XML برای اتصال به سرور و خواندن فایل ajax ساخت یک شی
}
xmlhttp.open("GET","books.xml",false); // و خواندن آن XML باز کردن فایل
xmlhttp.send( ); // ارسال شی ایجکس به سرور
xmlDoc=xmlhttp.responseXML; // xmlDoc در شی XML ریختن محتویات فایل
</script>
در مثال زیر نیز یک عبارت متنی به زبان XML را به صورت جزء به جزء در یک متغیر رشته ای به نام txt ریخته ایم . سپس در دو کد جداگانه ، که اولی برای سایر مرورگر ها و دومی برای IE است ، متغیر txt را خوانده و آن را تجزیه نموده و در شی xmlDoc ذخیره کرده ایم .
<script type="text/javascript">
txt="<bookstore><book>"; // txt و ریختن آن در متغیر XML خواندن متن
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"); // xmlDoc و ریختن آن در شی XML خواندن فایل
}
else // Internet Explorer کد لازم برای
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); // ایجاد یک مفسر جدید
xmlDoc.async=false;
xmlDoc.loadXML(txt); // xmlDoc و ریختن آن در شی XML خواندن فایل
}
</script>
جدیدا برای رعایت مسائل امنیتی برای اجرای دستورات فوق باید صفحه درخواست کننده فایل XML و هم خود فایل XML ، هر دو بر روی یک سرور باشند . برای افزایش اطلاعات سایر مقالات طراحی سایت رانیز مطالعه نمایید.
شی XMLHttpRequest در XML
در این قسمت ازمجموعه مقالات آموزشی طراحی سایت در زمینه آموزش xml می خواهیم شی xmlHttpRequest را برای شما توضیح دهیم .
از شی xmlhttprequest در xml برای تبادل اطلاعات بین سرورها و کامپیوترها استفاده می شود.تا چند سال پیش به جای این روش از asp یا php استفاده می کردند که استفاده از این روش ها باعث submit شدن کل صفحه می شد و در نهایت کل صفحه لود میشد که و در نهایت حجم کل اطلاعات صفحه فقط به خاطر تغییر بخشی کوچکتر از آن می بایست به سرور ارسال می شد که هم وقت و هم پهنای باند بیشتری می گرفت و کل صفحه به سرور فرستاده شده و برای اجرای مجدد می بایست از اول لود می شد که نیازمند انتظار کاربر و کار بیشتر کامپیوتر می شد .
وجود شی xmlhttprequest همه ی این سختی ها را رفع کرد و باعث شد تا محتوای صفحه بروز شده و نیاز به فراخوانی مجدد نداشته باشد همچنین این علم باعث شد تا تا پس از لود شدن صفحه سرور اطلاعات را دریافت کند و در نهایت انتقال داده بر سرور در پشت صفحه و بدون اطلاع کاربر انجام شود . دستور کلی شی xmlhttprequest به صورت زیر می باشد :
نام یک متغیر = new XMLHttpRequest( );
مثال : xmlhttp = new XMLHttpRequest( );
ساخت یک برنامه کاربردی با XML
در این قسمت از آموزش XML می خواهیم یک برنامه ی کاربردی با XML بسازیم.
با استفاده از فایل xml می خواهیم اطلاعات مربوط به چند آهنگ را ذخیره کنیم این کار توسط اسکریپتی انجام می شود که بتوان توسط آن بین آهنگ ها حرکت کرد و آن ها را بالا و پایین کرد.در مثال زیر کد فایل HTML و اسکریپت طراحی شده است .
<!DOCTYPE html>
<html>
<head>
<script>
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari // برای تبادل اطلاعات ajax ساخت یک شی
xmlhttp = new XMLHttpRequest();
}
xmlhttp.open("GET", "cd_catalog.xml", false); // و خواندن اطلاعات آت XML باز کردن فایل
xmlhttp.send(); // ارسال درخواست به سرور
xmlDoc = xmlhttp.responseXML; // ذخیره پاسخ سرور در یک متغیر دلخواه
x = xmlDoc.getElementsByTagName("CD"); // و ذخیره آن CD خواندن اطلاعات المنت
i = 0; // تعیین شمارشگر برنامه
function displayCD() { // انتخاب شده و نمایش آن CD تابع خواندن اطلاعات
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; // صفحه جهت نمایشdiv ریختن اطلاعات متغیر بالا در عنصر
}
function next( ) { // تابع رفتن به آهنگ بعدی
if (i < x.length - 1) {
i++;
displayCD( );
}
}
function previous( ) { // تابع رفتن به آهنگ قبلی
if (i > 0) {
i--;
displayCD( );
}
}
</script>
</head>
<body onload="displayCD( )">
<div id='showCD'></div><br>
<input type="button" onclick="previous( )" value="<<" />
<input type="button" onclick="next( )" value=">>" />
</body>
</html>
در مثال بالا در تگ body تابع ( ) displayCD فراخوانی شده ، تا در هنگام لود صفحه اطلاعات اولین آهنگ فایل XML به صورت پیش فرض نمایش داده شود همچنین تگ div اطلاعات آهنگ را نمایش می دهد و دو دکمه ی اعمال شده امکان جابجایی را بین آهنگ ها ایجاد شده است .
E4X چیست ؟
در این قسمت از آموزش xml می خواهیم E4X را برای شما توضیح دهیم .
E4X یک استاندارد جاوا اسکریپت است که پشتیبانی مستقیم از XML را به جاوا اسکریپت اضافه می کند . توجه داشته باشید که این تکنیک تنها در مرورگر فایرفاکس به صورت کامل اجرا می شود . با استفاده از E4X می توانید یک شی XML را مانند سایر متغیرهای دیگر زبان جاوا اسکریپت تعریف کرد به عبارتی با کدهای XML مثل یک متغیر در اسکریپت برخورد کرد به مثال زیر توجه کنید :
var x = new XML( ) ;
var y = new Date( ) ;
var z = new Array( ) ;
در مثال زیر نیز کد XML را به عنوان یک متغیر در یک اسکریپت تعریف کرده ایم این مثال شامل اطلاعات دو کارمند می باشد . پس از تعریف متغیر XML ، در پایان اسکریپت با استفاده از یک دستور ، مقدار سن کارمند اول را در خروجی چاپ کنیم .
var employees=
<employees>
<person>
<name>Tove</name>
<age>32</age>
</person>
<person>
<name>Jani</name>
<age>26</age>
</person>
</employees>;
document.write(employees.person.(name == "Tove").age);
مثال زیر نیزیک کد ساده جاوا اسکریپت که بدون استفاده از قابلیت E4X است ، فایل XML ای به نام "note.xml" را خوانده و در پردازشگر جاوا اسکریپت قرار می دهد . سپس پیام خروجی فایل را بر روی صفحه نمایش داده است .
var xmlDoc;
// IE کد برای
if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load("note.xml");
displaymessage( );
}
// code for Mozilla, Firefox, etc.
else (document.implementation && document.implementation.createDocument)
{
xmlDoc= document.implementation.createDocument("","",null);
xmlDoc.load("note.xml");
xmlDoc.onload=displaymessage;
}
function displaymessage( )
{
document.write(xmlDoc.getElementsByTagName("body")[0].firstChild.nodeValue);
}
با استفاده از دستور زیر می توانید کدهای طولانی را در سه خط خلاصه کنید که این کار با استفاده از خاصیت شی گرایی در جاوا اسکریپت امکان پذیر شده است . اطلاعات جامع تر را در مقالات بعدی طراحی سایت مطالعه نمایید.
var xmlDoc=new XML( );
xmlDoc.load("note.xml");
document.write(xmlDoc.body);
CDATA در XML
در مقالات طراحی سایت اطلاعات جامع و مفیدی را در زمینه تمام نرم افزارها و تکنولوژی ها در اختیار شما قرار خواهیم داد. در این بخش از آموزش xml می خواهیم CDATA در XML را برای شما توضیح می دهیم .
استفاده از تگ cdata باعث می شود تا متن موجود در بین این تگ توسط مرورگر نشان داده نشود.این تگ عملکردی مانند Comments در جاوا اسکریپت و.. دارد . هر تگ < CDATA > با عبارت CDATA! > شروع و با "<[[ " پایان می یابد . برای مثال کاراکتراهایی مثل " < " یا " & " در XML غیر مجاز هستند . به کار بردن کاراکتر " < " در کدهای XML باعث بروز خطا می شود ، زیرا پردازشگر تصور می کند که ابتدای یک تگ جدید است .
یا بکارگیری کاراکتر " $ " نیز باعث ایجاد error در برنامه می شود ، زیرا پردازشگر تصور می کند که این کاراکتر ابتدای نام یک موجودیت ( Entity ) است .کدهایی شبیه کدهای جاوا اسکریپت ، شامل تعداد زیادی کاراکترهای " < " و یا " & " هستند .
برای جلوگیری از بروز خطا در هنگام قرار دادن این کدها در سند XML ، باید آنها را در یک تگ < CDATA > قرار دهید از آنجایی که تمام دستورات متنی و المنتهای وارد شده در یک فایل xml توسط مرورگر ها پردازش می شود ، پردازشگر xml تمامی متن ها و المنت های موجود در سند xml را پردازش می کند . PCDATA ، عنوانی است برای اطلاعات و داده هایی در یک فایل XML که توسط پردازشگر آن ، خوانده و پردازش می شوند . به مثال زیر توجه نمایید :
<name>
<first>Bill</first>
<last>Gates</last>
</name>
مثال زیر نیز یک قطعه سند جاوا اسکریپت به سند xml اضافه می کند برای اینکه موقع اجرا خطا داده نشد آن را در درون تگ cdata قرار می دهیم .
< script >
<![CDATA[
function matchwo(a,b)
{
if (a < b && a < 0) then
{
return 1;
}
else
{
return 0;
}
}
]]>
</script>
Namespaces ها در XML
در مجموعه مقالات طراحی سایت در این قسمت از آموزش xml می خواهیم Namespaces ها در xml را برای شما توضیح دهیم.
از آنجایی که در xml تگ ها را خودمان تعریف می کنیم زمانیکه بخواهیم دو سند xml را با هم ترکیب کنیم امکان اینکه دو اسم یکسان باشد وجود دارد و برای همین سیستم ارور خواهد داد بنابراین برای رفع این مشکل از Namespaces ها استفاده می کنیم . برای رفع مشکل مشابهت در فایل xml کافی ست پشوند حرفی Prefix را اضافه می کنیم . مثلا اگر دو تگ با نام مشابه < table > داریم ، به ابتدای یکی پیشوند :f و دیگری پیشوند :h اضافه می کنیم .
در سند زیر ، دو سند را با هم ترکیب کرده و برای تگ های همنام ، پیشوند تعیین کرده ایم .
<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>
<f:table>
<f:name>African Coffee Table</f:name>
<f:width>70</f:width>
<f:length>120</f:length>
</f:table>
Encoding فایل ها در XML
در این قسمت از مقالات طراحی سایت در زمینه آموزش XML می خواهیم Encoding فایل ها در xml را برای شما بیان می کنیم .
گاهی اوقات با استفاده از کاراکترهای غیر اسکی به ارورهایی برخورد می کنیم برای رفع این مشکل در فایل xml باید از unicode استفاده کرد زیرا unicode فرمتی است که شامل تمام کاراکترهای زبان های استاندارد دنیا بوده و از همه آنها از جمله فارسی پشتیبانی می کند .
هنگامی که با xml کار می کنیم معمولا با دو نوع ارور رو به رو می شویم که این خطا ها عبارتند از :
- An invalid character was found in text content : این خطا به معنی ایجاد کاراکتر نامعتبر در متن می باشد و هنگامی رخ می دهد که یک کاراکتر غیراسکی در فایل xml موجود باشد .
- Switch from current encoding to specified encoding not supported : این خطلا به معنی تغییر از این حالت Encoding به Encoding تعیین شده ممکن نمی باشد و هنگامی که فایل XML شما با یک Encoding با فرمت single-byte طراحی شده باشد ، ولی با یک Encoding با فرمت double-byte دخیره شود ایجاد می شود.
نگهداری فایل های XML بر روی سرور
در این قسمت از آموزش xml ، نگهداری فایل های xml بر روی سرور را برای شما توضیح می دهیم.
همانند فایل های html فایل های xml نیز به راحتی قابل نگهداری می باشند توجه داشته باشید که نگهداری و ذخیره از فایل های xml نیازی به نرم افزار خاصی ندارد و مانند html دستورات را در notepad وارد می کنیم و فایل را با پسوند note.xml ذخیره می کنیم.
<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<from> Hamed </from>
<to> Ali </to>
<message>Remember me this weekend</message>
</note
برای ایجاد یک فایل XML توسط سرور ASP به صورت Run Time ، کد زیر را در یک فایل ASP نوشته و آن را ذخیره نمایید با انجام این کار و اجرای فایل asp فایل xml در سرور ذخیره می شود.حتما توجه داشته باشید که مقدار خاصیت content type در دستور فوق باید "text/xml" باشد .به مثال توجه کنید :
<%
response.ContentType="text/xml"
response.Write("<?xml version='1.0' encoding='ISO-8859-1'?>")
response.Write("<note>")
response.Write("<from>Hamed</from>")
response.Write("<to>Ali</to>")
response.Write("<message>Remember me this weekend</message>")
response.Write("</note>")
%>
همچنین می توانید برای ایجاد فایل xml به صورت run time روی یک سرور php کد را در یک فایل php ذخیره می کنیم.برای این کار ابتدا برای اجرای فایل php فایل xml تولید کرده و بر روی سرور ذخیره نمایید.حتما توجه داشته باشید که مقدار خاصیت content type در دستور فوق باید "text/xml" باشد .
<?php
header("Content-type: text/xml");
echo "<?xml version='1.0' encoding='ISO-8859-1'?>";
echo "<note>";
echo "<from>Hamed</from>";
echo "<to>Ali</to>";
echo "<message>Remember me this weekend</message>";
echo "</note>";
?>
برای نگهداری داده ها با استفاده از مقادیر موجود در پایگاه داده بهتر است اطلاعات خود را در فیلدهای fname و iname و در جدول tblguestbook از یک پایگاه داده SQL Server خوانده و سپس اطلاعات را در یک فایل XML ذخیره نماییم توجه نمایید که پسوند برای ذخیره ی این دستور باید با asp نوشته شود .
<%
response.ContentType = "text/xml"
set conn=Server.CreateObject("ADODB.Connection")
conn.provider="Microsoft.Jet.OLEDB.4.0;"
conn.open server.mappath("/db/database.mdb")
sql="select fname,lname from tblGuestBook"
set rs=Conn.Execute(sql)
response.write("<?xml version='1.0' encoding='ISO-8859-1'?>")
response.write("<guestbook>")
while (not rs.EOF)
response.write("<guest>")
response.write("<fname>" & rs("fname") & "</fname>")
response.write("<lname>" & rs("lname") & "</lname>")
response.write("</guest>")
rs.MoveNext()
wend
rs.close( )
conn.close( )
response.write("</guestbook>")
%>
برای ذخیره ی فایل xml بر روی سرور asp از کد زیر استفاده کرده و فایل را با عنوان asp ذخیره می کنیم .
<%
text="<note>"
text=text & "<to>Tove</to>"
text=text & "<from>Jani</from>"
text=text & "<heading>Reminder</heading>"
text=text & "<body>Don't forget me this weekend!</body>"
text=text & "</note>"
set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async=false
xmlDoc.loadXML(text)
xmlDoc.Save("test.xml")
%>
استفاده از مدل XML DOM پیشرفته
در این قسمت از آموزش XML می خواهیم سایر متدهای پرکاربرد و مهم را در مدل XML DOM را برای شما توضیح دهیم .
برای خواندن متن یک المنت در فایل XML ،از تگ TITLE استفاده می کنیم زیرا متن موجود در بین این تگ توسط فایل XML خوانده می شود . به مثال زیر توجه کنید :
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue ;
برای مقدار متن اولیه عنصر تگ title را به مقدار تعیین شده تغییر می دهیم.به مثال توجه کنید:
x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue = " Easy Cooking " ;
برای خواندن مقدار یک خاصیت در یک فایل xml از خاصیت lang استفاده می کنیم .
txt = xmlDoc.getElementsByTagName("title")[0].getAttribute( " lang " ) ;
همچنین شما می توانید برای تغییر مقدار یک خاصیت موجود در یک المنت و یا ایجاد یک خاصیت جدید از متد () setattribute استفاده کنید .به مثال زیر توجه کنید :
x=xmlDoc.getElementsByTagName("book");
for( i=0 ; i < x.length ; i++ )
{
x [ i ].setAttribute( " edition " , " first " ) ;
}
توجه داشته باشید که برای ایجاد یک المنت جدید بر روی فایل xml باید از متد ()createelement استفاده شود همچنین از متد ()createtextnode می توان برای ایجاد یک گره متنی استفاده کرد از متد ()appendchild نیز برای ایجاد یک فرزند جدید به گروه استفاده می شود . برای ایجاد یک عنصر جدید که حاوی متن ( text ) باشد ، ابتدا بایستی یک المنت جدید ساخت . سپس یک المنت متن را جدید و در آخر آن دو را به هم پیوند زد . به مثال زیر توجه کنید :
newel = xmlDoc.createElement( " edition " ) ;
newtext = xmlDoc.createTextNode( " First " ) ;
newel.appendChild( newtext ) ;
x = xmlDoc.getElementsByTagName( " book " ) ;
x[0].appendChild( newel ) ;
همچنین شما نیز می توانید برای حذف یک المنت موجود در یک فایل XML از متد ( ) removeChild استفاده کنید .
x = xmlDoc.getElementsByTagName( " book " )[0];
x.removeChild( x.childNodes[0] ) ;