Web Client Side Technologies 0780341 Raneem Qaddoura
XML
XML What is XML? XML stands for eXtensible Markup Language. XML was designed to store and transport data. XML was designed to be both human- and machine-readable.
XML Why Study XML? XML plays an important role in many different IT systems. XML is often used for distributing data over the Internet. It is important (for all types of software developers!) to have a good understanding of XML.
What is the DOM? The DOM defines a standard for accessing and manipulating documents. The HTML DOM defines a standard way for accessing and manipulating HTML documents. It presents an HTML document as a tree-structure. The XML DOM defines a standard way for accessing and manipulating XML documents. It presents an XML document as a tree-structure. Understanding the DOM is a must for anyone working with HTML or XML.
XML Tree Structure
XML Example <?xml version="1.0" encoding="UTF-8"?> <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> <name>Strawberry Belgian Waffles</name> <price>$7.95</price> Light Belgian waffles covered with strawberries and whipped cream <calories>900</calories> </breakfast_menu>
XML Parser The XML DOM (Document Object Model) defines the properties and methods for accessing and editing XML. However, before an XML document can be accessed, it must be loaded into an XML DOM object. All modern browsers have a built-in XML parser that can convert text into an XML DOM object. XML Parsing: Parsing an XML string Parsing an XML file using AJAX Parsing an XML file from API
Parsing an XML String <h2>Parsing a XML String</h2> <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> var txt, parser, xmlDoc; txt = "<note>" + "<to>Tove</to>" + "<from>Jani</from>" + "<heading>Reminder</heading>" + "<body>Don't forget me this weekend!</body>" + "</note>"; parser = new DOMParser(); xmlDoc = parser.parseFromString(txt,"text/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>
Parsing an XML File Using AJAX The XMLHttpRequest Object has a built in XML Parser. The responseXML property returns the response as an XML DOM object. If you want to use the response as an XML DOM object, you can use the responseXML property. For more information about ajax, read the following: intro XMLHttp Request Response
Parsing an XML File Using AJAX <?xml version="1.0" encoding="UTF-8"?> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> <TITLE>Greatest Hits</TITLE> <ARTIST>Dolly Parton</ARTIST> <COMPANY>RCA</COMPANY> <YEAR>1982</YEAR> </CATALOG>
Parsing an XML File Using AJAX <h2>Parsing a XML File Using AJAX</h2> <button type="button" onclick="loadXMLDoc()">Get my CD collection</button> <p id="demo"></p> <script> function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var x, i, xmlDoc, txt; xmlDoc = xmlhttp.responseXML; txt = ""; x = xmlDoc.getElementsByTagName("ARTIST"); for (i = 0; i< x.length; i++) { txt += x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("demo").innerHTML = txt; }; xmlhttp.open("GET", "cd_catalog.xml", true); xmlhttp.send(); </script>
Parsing an XML File from API <h2>Parsing A XML File from API</h2> <div> <b>Low:</b> <span id="low"></span><br> <b>High:</b> <span id="high"></span><br> <b>Sky:</b> <span id="sky"></span> </div> <script> var xmlhttp, xmlDoc; xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { xmlDoc = xmlhttp.responseXML; var myObj = xmlDoc.getElementsByTagName("forecast")[0]; document.getElementById("low").innerHTML = myObj.getAttribute('low'); document.getElementById("high").innerHTML = myObj.getAttribute('high'); document.getElementById("sky").innerHTML = myObj.getAttribute('skytextday'); } }; xmlhttp.open("GET", "http://weather.service.msn.com/data.aspx?weasearchstr=ny,NY&culture=en-US&weadegreetype=C&src=msn", true); xmlhttp.send(); </script>
JSON
JSON Syntax JSON Syntax Rules JSON syntax is derived from JavaScript object notation syntax: Data is in name/value pairs Data is separated by commas Curly braces hold objects Square brackets hold arrays var person = { name: "John", age: 31, city: "New York" }; person.name; // returns John person["name"]; // returns John
JSON Parse A common use of JSON is to exchange data to/from a web server. When receiving data from a web server, the data is always a string. Parse the data with JSON.parse(), and the data becomes a JavaScript object. JSON Parsing: Parsing an JSON string Parsing an JSON file using AJAX Parsing an JSON file from API Note: Download JSONView extension on chrome to view a formatted JSON file on the browser
Parsing a JSON String <h2>Parsing a JSON String</h2> <p id="demo"></p> <script> var txt = '{"name":"John", "age":30, "city":"New York"}' var obj = JSON.parse(txt); document.getElementById("demo").innerHTML = obj.name + ", " + obj.age; </script>
Parsing a JSON File Using AJAX You can request JSON from the server by using an AJAX request As long as the response from the server is written in JSON format, you can parse the string into a JavaScript object. For more information about ajax, read the following: intro XMLHttp Request Response
Parsing a JSON File Using AJAX { "name":"John", "age":31, "pets":[ { "animal":"dog", "name":"Fido" }, { "animal":"cat", "name":"Felix" }, { "animal":"hamster", "name":"Lightning" } ] }
Parsing a JSON File Using AJAX <h2>Parsing a JSON File Using AJAX</h2> <p id="demo"></p> <script> var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var myObj = JSON.parse(xmlhttp.responseText); document.getElementById("demo").innerHTML = myObj.name; } }; xmlhttp.open("GET", "json_demo.json", true); xmlhttp.send(); </script>
Parsing A JSON File from API <h2>Parsing A JSON File from API</h2> <p>Current temperature is <span id="demo"></span></p> <script> 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[0].Temperature.Metric.Value + " " + myObj[0].Temperature.Metric.Unit; } }; xmlhttp.open("GET", "http://apidev.accuweather.com/currentconditions/v1/221790.json?language=en&apikey=hoArfRosT1215", true); xmlhttp.send(); </script>
JSON vs XML Both JSON and XML can be used to receive data from a web server. {"employees":[ { "firstName":"John", "lastName":"Doe" }, { "firstName":"Anna", "lastName":"Smith" }, { "firstName":"Peter", "lastName":"Jones" } ]} <employees> <employee> <firstName>John</firstName> <lastName>Doe</lastName> </employee> <firstName>Anna</firstName> <lastName>Smith</lastName> <firstName>Peter</firstName> <lastName>Jones</lastName> </employees>
JSON vs XML JSON is Like XML Because Both JSON and XML are "self describing" (human readable) Both JSON and XML are hierarchical (values within values) Both JSON and XML can be parsed and used by lots of programming languages Both JSON and XML can be fetched with an XMLHttpRequest JSON is Unlike XML Because JSON doesn't use end tag JSON is shorter JSON is quicker to read and write JSON can use arrays The biggest difference is: XML has to be parsed with an XML parser. JSON can be parsed by a standard JavaScript function.
Why JSON is Better Than XML XML is much more difficult to parse than JSON. JSON is parsed into a ready-to-use JavaScript object. For AJAX applications, JSON is faster and easier than XML: Using XML Fetch an XML document Use the XML DOM to loop through the document Extract values and store in variables Using JSON Fetch a JSON string JSON.Parse the JSON string
References https://www.w3schools.com/ Sharma, P. (2013). Introduction to Web Technology. SK Kataria and Sons. Peterson, C. (2014). Learning responsive web design: a beginner's guide. " O'Reilly Media, Inc.".