Hướng dẫn can you use xml with javascript? - bạn có thể sử dụng xml với javascript không?

Tất cả các trình duyệt chính có trình phân tích cú pháp XML tích hợp để truy cập và thao tác XML.

Trình phân tích cú pháp XML

XML DOM (mô hình đối tượng tài liệu) xác định các thuộc tính và phương thức để truy cập và chỉnh sửa XML.

Tuy nhiên, trước khi có thể truy cập tài liệu XML, nó phải được tải vào đối tượng DOM XML.

Tất cả các trình duyệt hiện đại có trình phân tích cú pháp XML tích hợp có thể chuyển đổi văn bản thành đối tượng XML DOM.

Phân tích chuỗi văn bản

Ví dụ này phân tích chuỗi văn bản vào đối tượng DOM XML và trích xuất thông tin từ nó bằng javascript:

Thí dụ

Văn bản VAR, trình phân tích cú pháp, XMLDOC;
var text, parser, xmlDoc;

Text = "" + "hàng ngày Ý" + "Giada de Laurentiis" + "2005" + "";
"" +
"Giada De Laurentiis" +
"2005" +
"";

trình phân tích cú pháp = new DomParser (); XMLDOC = Parser.ParseFromString (Text, "Text/XML");
xmlDoc = parser.parseFromString(text,"text/xml");

document.getEuityById ("demo"). Internhtml = xmldoc.getElementsByTagName ("title") [0] .ChildNodes [0] .nodeValue;
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

Hãy tự mình thử »

Ví dụ giải thích

Một chuỗi văn bản được xác định:

Text = "" + "hàng ngày Ý" + "Giada de Laurentiis" + "2005" + "";
"" +
"Giada De Laurentiis" +
"2005" +
"";

Trình phân tích cú pháp XML DOM được tạo:

trình phân tích cú pháp = new DomParser ();

Trình phân tích cú pháp tạo một đối tượng DOM XML mới bằng chuỗi văn bản:

XMLDOC = Parser.ParseFromString (Text, "Text/XML");

Đối tượng XMLHTTPREQUEST

Đối tượng XMLHTTPrequest có trình phân tích cú pháp XML tích hợp.

Thuộc tính trả lời trả về phản hồi dưới dạng chuỗi.responseText property returns the response as a string.

Thuộc tính respessXML trả về phản hồi dưới dạng đối tượng DOM XML.responseXML property returns the response as an XML DOM object.

Nếu bạn muốn sử dụng phản hồi như một đối tượng DOM XML, bạn có thể sử dụng thuộc tính respendsXML.

Thí dụ

Request the file cd_catalog.xml and use the response as an XML DOM object:

Văn bản VAR, trình phân tích cú pháp, XMLDOC;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
    txt += x[i].childNodes[0].nodeValue + "
";
}
document.getElementById("demo").innerHTML = txt;

Hãy tự mình thử »

• Tải xuống các tệp nguồn - 1,5 kb

Giới thiệu

XML là một cơ sở rất quan trọng về dịch vụ web hoạt động. XML có thể được sử dụng cùng với rất nhiều ngôn ngữ phía máy khách và bên máy chủ để đưa nó có hiệu lực tốt. Hãy cho chúng tôi xem cách chúng tôi có thể sử dụng JavaScript phía XML và máy khách để làm việc. Chúng ta sẽ xem cách chúng ta có thể hiển thị nội dung của tệp XML bằng JavaScript, truy cập các phần tử con, thao tác các phần tử, v.v.

Vấn đề trình duyệt

Khi nói đến các ngôn ngữ phía khách hàng, khả năng không tương thích của trình duyệt là một vấn đề chính. Nhưng ở đây, nơi chúng tôi muốn sử dụng XML và JavaScript, XML là vấn đề. Không phải tất cả các trình duyệt đều có hỗ trợ cho các tài liệu phân tích cú pháp XML. Tôi sẽ sử dụng IE6 để giải thích các mã. Các trình duyệt không hỗ trợ XML, không thể đọc chúng. Khi bạn xem tệp XML trong trình duyệt như vậy, nó sẽ chỉ bỏ qua tất cả các thẻ.

Mẫu tệp XML

Hãy để chúng tôi xem xét một tệp XML mẫu >>

="1.0"
<company>
<employee id="001" sex="M" age="19">Premshree Pillai</employee>
<employee id="002" sex="M" age="24">Kumar Singh</employee>
<employee id="003" sex="F" age="21">Suhasini Pandita</employee>
<turnover>
<year id="2000">100,000</year>
<year id="2001">140,000</year>
<year id="2002">200,000</year>
</turnover>
</company>

Tệp XML ở trên hiển thị dữ liệu nhân viên và doanh thu của công ty (chỉ là một ví dụ).

