1 Dr Alexiei Dingli XML Technologies XML Advanced

2 A Uniform Resource Identifier (URI) is a string of characters which identifies an Internet Resource The most common URI is the Uniform Resource Locator (URL) which identifies an Internet domain address Another, not so common type of URI is the Universal Resource Name (URN) –urn:isbn: URIs

3 Since XML element names can be defined by anyone, this often results in a conflict Such as … –How would you add XML related to furniture (tables and chairs) to an HTML document? Conflicts !!!

4 More conflicts !!! HTML Apples Bananas XML Coffee Table 8 10

5 If these XML fragments were added together, there would be a name conflict Both contain a element, but the elements have different content and meaning An XML parser will not know how to handle these differences Even more conflicts !!!

6 Name conflicts in XML can easily be avoided using a name prefix This XML carries information about an HTML table, and a piece of furniture: Apples Bananas Coffee Table 8 10 In the example above, there will be no conflict because the two elements have different names. Solving conflicts...

7 The namespace is defined by the xmlns attribute in the start tag of an element The namespace declaration has the following syntax xmlns:prefix="URI" XML Namespaces

8 Apples Bananas African Coffee Table Namespaces Ex 1

9 <root xmlns:h=" xmlns:f=" Apples Bananas African Coffee Table Namespaces Ex 2

10 The xmlns attribute in the tag gave the h: and f: prefixes a qualified namespace When a namespace is defined for an element, all child elements with the same prefix are associated with the same namespace Namespaces can be declared in the elements where they are used or in the XML root element The namespace URI is not used by the parser to look up information The purpose is to give the namespace a unique name, however, often companies use the namespace as a pointer to a web page containing namespace information More on Namespaces

11 Defining a default namespace for an element saves us from using prefixes in all the child elements – African Coffee Table – 80 – 120 Default Namespaces

12 Namespaces: XSLT Case Study

13 XML parsers parse all text in a document When an XML element is parsed, the text between the XML tags is also parsed: – This text is also parsed The parser does this because XML elements can contain other elements: – Bill Gates The parser will break it up into sub-elements like this: – Bill Gates – Parsed Character Data (PCDATA) is a term used about text data that will be parsed by the XML parser. Parsed Character Data

14 The term CDATA is used about text data that should not be parsed by the XML parser Characters like "<" and "&" are illegal in XML elements "<" will generate an error because the parser interprets it as the start of a new element "&" will generate an error because the parser interprets it as the start of an character entity Some text, like JavaScript code, contains a lot of "<" or "&" characters. To avoid errors script code can be defined as CDATA Everything inside a CDATA section is ignored by the parser A CDATA section starts with " " Un-Parsed Character Data (1)

15 Un-Parsed Character Data (2)

16 A CDATA section cannot contain the string "]]>" Nested CDATA sections are not allowed The "]]>" that marks the end of the CDATA section cannot contain spaces or line breaks Un-Parsed Character Data (3)

17 XML documents can contain non ASCII characters, like French ê è é. To avoid errors, specify the XML encoding Two encoding errors: –An invalid character was found in text content. –Switch from current encoding to specified encoding not supported. XML Encoding

18 Different encodings...

19 DOM (Document Object Model) defines a standard way for accessing and manipulating documents Consider XML documents as a tree-structure All elements can be accessed through the DOM tree Their content (text and attributes) can be modified or deleted, and new elements can be created The elements, their text, and their attributes are all known as nodes DOM

20 document.getElementById("to").innerHTML="" document - the HTML document getElementById("to") - the HTML element where id="to" innerHTML - the inner text of the HTML element HTML DOM example

21 xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue xmlDoc - the XML document created by the parser. getElementsByTagName("to")[0] - the first element childNodes[0] - the first child of the element (the text node) nodeValue - the value of the node (the text itself) XML DOM example

22 x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; Retrieves the text value of the first element txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang"); retrieves the text value of the "lang" attribute of the first element Advanced DOM examples

23 x=xmlDoc.getElementsByTagName("book"); for(i=0;i<x.length;i++) { x[i].setAttribute("edition","first"); } Change value of attributes

24 newel=xmlDoc.createElement("edition"); newtext=xmlDoc.createTextNode("First"); newel.appendChild(newtext); x=xmlDoc.getElementsByTagName("book"); x[0].appendChild(newel); Show using trees... What is happening here... ?

25 x=xmlDoc.getElementsByTagName("book")[0]; x.removeChild(x.childNodes[0]); And what about here?

26 The CD Catalogue (XML) The CD Catalogue (Code) The CD Catalogue (HTML) XML to HTML

27 We check the browser, and load the XML using the correct parser We create an HTML table with We use getElementsByTagName() to get all XML CD nodes For each CD node, we display data from ARTIST and TITLE as table data. We end the table with XML to HTML explanation

28 Provides a way to communicate with a server after a web page has loaded Allows website to –Update a web page with new data without reloading the page –Request data from a server after the page has loaded –Receive data from a server after the page has loaded –Send data to a server in the background XMLHttpRequest Object

29 function loadXMLDoc(url) { xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=state_Change; xmlhttp.open("GET",url,true); xmlhttp.send(); } function state_Change() {... x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");... } Get CD info Using XMLHttpRequest

30 xmlhttp.open("GET",url,true); Our examples use "true" in the third parameter of open() This parameter specifies whether the request should be handled asynchronously True means that the script continues to run after the send() method, without waiting for a response from the server The onreadystatechange event complicates the code. But it is the safest way if you want to prevent the code from stopping if you don't get a response from the server. By setting the parameter to "false", your can avoid the extra onreadystatechange code. Use this if it's not important to execute the rest of the code if the request fails. XMLHttpRequest Async

31 Questions?