Download presentation
Presentation is loading. Please wait.
1
Lecture 13 – XML and JSON SFDV3011 – Advanced Web Development Reference: http://www.w3schools.com/ajax/default.asp 1
2
XML Extensible Markup Language Language for exchange of structured information 2
3
XML History In 1970’s the Standardized Generalized Markup Language (SGML) was created at IBM for marking up technical documents with structural tags In 1990 Tim Berners Lee created the Hypertext Markup Language (HTML) basing it on SGML SGML is effective and powerful, but very complicated to use; HTML, being just a subset, is very simple to use, but restricted to a limited set of tags intended for marking up Web pages In the later 1990’s SGML was reworked into XML with intention of making it much simpler to use, yet creating markup scheme general enough that it could be used for any type of information structuring The XML standard (maintained by W3C) is XML 1.0 http://www.w3.org/TR/2008/REC-xml-20081126/ http://www.w3.org/TR/2008/REC-xml-20081126/ 3
4
Some XML Applications Scalable Vector Graphics (SVG) - scheme for describing scalable images MathML - scheme for describing mathematical formulas to be included in the web pages XHTML - scheme for describing web pages (emulates HTML using XML rules) 4
5
XML Basics XML consists of elements denoted by an opening tag and an end tag Tags as well as their attributes can be defined by the user Tags are case sensitive Self-closing tag format 5 Documents start with a declaration XML comments
6
XML Basics 6 DTD may be included - describes the rules of the markup and allows document validation Example: XML document with XHTML DTD: <!DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.0 Transitional // EN" " http: // www.w3. org /TR/ xhtml1 / DTD / xhtml1 - transitional. dtd ">... XML can be represented using Document Object Model (DOM)
7
XML Example 7 21 2nd Street New York NY 10021 212 555 -1234 646 555 -4567
8
What is XHTML? 8 XHTML is an application of XML that emulates (simulate –copies) HTML XHTML DTD specifies rules for the same collection of tags that HTML uses However, the rules of XML must be obeyed: All tags must be lower case Self-closing elements must use a forward slash before the closing tag XHMTL is often chosen over HTML, because it’s a bit more strict XHTML 1.0 comes in three flavours: Strict, Transitional and Frameset <!DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.0 Strict // EN" " http: // www.w3. org /TR/ xhtml1 / DTD / xhtml1 - strict. dtd "> XHTML 1.1 corresponds to XHTML 1.0 Strict <!DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.1// EN" " http: // www. w3. org /TR/ xhtml11 / DTD / xhtml11.dtd">
9
XML and Ajax 9 Plain text is fine for short strings in an Ajax response But for serious page structure, or highly structured data, sending it as XML may make it much easier to handle The advantage of XML (sitting in the responseXML property) is that you can manipulate it as a piece of DOM function finishAjax () { var respObj = xmlHttp. responseXml ; eventObjs = respObj. documentElement. getElementsByTagName (" phoneNumbers "); } Things to remember: The fetched resource should be an.xml file The XML file should contain a root element (containing all the other elements) If there is an error parsing XML file, responseXml function will return null
10
JSON 10 JavaScript Object Notation Alternate way of structuring a document, using the syntax for JavaScript literals lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Language. JSON is an ideal data-interchange language. (www.json.org)
11
JSON example 11 { " firstName ": " John ", " lastName ": " Smith ", " address ": { " streetAddress ": "21 2nd Street ", " city ": " New York ", " state ": "NY", " postalCode ": " 10021 " }, " phoneNumbers ": [ { " type ": " home ", " number ": " 212 555 -1234 " }, { " type ": " fax ", " number ": " 646 555 -4567 " } ] }
![JSON example 11 { firstName : John , lastName : Smith , address : { streetAddress : 21 2nd Street , city : New York , state : NY , postalCode : }, phoneNumbers : [ { type : home , number : }, { type : fax , number : } ] }](http://images.slideplayer.com./24/7397581/slides/slide_11.jpg "JSON example 11 { firstName : John , lastName : Smith , address : { streetAddress : 21 2nd Street , city : New York , state : NY , postalCode : }, phoneNumbers : [ { type : home , number : }, { type : fax , number : } ] }")
12
JSON and Ajax 12 function finishAjax () { var respObj = eval ("(" + xmlHttp. responseText + ")"); var nameStr = respObj. firstName ; var homeNumber ; for (var i =0;i< respObj. phoneNumbers. length ;i ++) { if( respObj. phoneNumbers [i]. type == " home ") { homeNumber = respObj. phoneNumbers [i]. number ; } The advantage of JSON is that you can immediately start manipulating it as a JavaScript object
Similar presentations