Thao tác dữ liệu tệp XML bằng JavaScript

• Đang tải tệp XML: Bạn có thể tải một XML FIE từ JavaScript như thế này >>

  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  function loadXML(xmlFile)
  {
    xmlDoc.async="false";
    xmlDoc.onreadystatechange=verify;
    xmlDoc.load(xmlFile);
    xmlObj=xmlDoc.documentElement;
  }

  : You can load an XML fie from JavaScript like this >>

  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  function loadXML(xmlFile)
  {
    xmlDoc.async="false";
    xmlDoc.onreadystatechange=verify;
    xmlDoc.load(xmlFile);
    xmlObj=xmlDoc.documentElement;
  }

  Trên thực tế, chỉ hai dòng cuối cùng của hàm là đủ để tải tệp XML. Hai dòng trước được viết để đảm bảo rằng các chức năng JavaScript mà chúng ta có thể sử dụng sau này để thao tác dữ liệu tệp XML, không thực hiện bất kỳ chức năng nào trên một đối tượng không được hưởng. Do đó, hàm verify() được gọi.

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  Bây giờ tệp XML có thể được tải.

  loadXML('xml_file.xml');

• Hiển thị nội dung của tệp XML: Xem toàn bộ nội dung của tệp XML bằng cách sử dụng:

  alert(xmlObj.xml);

  : View the entire contents of the XML file using:

  alert(xmlObj.xml);

  Toàn bộ tệp XML sẽ được hiển thị trong một hộp cảnh báo vì nó có thụt lề thích hợp.

• Trẻ em và nút: Trong tệp XML ở trên <company> là thẻ cấp cao nhất, theo đó tất cả các thẻ khác đến. Những thẻ này được gọi là trẻ em. Tệp XML trên có thể được biểu diễn bằng đồ họa giống như một cây thư mục. Một cây thư mục được hiển thị dưới đây.: In the above XML file <company> is the top level tag under which all other tags come. These tags are called children. The above XML file can be represented graphically like a folder-tree. A folder-tree is shown below.
  

  Do đó, trong tệp XML ở trên, thẻ cấp cao nhất <company> có 4 trẻ em. Việc đánh số trẻ em (như thường lệ trong tất cả các ngôn ngữ) bắt đầu từ 0 (không). Thẻ <turnover> có 3 trẻ em dưới nó.

  Chúng ta có thể tìm thấy số lượng trẻ em mà một thẻ có bằng cách sử dụng thuộc tính

  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  function loadXML(xmlFile)
  {
    xmlDoc.async="false";
    xmlDoc.onreadystatechange=verify;
    xmlDoc.load(xmlFile);
    xmlObj=xmlDoc.documentElement;
  }

  0. Do đó, số lượng trẻ em của thẻ <company> (ở đây, 4) có thể được tìm thấy bằng cách sử dụng

  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  function loadXML(xmlFile)
  {
    xmlDoc.async="false";
    xmlDoc.onreadystatechange=verify;
    xmlDoc.load(xmlFile);
    xmlObj=xmlDoc.documentElement;
  }

  2.

  Số lượng trẻ em của thẻ <turnover> (ở đây, 3) có thể được tìm thấy bằng cách sử dụng

  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  function loadXML(xmlFile)
  {
    xmlDoc.async="false";
    xmlDoc.onreadystatechange=verify;
    xmlDoc.load(xmlFile);
    xmlObj=xmlDoc.documentElement;
  }

  4.

  Ở đây chúng tôi sử dụng

  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  function loadXML(xmlFile)
  {
    xmlDoc.async="false";
    xmlDoc.onreadystatechange=verify;
    xmlDoc.load(xmlFile);
    xmlObj=xmlDoc.documentElement;
  }

  5 vì <turnover> là đứa con thứ 3 của <company>

• Kiểm tra cho trẻ em: Bạn có thể kiểm tra xem một đứa trẻ nút cụ thể có bất kỳ trẻ em nào sử dụng

  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  function loadXML(xmlFile)
  {
    xmlDoc.async="false";
    xmlDoc.onreadystatechange=verify;
    xmlDoc.load(xmlFile);
    xmlObj=xmlDoc.documentElement;
  }

  8 hay không. Do đó,

  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  function loadXML(xmlFile)
  {
    xmlDoc.async="false";
    xmlDoc.onreadystatechange=verify;
    xmlDoc.load(xmlFile);
    xmlObj=xmlDoc.documentElement;
  }

  9 sẽ trả lại

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  0.

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  1 sẽ trả lại

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  2, vì thẻ

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  3 không có con.: You can test whether a particular node child has any children using

  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  function loadXML(xmlFile)
  {
    xmlDoc.async="false";
    xmlDoc.onreadystatechange=verify;
    xmlDoc.load(xmlFile);
    xmlObj=xmlDoc.documentElement;
  }

  8. Thus

  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  function loadXML(xmlFile)
  {
    xmlDoc.async="false";
    xmlDoc.onreadystatechange=verify;
    xmlDoc.load(xmlFile);
    xmlObj=xmlDoc.documentElement;
  }

  9 will return

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  0.

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  1 will return

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  2, since the

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  3 tag does not have any children.
• Nhận tên thẻ: Bạn có thể lấy tên thẻ của một đứa trẻ bằng cách sử dụng

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  4. Do đó,

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  5 sẽ trả về "

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  6".

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  7 sẽ trả về "

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  8".

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  9 sẽ trả về "

  loadXML('xml_file.xml');

  0".: You can get the tag name of a child using

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  4. Thus

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  5 will return "

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  6".

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  7 will return "

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  8".

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  9 will return "

  loadXML('xml_file.xml');

  0".
