اموزش پیشرفته XML

 

ساختار Syntax دستوری در زبان XML

در این قسمت از مقالات طراحی سایت در زمینه آموزش XML ، ساختار دستوری Syntax در XML را توضیح می دهیم.
ابتدا موارد و نکات مهم در کدهای XML را توضیح می دهیم.در XML تمامی تگ ها به تگ انتهایی منتهی می شوند.تنها تگی که در XML که دارای تگ پایانی نیست ، تگ تعریف ورژن XML یا Declration است که برای تعیین نسخه XML در ابتدای اسناد XML قرار می گیرد . این تگ دارای تگ پایانی نیست . به دستور زیر توجه فرمایید :

< ?xml version=”1.0″ encoding=”utf-XML” ? >

همچنین تگ های XML به حروف بزرگ و کوچک حساس هستند برای مثال تگ < Letter > با < letter > متفاوت است . همچنین تگ ابتدایی و انتهایی باید دارای حروف بزرگ و کوچک یکسانی باشند ، در غیر اینصورت error رخ خواهد داد .به مثال زیر توجه نمایید :

< from > This is NOT Ok ! < /From >
< from > This is Ok ! < /from >

تگ های XML باید به طور صحیح و ترتیب مشخص قرار بگیرند . تگ های XML باید به ترتیب مشخص تعریف شوند و هر تگ قبل از اینکه تگ دیگری شروع شود ، بسته شده و یا کل تگ جدید را درون خود جای دهد . برای درک بهتر به مثال های زیر دقت نمایید :

< b > < i > This is NOT Ok ! < /b > < /i >
. کد بالا اشتباه بوده و ترتیب باز و بسته شدن تگ ها درست رعایت نشده است

< b > < i > This is Ok ! < /i > < /b >
. کد بالا صحیح است و ترتیب باز و بسته شدن تگ ها درست می باشد

تمامی اسناد XML باید دارای یک تگ root یا مادر باشند . تمامی اسناد XML باید دارای یک تگ root یا مادر باشند و سایر تگ های دیگر درون این تگ تعریف شوند . در کد مثال زیر این مسئله را نمایش داده ایم:

<root>
<child>
<subchild> … </subchild>
</child>
</root>

 

المنت های زبان XML

در این قسمت از آموزش XML  ، المنت های زبان XML را توضیح می دهیم.
در ابتدا باید بدانیم که اسناد XML شامل المنت های زبان XML هستند و هر المنت زبان XML شامل تمام چیزهایی که از تگ ابتدایی عنصر تا تگ انتهایی آن قرار دارند ، می شود . المنت ها دارای چند اجزا می باشند که عبارتند از :√ المنت های دیگر – تگ های دیگر XML
√ متن (TEXT)
√ خواص المنت ها (ATTRIBUTES)
√ مجموعه ای از موارد فوقدستور زیر یک قطعه کد ساده XML را نشان می دهد .

<bookstore>
<book category=”CHILDREN”>
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category=”WEB”>
<title>Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>

در کد بالا تگ های < bookstore > و < book > ، در اصطلاح elements contents هستند ، زیرا خود شامل المنت های دیگر می شوند . تگ < book > دارای یک خاصیت ( attribute ) به نام category می باشد ، که اطلاعاتی راجع به آن را ارائه می کند . المنت هایی مثل < title > و یا < year > در اصطلاح text content هستند ، زیرا شامل متن می باشند .برای تعیین نام تگ ها باید از دستوراتی پیروی کرد که عبارتند از :

√ نام تگ ها می تواند شامل حروف ، اعداد و یا سایر کاراکترها باشد .
√ نام ها نمی توانند با یک عدد شروع شوند .
√ نام ها نمی توانند با عبارت xml آغاز شوند ( مثل xml , XML و … ) .
√ نام ها نمی توانند شامل فاصله باشند .

