XML Attribute

specifies a single property for the element, using a

name/value

pair. An XML-element can have

one or more

attributes

<a href = "http://www.applications.ge/">Applications.ge</a>

In the example

href

is the

attribute name

and

http://www.applications.ge

is the

attribute value

... XML attribute names (unlike HTML) are case sensitive. Which means that

HREF

and

href

are considered two different XML attributes

<?xml version="1.0"?>
<student>
    <a href="http://www.applications.ge/" hreF="HTTP://applications.ge/">Applications.ge</a>
</student>

Several different values for the same attribute is not allowed. An attribute name must not appear more than once in the same tags:

<?xml version="1.0"?>
<student>
    <a href="http://www.applications.ge/" href="HTTP://applications.ge/">Applications.ge</a>
</student>

The following error will appear on the browser

error on line 3 at column 73: Attribute 
href
 redefined

Attribute names must always be defined without quotation marks, whereas attribute values must always appear in single or double quotation marks

<?xml version="1.0"?>
<student>
    <a "href"="http://www.applications.ge/">Applications.ge</a>
</student>

The following error will appear:

error on line 3 at column 8: error parsing 
attribute name
 

Attribute values must always be in quotation marks (single

'

or double

"

quotes)

<?xml version="1.0"?>
<student>
    <a href=http://www.applications.ge/>Applications.ge</a>
</student>

This incorrect syntax will generate the following error:

error on line 3 at column 13: AttValue: " or ' expected

XML declaration example

<?xml version = "1.0" encoding = "UTF-8" standalone = "yes"?>

XML document can optionally have an XML declaration. XML document without declaration is also valid

<student>
   <name>George</name>
   <city>Tbilisi</city>
   <phone>(011) 123-4567</phone>
</student>

If the XML declaration is included, it must contain version number attribute

<?xml encoding="UTF-8" standalone="no"?>
<student>
   <name>George</name>
   <city>Tbilisi</city>
   <phone>(011) 123-4567</phone>
</student>

It will generate the following error:

error on line 1 at column 7: Malformed declaration expecting version

The names are always in lower case

<?xml Version="1.0" encoding="UTF-8" standalone="no"?>
<student>
   <name>George</name>
   <city>Tbilisi</city>
   <phone>(011) 123-4567</phone>
</student>

It will generate the following error:

error on line 1 at column 7: Malformed declaration expecting version

The XML declaration must begin with

<?xml

<? version="1.0" encoding="UTF-8" standalone="no"?>
<student>
   <name>George</name>
   <city>Tbilisi</city>
   <phone>(011) 123-4567</phone>
</student>

The following error will be generated:

error on line 1 at column 3: xmlParsePI : no target name

If document contains XML declaration, it must be the

first statement

<student>
   <name>George</name>
   <city>Tbilisi</city>
   <phone>(011) 123-4567</phone>
</student>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>

The error will be the following:

error on line 6 at column 6: XML declaration allowed only at the start of the document

The order of placing the parameters is important. The correct order is:

version

,

encoding

and

standalone

<?xml encoding="UTF-8" standalone="no" version="1.0"?>
<student>
   <name>George</name>
   <city>Tbilisi</city>
   <phone>(011) 123-4567</phone>
</student>

This will generate the following error:

error on line 1 at column 7: Malformed declaration expecting version

Either single or double quotes may be used. Here is valid XML document

<?xml version='1.0' encoding='UTF-8' standalone="no"?>
<student>
   <name>George</name>
   <city>Tbilisi</city>
   <phone>(011) 123-4567</phone>
</student>

An HTTP protocol can override the value of encoding that we put in the declaration.

An XML file contains XML-elements, also called XML-nodes or XML-tags

<?xml version="1.0" encoding = "UTF-8"?>
<student>
   <name>George</name>
   <city>Tbilisi</city>
   <phone>(011) 123-4567</phone>
</student>

The names of XML-elements are enclosed by triangular brackets

< >

<element>

Each XML-element

needs to be closed

either with start or with end elements as shown below

<element>...</element>

XML allows self-closing elements, for example if the tag empty

<?xml version="1.0"?>
<student>
   <name>George</name>
   <city>Tbilisi</city>
   <address/>
   <phone>(011) 123-4567</phone>