• Hiển thị nội dung của thẻ: Trong tệp XML, nội dung của thẻ

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  3 là "

  loadXML('xml_file.xml');

  2". Bạn có thể nhận được giá trị này bằng cách sử dụng

  loadXML('xml_file.xml');

  3.

  loadXML('xml_file.xml');

  4 sẽ trả lại trên

  loadXML('xml_file.xml');

  5. Tương tự

  loadXML('xml_file.xml');

  6 sẽ trả về "

  loadXML('xml_file.xml');

  7".: In the XML file, the content of the 1st

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  3 tag is "

  loadXML('xml_file.xml');

  2". You can get this value using

  loadXML('xml_file.xml');

  3.

  loadXML('xml_file.xml');

  4 will return “

  loadXML('xml_file.xml');

  5”. Similarly

  loadXML('xml_file.xml');

  6 will return "

  loadXML('xml_file.xml');

  7".
• Thuộc tính: Trong tệp XML, thẻ

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  3 có 3 thuộc tính. Một thuộc tính có thể được truy cập bằng

  loadXML('xml_file.xml');

  9. Do đó,

  alert(xmlObj.xml);

  0 sẽ trả về "

  alert(xmlObj.xml);

  1".

  alert(xmlObj.xml);

  2 sẽ trả về "

  alert(xmlObj.xml);

  3".

  alert(xmlObj.xml);

  4 sẽ trả về "

  alert(xmlObj.xml);

  5".: In the XML file, the

  function verify()
  {
    
    
    
    
    
    if (xmlDoc.readyState != 4)
    {
      return false;
    }
  }

  3 tag has 3 attributes. An attribute can be accessed using

  loadXML('xml_file.xml');

  9. Thus

  alert(xmlObj.xml);

  0 will return "

  alert(xmlObj.xml);

  1".

  alert(xmlObj.xml);

  2 will return "

  alert(xmlObj.xml);

  3".

  alert(xmlObj.xml);

  4 will return "

  alert(xmlObj.xml);

  5".

XML - Ví dụ JavaScript

Có nhiều thuộc tính và phương pháp có sẵn. Sử dụng các thuộc tính này, bạn có thể tạo rất nhiều ứng dụng phía máy khách. Ưu điểm chính của việc sử dụng XML cùng với JavaScript là việc chỉnh sửa dữ liệu trở nên rất dễ dàng. XML được cấu trúc, nó trở nên rất dễ dàng để quản lý nội dung. Một ví dụ là menu cây thư mục. Một cái khác là một cái đánh dấu JavaScript. Bạn có thể tìm thấy một đánh dấu JavaScript dựa trên XML tại đây.

Ticker JavaScript dựa trên XML

Chúng tôi sẽ tạo một đánh dấu JavaScript dựa trên XML có thể đánh dấu vào bất kỳ số lượng tin nhắn nào. Ticker đọc nội dung của nó, tức là kiểu đánh dấu, văn bản sẽ được hiển thị, liên kết cho thông báo cụ thể đó từ tệp XML. Đặt tệp XML là Ticker_Items.xml

Cấu trúc của tài liệu XML như sau >>

Tập lệnh đánh dấu XML

<script language="JavaScript1.2">







var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
function loadXML(xmlFile)
{
 xmlDoc.async="false";
 xmlDoc.onreadystatechange=verify;
 xmlDoc.load(xmlFile);
 ticker=xmlDoc.documentElement;
}

function verify()
{ 
 if (xmlDoc.readyState != 4)
 { 
  return false; 
 }
}

loadXML('ticker_items.xml');

