/ Introduction to XML

Size: px

Start display at page:

Download "/ Introduction to XML"

Matilda Rose
5 years ago
Views:

1 Introduction to XML XML stands for Extensible Markup Language. It is a text-based markup language derived from Standard Generalized Markup Language (SGML). XML tags identify the data and are used to store and organize the data, rather than specifying how to display it like HTML tags, which are used to display the data. XML is not going to replace HTML in the near future, but it introduces new possibilities by adopting many successful features of HTML. There are three important characteristics of XML that make it useful in a variety of systems and solutions XML is extensible XML allows you to create your own self-descriptive tags that suits your application. XML carries the data, does not present it XML allows you 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 (W3C) and is available as an open standard. Example of an XML Document <?xml version = "1.0" encoding = "UTF-8"?> <employee-info> <employee> <code>123</code> <name>jack Lal</name> <salary> </salary> </employee> <employee> <code>456</code> <name>jill Kumari</name> <salary> </salary> </employee> <employee> <code>789</code> <name>tim Singh</name> <salary> </salary> </employee> </employee-info> Page 153

2 XML Declaration The XML document can optionally have an XML declaration. It is written as follows <?xml version = "1.0" encoding = "UTF-8"?> Where version is the XML version and encoding specifies the character encoding used in the document. The XML declaration is case sensitive and must begin with "<?xml>" where "xml" is written in lower-case. If document contains XML declaration, then it strictly needs to be the first statement of the XML document. Tags and Elements Basic syntax - An XML file is structured by several XML-elements, also called XMLnodes or XML-tags. The names of XML-elements are enclosed in triangular brackets < > i.e. <element>. Each XML-element needs to be closed either with start or with end elements as shown - <element>...</element> or in simple-cases, just this way Nesting of Elements An XML-element can contain multiple XML-elements as its children, but the children elements must not overlap. i.e. an end tag of an element must have the same name as that of the most recent unmatched start tag. The Following example shows incorrect nested tags <?xml version = "1.0" encoding = "UTF-8"?> <employee> <code>123</code> <name>jack Lal</name> <salary> </employee> </salary> Root Element An XML document MUST have exactly one root element. For example, following is not a correct XML document, because both the x and y elements occur at the top level without a root element <x>...</x> <y>...</y> The Following example shows a correctly formed XML document <root> <x>...</x> <y>...</y> </root> Case Sensitivity The names of XML-elements are case-sensitive. That means the name of the start and the end elements need to be exactly in the same case. For example, <employee> is different from <Employee> Page 154

3 XML Attributes Attributes are part of XML elements. An element can have multiple unique attributes. Attribute gives more information about XML elements. To be more precise, they define properties of elements. An XML attribute is always a name-value pair. Its format is as shown: <element-name attribute1 attribute2 >...content...< /element-name> where attribute1 and attribute2 has the following form: name = "value" value has to be in double (" ") or single (' ') quotes. Example: <employee grade = "A"> <code>789</code> <name>tim Singh</name> <salary> </salary> </employee> Page 155

4 Introduction to JSON JSON short for JavaScript Object Notation is a format for sharing data. As its name suggests, JSON is derived from the JavaScript programming language, but it s available for use by many languages including Python, Ruby, PHP, and Java. JSON is usually pronounced like the name Jason. JSON uses the.json extension when it stands alone. When it s defined in another file format (as in.html), it can appear inside of quotes as a JSON string or it can be an object assigned to a variable. JSON Internet Media type is application/json. JSON is easy to transmit between web server and client or browser. It is easily readable and lightweight. JSON offers a good alternative to XML and requires much less formatting. Syntax and Structure A JSON object is a key-value data format that is given in curly braces. When you re working with JSON, you ll likely see JSON objects in a.json file, but they can also exist as a JSON object or string within the context of a program. A JSON object looks something like this: "first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean", "online" : true, "followers" : 987 Although this is a very short example, and JSON could be many lines long, this shows that the format is generally set up with two curly braces on either end of it and with key-value pairs populating the space between. Most data used in JSON ends up being encapsulated in a JSON object. Key-value pairs have a colon between them as in "key" : "value". Each key-value pair is separated by a comma, so the middle of a JSON looks like this: "key" : "value", "key" : "value", "key": "value". In our example above, the first keyvalue pair is "first_name" : "Sammy". JSON keys are on the left side of the colon. They MUST be enclosed in double quotation marks, as in "key". Within each object, keys need to be unique. These key strings can include whitespaces, as in "first name", but that can make it harder to access when you re programming, so it s best to use underscores, as in "first_name". JSON values are found to the right of the colon. These need to be one of 6 simple data types: strings numbers objects arrays Booleans (true or false) null Values can also be made up of the complex data types of JSON object or array. Page 156

5 Each of the data types that are passed in as values into JSON will maintain their own syntax, so strings will be in quotes, but numbers will not be. Although in.json files, we typically see the format expanded over multiple lines, JSON can also be written all in one line as shown: "first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean", "online" : true Writing the JSON format on multiple lines often makes it much more readable, especially when dealing with a large data set. Because JSON ignores whitespace between its elements, you can space out your colons and key-value pairs in order to make the data even more human readable: "first_name" : "Sammy", "last_name" : "Shark", "online" : true It is important to keep in mind that though they look similar, a JSON object is not the same format as a JavaScript object, so, though you can use functions within JavaScript objects, you cannot use them as values in JSON. The most important attribute of JSON is that it can be readily transferred between programming languages in a format that all of the participating languages can work with. JavaScript objects can only be worked with directly through the JavaScript programming language. So far we have looked at the JSON format in its simplest terms, but JSON can become hierarchical and complex, comprised of nested objects and arrays. Page 157

