lecture 13 – xml and json sfdv3011 – advanced web development reference: 1
TRANSCRIPT
1
Lecture 13 – XML and JSON
SFDV3011 – Advanced Web Development
Reference: http://www.w3schools.com/ajax/default.asp
XML
Extensible Markup Language
Language for exchange of structured information
2
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/
3
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
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
<img src="pic. jpg " />
Documents start with a declaration
<?xml version=" 1.0 " ?>
XML comments
<! -- This is a comment -->
XML Basics
6
DTD may be included - describes the rules of the markup and allowsdocument validation
Example: XML document with XHTML DTD:
<?xml version=" 1.0 " encoding ="utf -8" ?><!DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.0 Transitional // EN"" http: // www.w3. org /TR/ xhtml1 / DTD / xhtml1 - transitional . dtd "><! -- the XHTML document body starts here --><html >...</ html >
XML can be represented using Document Object Model (DOM)
XML Example
7
<?xml version=" 1.0 " ?><Person firstName =" John " lastName =" Smith ">
<Address >< streetAddress >21 2nd Street </
streetAddress ><city >New York </ city ><state >NY </ state ><postalCode >10021 </ postalCode >
</ Address >< phoneNumber type =" home ">
212 555 -1234</ phoneNumber >< phoneNumber type =" fax">
646 555 -4567</ phoneNumber >
</ Person >
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 usesHowever, 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">
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
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)
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 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