document.write('<style type="text\/css">');
document.write('.ticker_style{font-family:' +
ticker.childNodes(1).childNodes(0).getAttribute('font') + '; font-size:' + 
ticker.childNodes(1).childNodes(0).getAttribute('size') + '; color:' + 
ticker.childNodes(1).childNodes(0).getAttribute('color') 
+ '; font-weight:' + 
ticker.childNodes(1).childNodes(0).getAttribute('weight') + 
'; text-decoration:' + 
ticker.childNodes(1).childNodes(0).getAttribute('decoration') + '}');
document.write('.ticker_style:hover{font-family:' + 
ticker.childNodes(1).childNodes(1).getAttribute('font') + '; font-size:' + 
ticker.childNodes(1).childNodes(1).getAttribute('size') + '; color:' + 
ticker.childNodes(1).childNodes(1).getAttribute('color') 
+ '; font-weight:' + 
ticker.childNodes(1).childNodes(1).getAttribute('weight') + 
'; text-decoration:' + 
ticker.childNodes(1).childNodes(1).getAttribute('decoration') + '}<br>');
document.write('</style>');

document.write('<table style="border:' + 
ticker.childNodes(0).getAttribute('border') + 
' solid ' + ticker.childNodes(0).getAttribute('bordercolor') + 
'; background:' + 
ticker.childNodes(0).getAttribute('background') + '; width:' + 
ticker.childNodes(0).getAttribute('width') + '; height:' + 
ticker.childNodes(0).getAttribute('height') + '"><tr><td><div 
id="ticker_space"></div></td></tr></table>');

var item_count=2;
var timeOutVal=(ticker.childNodes(0).getAttribute('timeout'))*1000;
var original_timeOutVal=timeOutVal;
var isPauseContent;

if(ticker.childNodes(0).getAttribute('pause')=="true")
{
 isPauseContent=' onmouseover="setDelay();" onmouseout="reset();"';
}
else
{
 isPauseContent='';
}

function setTicker()
{
 document.all.ticker_space.innerHTML='<center><a href="' + 

ticker.childNodes(item_count).getAttribute('URL') + '" target="' + 

ticker.childNodes(item_count).getAttribute('target') + 
'" class="ticker_style"' + isPauseContent + '>' +  
ticker.childNodes(item_count).firstChild.text + '</a></center>';

 if(item_count==ticker.childNodes.length-1)
 {
  item_count=2;
 }
 else
 {
  item_count++;
 }
 setTimeout("setTicker()",timeOutVal);
}

function setDelay()
{
 timeOutVal=10000000000000;
 item_count--;
}

function reset()
{
 timeOutVal=original_timeOutVal;
 setTicker();
}

setTicker();

</script>

Như bạn có thể thấy trong mã nguồn, trình đánh dấu đọc tất cả các nội dung/tin nhắn sẽ được hiển thị, các liên kết cho mỗi thông báo, mục tiêu cho mỗi URL, kiểu tĩnh của Ticker, kiểu cuộn, chiều rộng đường viền, màu, nền, nền, Độ trễ giữa các tin nhắn, vv từ tệp XML. Vì vậy, nếu bạn muốn thay đổi bất kỳ tham số nào của đánh dấu, tất cả những gì bạn phải làm là thực hiện các thay đổi cần thiết trong tệp XML.

Trình đánh dấu được hiển thị ở đây là một trình đánh dấu cơ bản xoay các tin nhắn trong một khoảng thời gian được chỉ định trong tệp XML. Có nhiều hiệu ứng bạn có thể thêm vào trình đánh dấu như ‘tin nhắn mờ dần, teletypewriter, v.v. Bạn có thể thêm các tính năng để thay đổi tốc độ đánh dấu hoặc liệt kê tất cả các tin nhắn ngay lập tức.

Bạn có thể tìm thấy một số hiệu ứng đánh dấu ở đây.

Tôi hy vọng bài viết này đã giúp bạn theo một cách nào đó.

Giấy phép

Bài viết này không có giấy phép rõ ràng được đính kèm với nó nhưng có thể chứa các thuật ngữ sử dụng trong văn bản bài viết hoặc chính các tệp tải xuống. Nếu nghi ngờ xin vui lòng liên hệ với tác giả thông qua bảng thảo luận dưới đây.

Một danh sách các giấy phép mà các tác giả có thể sử dụng có thể được tìm thấy ở đây

Được viết bởi

Nhà phát triển web

Tác giả là một sinh viên kỹ thuật ở Mumbai, Ấn Độ và là một người đam mê lập trình. Bạn có thể truy cập trang web của anh ấy tại http://www.qiksearch.com

Nhận xét và thảo luận

Sử dụng Ctrl+trái/phải để chuyển đổi tin nhắn, Ctrl+lên/xuống để chuyển đổi các luồng, Ctrl+Shift+Left/Right để chuyển đổi trang.

XML có phải là một phần của JavaScript không?

Tôi có thể viết HTML bằng XML không?

XML và JavaScript là gì?