بهتر است از موارد زیر برای نام گذاری تگ های XML استفاده کرد :

  •   نام ها را طوری انتخاب نمایید که گویای کار خود باشند ، به عبارت دیگر توضیح مختصری راجع به تگ ارائه دهند . مثلا تگ < first_name > برای نام و یا < last_name > برای نام خانوادگی مناسب است .
  •   نام ها بهتر است کوتاه و ساده باشند . مثلا < book_title > ، نام مناسبی است و نه < the_title_of_the_book > .
  •   از استفاده از کاراکتر ” – ” اجتناب کنید . اگر نامی مثل < first-name > بسازید ، ممکن است برنامه فکر کند شما می خواهید name را از first جدا نمایید .
  •   همچنین از استفاده از کاراکتر نقطه ” . ” پرهیز کنید . اگر نامی مثل < first.name > بسازید ، ممکن است برنامه فکر کند name خاصیتی برای first است .
  •   از استفاده از علامت ” : ” هم خودداری نمایید . زیرا این علامت در XML برای استفاده در namespace ها ذخیره شده و به کار بردن آن error ایجاد می کند .

 

 

خواص تگ های XMl

در این قسمت از آموزش XML  ، خواص تگ های XML را توضیح می دهیم .
تگ های XML نیز همانند تگ های HTML می توانند دارای خواص باشند . برای اینکه بخواهیم نوع فایل را در XML مشخص کنیم ابتدا تگ XML را تعریف می کنیم که این خاصیتی به نام TYPE می باشد . به مثال زیر توجه نمایید :

< file Type = ” gif ” >  Computer.gif  </file>

همانطور که گفته شد خواص XML حتما بایستی در بین دو علامت ” ” یا ‘ ‘ قرار بگیرند . تگ زیر هر دو حالت را نشان می دهد .

< person age = ” 30 ”  >  Sara  </person>
< person age = ‘ 30 ‘  >  Sara  </person>

فراموش نشود که اگر مقدار خاصیت خودش دارای کاراکتر ” بود از کاراکتر ‘ استفاده نمایید .

< person name = ‘ Alireza ” Farhadi ” ‘  > student </person>

تفاوت خواص XML و المنت ها در XML :
به دو قطعه کد XML زیر دقت نمایید :
در حالت اول age یک خاصیت برای تگ person است . اما در حالت دوم به صورت یک المنت برای آن در آمده است . هر دو حالت اطلاعات یکسانی را ارائه کرده و خروجی یکسانی خواهند داشت . اما روش دوم بهتر بوده و توصیه می شود .
زیرا هم ظاهر برنامه مرتبتر بوده و هم اعمال تغییرات به آن در آینده راحت تر خواهد بود .

< person age=”18″>
< firstname > Anna< /firstname >
< lastname > Smith < /lastname >
< /person >

< person >
< age > 18 < /age>
< firstname > Anna< /firstname >
< lastname > Smith < /lastname >
< /person >

خواص XML شامل سه حالت می باشد که شامل DATE , DATE که برای تگ NOTE تعریف می شود و به صورت یک المنت فرزند است و حالت سوم DATE که برای تگ NOTE تعریف می شود و هریک از مقادیر آن به صورت یک المنت فرزند درونش را تعریف می کند و چون حالت سوم بهترین و اصولی ترین روش برای تعریف تگ ها و خواص آنها می باشد این حالت را مثال می زنیم:

     <note>
<date>
<day>10</day>
<month>01</month>
<year>2008</year>
</date>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
</note>

از آنجاییکه تعریف اطلاعات در خواص تگ های XML می تواند کمی ظاهر برنامه را پیچیده و ایجاد تغییرات در آن را سخت تر نماید . بهتر است به جای استفاده از خواص مقدار آنها را در المنت های XML تعریف کنید .
اشکالات عمده استفاده از خواص برای تعریف اطلاعات عبارتند از :

  • خواص نمی توانند چند مقداری باشند یعنی چند مقدار را درون خود جای دهند اما المنت های XML این قابلیت را دارند .
  • خواص نمی توانند ساختار درختی و سلسله مراتبی داشته باشند اما المنت های XML این قابلیت را دارند .
  •  خواص را در آینده به راحتی نمی توانید تغییر یا توسعه دهید اما المنت های XML دراین مورد بسیار بهتر هستند .

 

 

 

 

اعتبار سنجی اسناد XML

