Read and Display Server-Side XML with JavaScript Article - Part 1

XML plays a vital role in web services, and can play a powerful role in combination with multiple client and server languages. This article will explore how to use XML and client JavaScript to display XML file content, access child elements, operate elements, etc.

Browser compatibility issues

In client languages, browser compatibility is a major issue. For the combination of XML and JavaScript, the problem is mainly XML: not all browsers support parsing XML documents.

The following code example is based on IE6. Browsers that do not support XML cannot read these codes, so when viewing XML files in these browsers, the browser ignores all tags.

XML file example

The following is a sample XML file showing company employee data and turnover:

<?xml version="1.0" ?>
<company>
  <employee age="19" sex="M">Premshree Pillai</employee>
  <employee age="24" sex="M">Kumar Singh</employee>
  <employee age="21" sex="M">Ranjit Kapoor</employee>
  <turnover>
    <year>100,000</year>
    <year>140,000</year>
    <year>200,000</year>
  </turnover>
</company>

Manipulate XML file data using JavaScript

Load XML file

You can load XML files through the following JavaScript code:

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

function loadXML(xmlFile) {
  xmlDoc.async = "false";
  xmlDoc.onreadystatechange = verify;
  xmlDoc.load(xmlFile);
  xmlObj = xmlDoc.documentElement;
}

In fact, the last two lines of the function are enough to load the XML file. The first two lines ensure that any JavaScript function we use to manipulate XML file data afterwards will not perform any operations on uninitialized objects. Therefore, call verify() function:

function verify() {
  // 0 对象未初始化
  // 1 对象正在加载数据
  // 2 对象已加载数据
  // 3 可以处理对象中的数据
  // 4 对象完全初始化
  if (xmlDoc.readyState != 4) {
    return false;
  }
}

The XML file can now be loaded:

loadXML('xml_file.xml');

Show XML file content

Use alert(xmlObj.xml); to view the entire content of the XML file. The entire XML file will be displayed as is in the warning box with appropriate indentation.

Sube elements and nodes

In the XML file above, <company></company> is the top-level tag, and all other tags are under it. These tags are called child elements. This XML file can be graphically represented in the form of a folder tree:

In the above XML file, the top-level tag <company></company> has 4 child elements.

The number of child elements (usually in all languages) starts at 0 (zero). There are 3 child elements under the <turnover></turnover> tag.

We can use the childNodes.length attribute to find the number of child elements the tag has. Therefore, the number of child elements of the <company></company> tag (4 here) can be found via xmlObj.childNodes.length.

<turnover></turnover> tag (3 here) can be found via xmlObj.childNodes(3).childNodes.length.

We use childNodes(3) here because <turnover></turnover> is the third child element of <company></company>.

Test child elements

You can use childNodes(i).hasChildNodes to test whether a specific node child element has any child elements.

Therefore, xmlObj.childNodes(3).hasChildNodes() will return true. xmlObj.childNodes(2).hasChildNodes() will return false because the <employee></employee> tag has no child elements.

Get the tag name

You can use childNodes(i).tagName to get the label name of the child element. Therefore, xmlObj.tagName will return "company". xmlObj.childNodes(0).tagName will return "employee". xmlObj.childNodes(3).childNodes(0).tagName will return "year".

Show the content of the tag

In an XML file, the content of the first <employee></employee> tag is "Premshree Pillai". You can get this value using xmlObj.childNodes(0).firstChild.text.

<?xml version="1.0" ?>
<company>
  <employee age="19" sex="M">Premshree Pillai</employee>
  <employee age="24" sex="M">Kumar Singh</employee>
  <employee age="21" sex="M">Ranjit Kapoor</employee>
  <turnover>
    <year>100,000</year>
    <year>140,000</year>
    <year>200,000</year>
  </turnover>
</company>

Properties

In an XML file, the <employee></employee> tag has 3 properties. The properties can be accessed using childNodes(i).getAttribute("AttributeName"). Therefore, xmlObj.childNodes(0).getAttribute("id") will return "001". xmlObj.childNodes(1).getAttribute("age") will return "24". xmlObj.childNodes(2).getAttribute("sex") will return "F".

...(The subsequent content, including the FAQ part, can be rewritten in the same way, maintain the original meaning, and adjust the wording and sentence structure.)

The above is the detailed content of Read and Display Server-Side XML with JavaScript Article - Part 1. For more information, please follow other related articles on the PHP Chinese website!