</student>

Children elements must not overlap parent elements. i.e., an element end tag must follow all of its children's end tags.

<company>

is closed after the

</contact-info>

tag but it's opened after

</contact-info>

tag, which is wrong!

<?xml version = "1.0"?>
<contact-info>
<company>Learn Practice Teach
</contact-info>
</company>

The following example shows the correct nested tags

<?xml version = "1.0"?>
<contact-info>
   <company>Applications.ge</company>
<contact-info>

One

root element

is necessary for an XML document. In this example below, both

<x>

and

<y>

elements are at the top level and they don't have one parent element, which is wrong:

<?xml version = "1.0"?>
<x>...</x>
<y>...</y>

XML-elements are

case-sensitive

, which means that the start and the end elements names need to be exactly in the same case. This example is not correct XML document, because

case sensitivity

is not correctly applied

<?xml version="1.0"?>
<student>
   <name>George</name>
   <city>Tbilisi</city>
   <address/>
   <phone>(011) 123-4567</Phone>
</student>

In this case

<phone>

and its close tag

</phone>

is not in the same case

XML

stands for

Extensible Markup Language

application/xml

is the official Internet media type for XML.

.xml

is the XML filename extension.

XML is extensible

− XML allows us to create our own self-descriptive tags.

XML carries the data, does not present it

− XML allows us to store the data irrespective of how it will be presented.

XML is a public standard

- XML was developed by an organization called the World Wide Web Consortium. Any type of data can be expressed as an

XML document

XML can be used to

exchange

the information between companies and systems

Comment is not supported in JSON but we can do the trick - to add the

comment

inside the object as a

property

{  
    "employee": {  
        "name": "George",   
        "a0ge": "30",   
        "city": "Tbilisi",   
        "comments": "The best student ever"  
    }  
}

Creates

<select>

element using

document.createElement

method and fills with JSON array

optionArray = [
    "daily",
    "weekly",
    "biweekly",
    "monthly"
];

// Creates <select> element
let selector = document.createElement('select');

for(let option in optionArray) {
    let value = optionArray[option];
  
    // Creates <option> element for <select>
    let newOption = document.createElement("option"); 
    
    newOption.value = value;
    newOption.innerHTML = value;
  
    selector.options.add(newOption);
}
// Adds the <select> element into the document object
document.body.appendChild(selector);

JS script below creates

<script>

element and fills with the

JSON

retrieved from a server

<script>

var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: "customers", limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    myObj = JSON.parse(this.responseText);
    txt += "<select>"
    for (x in myObj) {
      txt += "<option>" + myObj[x].name;
    }
    txt += "</select>"
    document.write(txt);
  }
};
xmlhttp.open("POST", "json_demo_html_table.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

</script>

Dynamically

changes HTML table content using XMLHttpRequest after choosing any option on

<select>

obj = { table: "customers", limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    myObj = JSON.parse(this.responseText);
    txt += "<table border='1'>"
    for (x in myObj) {
      txt += "<tr><td>" + myObj[x].name + "</td></tr>";
    }
    txt += "</table>"
    document.getElementById("demo").innerHTML = txt;
  }
}
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

The code below calls PHP service using AJAX

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myObj.name;
  }
};
xmlhttp.open("GET", "demo_file.php", true);
xmlhttp.send();

PHP code that responds to the request

$myArr = array("name"=>"John", "age"=>30, "city"=>"New York");

$myJSON = json_encode($myArr);

echo $myJSON;

The

callback function

name is the same as the

callback

variable passed to the

URL

https://api.github.com/users/yui?callback=handleJSONP_variable

The content returned from the request:

handleJSONP_variable({"meta": {
  "Content-Type": "application/javascript; charset=utf-8",
  "Cache-Control": "public, max-age=60, s-maxage=60",
  "Vary": "Accept",
  "status": 200,
  ...
}, "data": {
  "login": "yui",
  "name": "YUI Library",
  "company": null,
  "blog": "http://yuilibrary.com/",
  "location": "Sunnyvale, CA",
  "email": null,
  "public_repos": 31,
  ...
}})