در این قسمت از آموزش XML می خواهیم اعتبار سنجی اسناد XML را توضیح دهیم .
یک سند مرتب و ساختار یافته XML ، سندی است که دارای Syntax صحیح این زبان باشد . توجه داشته باشید که اسناد xml باید دارای یک تگ مادر باشند که سایرتگ های فایل ، درون آن تعریف شوند همچنین تمامی تگ های XML باید دارای تگ انتهایی باشند ، به جز تگ Declration . توجه داشته باشید که تگ های XML به بزرگ و کوچک بودن حروف حساس اند و تگ های XML باید به ترتیب صحیح و درست قرار گیرند . مقادیر خواص تگ های XML حتما باید بین دو علامت ” ” یا ‘ ‘ قرار بگیرند .دستور زیر یک سند مرتب XML را نشان می دهد.

<note>
<to>Hamed</to>
<from>Ali</from>
<heading>Reminder</heading>
<body>Don’t forget me this weekend!</body>
</note>

یک سند مرتب XML علاوه بر اینکه دارای ساختاری صحیح است ، باید با قوانین و استانداردهای یک سند ( DTD ( Document Type Definition  مطابقت داشته باشد . هدف از تهیه یک سند DTD برای یک فایل XML ، تعیین ساختار کل سند است . این سند DTD ، ساختار کلی فایل XML را با تعیین لیست المنت های آن مشخص می سازد .DTD خود یک روش و زیان برای اعتبار سنجی اسناد XML است .

برای اضافه کردن یک سند DTD به فایل XML باید به وسیله ی تگ Doctype در ابتدای یک ایل XML آن را به یک سند DTD پیوند زد.دسور زیر نمونه ای از این سند می باشد:

<note>
<!DOCTYPE note SYSTEM “Note.dtd” >
<to>Hamed</to>
<from>Ali</from>
<heading>Reminder</heading>
<body>Don’t forget me this weekend!</body>
</note>

کد فایل DTD در جدول زیر نمایش داده شده است . به ارتباط این کد با کد فایل XML دفت نمایید . این فایل تمام المنت های فایل XML را به همراه نام ها و ترتیب آنها را مشخص ساخته است . به مثال زیر توجه کنید :

<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body) >
<!ELEMENT to (#PCDATA) >
<!ELEMENT from (#PCDATA) >
<!ELEMENT heading (#PCDATA) >
<!ELEMENT body (#PCDATA) >
] >

کنسرسیوم جهانی وب ( W3C ) روشی با ساختار مشابه XML را برای اعتبار سنجی اسناد XML در طراحی سایت تعیین کرده است . این روش به XML Schema معروف می باشد . در قطعه کد زیر ، استفاده از XML Schema را برای اعتبار سنجی فایل XML به کار برده ایم . به ارتباط آن با فایل XML دقت نمایید . XML Schema خود یک روش و زیان برای اعتبار سنجی اسناد XML است . به مثال زیر توجه نمایید :

<xs:element name=”note” >
<xs:complexType >
<xs:sequence >
<xs:element name=”to” type=”xs:string”/ >
<xs:element name=”from” type=”xs:string”/ >
<xs:element name=”heading” type=”xs:string”/ >
<xs:element name=”body” type=”xs:string”/ >
</xs:sequence >
</xs:complexType >
</xs:element >

 

 

 

قالب بندی فایل های XML با CSS

در این قسمت از آموزش xml ، قالب بندی فایل های xml با css را برای شما توضیح دهیم
اگر خواهان این هستید که فایل های xml خود را با ظاهر و قالب بندب خاصی نمایش دهید باید از یک فایل css استفاده کنید برای این کار ابتدا باید فایل xml را به فایل css وصل نمایید برای این منظور از یگ تگ < ?xml > شامل آدرس فایل CSS مورد نظر ، در ابتدای سند XML استفاده می شود . به مثال زیر توجه نمایید :

<?xml version=”1.0″ encoding=”ISO-XMLXML59-1″ ?>
<?xml-stylesheet type=”text/css” href=”book_catalog.css” ?>
<CATALOG>
<BOOK>
<TITLE> HTML</TITLE>
<AUTHER> Developer1 </AUTHER>
<COMPANY> Pishgaman </COMPANY>
<PRICE> 4500 </PRICE>
<YEAR> 13XML9</YEAR>
</BOOK>
<BOOK>
<TITLE> CSS </TITLE>
<AUTHER> Amiri </AUTHER>
<COMPANY> Tebian </COMPANY>
<PRICE> 6500 </PRICE>
<YEAR> 1390</YEAR>
</BOOK>
</CATALOG>

در جدول زیر کدی فایل CSS ای که برای قالب بندی سند XML خود به کار برده ایم را نمایش داده ایم .

CATALOG
{
background-color: #ffffff;
width: 100%;
}
BOOK
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
TITLE
{
color: #FF0000;
font-size: 20pt;
}
AUTHER
{
color: #0000FF;
font-size: 20pt;
}
PRICE,YEAR,COMPANY
{
display: block;
color: #000000;
margin-left: 20pt;
}

پس از اینکه فایل CSS را به سند XML متصل کردید ، فایل CSS آن را قالب بندی کرده و با استایل جدید نمایش می دهد . مرورگر فایل XML را به جای نمایش ساده ، با قالب CSS نشان می دهد . با کلیک بر روی لینک زیر ، اثر فایل CSS بر روی سند XML را ببینید .

 

 

 

 

قالب بندی فایل های XML با XSLT

در مقالات طراحی سایت در این قسمت از آموزش xml ، چگونگی قالب بندی فایل های xml با xslt را برای شما توضیح می دهیم .
xslt یک زبان می باشد و شیوه ای جدا از xml می باشد .یکی از شاخه های استاندارد XSLT  با نام XSL شناخته می شود و وظیفه آن تبدیل یک سند  XML به یک سند XHTML هست. نحوه کار مشابه XSLT هست، با این تفاوت که در اینجا سند XML به سند XML دیگری تبدیل نمی شود، بلکه به کد HTML تبدیل می شود .

<?xml version=”1.0″ encoding=”ISO-XMLXML59-1″?>
<breakfast_menu>
<food>
<name>Belgian Waffles</name>
<price>$5.95</price>
<description>two of our famous Belgian Waffles with plenty of real maple syrup</description>
<calories>650</calories>
</food>
<food>
<name>Strawberry Belgian Waffles</name>
<price>$7.95</price>
<description>light Belgian waffles covered with strawberries and whipped cream</description>
<calories>900</calories>
</food>
<food>
<name>Berry-Berry Belgian Waffles</name>
<price>$8.95</price>
<description>light Belgian waffles covered with an assortment of fresh berries and whipped cream</description>
<calories>900</calories>
</food>
<food>
<name>French Toast</name>
<price>$4.50</price>
<description>thick slices made from our homemade sourdough bread</description>
<calories>600</calories>
</food>
<food>
<name>Homestyle Breakfast</name>
<price>$6.95</price>
<description>two eggs, bacon or sausage, toast, and our ever-popular hash browns</description>
<calories>950</calories>
</food>
</breakfast_menu>

در جدول زیر نیز کد فایل XSLT را نشان داده ایم . توجه داشته باشید ، که این فایل ، قالب و استایل نمایش فایل XML را تعیین می کند . برای آشنایی با نحوه کار و کد این فایل ، توضیخات لازم را بعد از کد قرار داده ایم .

<?xml version=”1.0″ encoding=”ISO-XMLXML59-1″?>
<html xsl:version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” xmlns=”http://www.w3.org/1999/xhtml”>
<body style=”font-family:Arial;font-size:12pt;background-color:#EEEEEE”>
<xsl:for-each select=”breakfast_menu/food”>
<div style=”background-color:teal;color:white;padding:4px”>
<span style=”font-weight:bold”><xsl:value-of select=”name”/></span>
– <xsl:value-of select=”price”/>
</div>
<div style=”margin-left:20px;margin-bottom:1em;font-size:10pt”>
<xsl:value-of select=”description”/>
<span style=”font-style:italic”>
<xsl:value-of select=”calories”/> (calories per serving)
</span>
</div>
</xsl:for-each>
</body>
</html>

البته XML و XSLT  به عنوان یک استاندارد Syntax خاص خود و قواعد خود را دارند که باید آنها را یاد بگیرید و برطبق آنها کدهای XML و XSLT خود را بنویسید .

 

 

 

 

 

 

 

وارد کردن اطلاعات یک فایل 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] ) ;

 

منبع : sitedesign-co.com

pc-learns.ir