6 Working with Complex Types in JSON JSON can store nested objects in JSON format in addition to nested arrays. These objects and arrays will be passed as values assigned to keys, and typically will be comprised of key-value pairs as well. A) Nested Objects In the users.json file below, for each of the four users ("sammy", "jesse", "drew", "jamie") there is a nested JSON object passed as the value for each of the users, with its own nested keys of "username" and "location" that relate to each of the users. The first nested JSON object is highlighted. users.json "sammy" : "username" : "SammyShark", "location" : "Indian Ocean", "online" : true, "followers" : 987, "jesse" : "username" : "JesseOctopus", "location" : "Pacific Ocean", "online" : false, "followers" : 432, "drew" : "username" : "DrewSquid", "location" : "Atlantic Ocean", "online" : false, "followers" : 321, "jamie" : "username" : "JamieMantisShrimp", "location" : "Pacific Ocean", "online" : true, "followers" : 654 Page 158

7 B) Nested Arrays Data can also be nested within the JSON format by using JavaScript arrays. JavaScript uses square brackets [ ] on either end of its array type. Arrays are ordered collections and can contain values of differing data types. user_profile.json "first_name" : "Sandeep", "last_name" : "Gupta", "location" : "Mumbai", "social_media" : [ "description" : "twitter", "link" : " "description" : "facebook", "link" : " "description" : "instagram", "link" : " ] Page 159

8 Comparison to XML XML or extensible Markup Language, is a way to store accessible data that can be read by both humans and machines. The XML format is available for use across many programming languages. In many ways, XML is very similar to JSON, but it requires much more text and so is longer in length and more time consuming to read and write. XML must be parsed with an XML parser, but JSON can be parsed with a standard function. Also unlike JSON, XML cannot use arrays. We ll look at an example of the XML format and then look at the same data rendered in JSON. users.xml <users> <user> <username>sammyshark</username> <location>indian Ocean</location> </user> <user> <username>jesseoctopus</username> <location>pacific Ocean</location> </user> <user> <username>drewsquir</username> <location>atlantic Ocean</location> </user> <user> <username>jamieshrimp</username> <location>pacific Ocean</location> </user> </users> users.json "users": [ "username" "username" "username" "username" ] : : : : "SammyShark", "location" : "Indian Ocean", "JesseOctopus", "location" : "Pacific Ocean", "DrewSquid", "location" : "Atlantic Ocean", "JamieMantisShrimp", "location" : "Pacific Ocean" We see that JSON is much more compact and does not require end tags while XML does. Additionally, XML is not making use of an array as this example of JSON does. JSON is leaner and less verbose than XML, and quick to use in many situations including AJAX applications. Page 160

9 AJAX AJAX stands for "Asynchronous JavaScript & XML". Ajax is a technique for loading data into part of a page without having to refresh the entire page. Ajax allows you to request data from a server and load it without having to refresh the entire page The data is often sent in a format called JavaScript Object Notation (or JSON). The ability to load new content into part of a page improves the user experience because the user does not have to wait for an entire page to load if only part of it is being updated.. You may have seen Ajax used on many websites, even if you were not aware that it was being used. Live search (or autocomplete) commonly uses Ajax. You may have seen it used on the Google website. When you type into the search bar on the home page, sometimes you will see results coming up before you have finished typing. If you are registering for a website, a script may check whether your username is available before you have completed the rest of the form. Page 161

10 Page 162

11 Creating XMLHttpRequest Object To work with AJAX we need to create an object called XMLHttpRequest. Because of the differences between browser implementations of XMLHttpRequest, you must create a special function in order to ensure that your code will work on all major browsers. To do this, you must understand the three ways of creating an XMLHttpRequest object: IE 5: request = new ActiveXObject("Microsoft.XMLHTTP") ; IE 6+: request = new ActiveXObject("Msxml2.XMLHTTP") ; All others: request = new XMLHttpRequest() ; The code given below will work for all major browsers. <script> function ajaxrequest() try // Non IE Browser var request = new XMLHttpRequest(); catch(e1) try // IE 6+ request = new ActiveXObject("Msxml2.XMLHTTP"); catch(e2) try // IE 5 request = new ActiveXObject("Microsoft.XMLHTTP"); catch(e3) // There is no AJAX support request = false return request; </script> Page 163

12 XMLHttpRequest Object's properties XMLHttpRequest Object's Methods Page 164

13 ajax1.txt This is how AJAX works!! ajax1.html <!DOCTYPE html> <html> <head> <title>simple AJAX Example</title> <script type="text/javascript" src="ajax1.js"></script> </head> <body onload="process()"></body> </html> ajax1.js var ajaxrequest = new XMLHttpRequest(); function process() ajaxrequest.open('get', 'ajax1.txt', true); ajaxrequest.onreadystatechange = handleserverresponse; ajaxrequest.send(null); function handleserverresponse() if(ajaxrequest.readystate == 1) document.write("server Connection Established <br>"); else if(ajaxrequest.readystate == 2) document.write("request Received by Server <br>"); else if(ajaxrequest.readystate == 3) document.write("server Processing Request <br>"); else if(ajaxrequest.readystate == 4) document. write("server ready with response <br>"); if(ajaxrequest. status == 200) document. write(ajaxrequest. responsetext); else document. write(ajaxrequest.status); else document. write("something went wrong"); Page 165 Copy protected with Online-PDF-No-Copy.com

CSC Web Technologies, Spring Web Data Exchange Formats

CSC Web Technologies, Spring Web Data Exchange Formats CSC 342 - Web Technologies, Spring 2017 Web Data Exchange Formats Web Data Exchange Data exchange is the process of transforming structured data from one format to another to facilitate data sharing between