unit 2 1.pdf

Web Technologies Unit 2: HTML5, JQuery and Ajax XML Vs JSON XML Vs JSON JSON, XML, are Text-file formats that can be used to store structured data that can be handy for embedded and Web applications. XML (Extensible Markup Language) has been around fo...

Web Technologies Unit 2: HTML5, JQuery and Ajax XML Vs JSON XML Vs JSON JSON, XML, are Text-file formats that can be used to store structured data that can be handy for embedded and Web applications. XML (Extensible Markup Language) has been around for more than 3 decades now and it is an integral part of every web application. Be it a configuration file, mapping document or a schema definition, XML made life easier for data interchange by giving a clear structure to data and helping in dynamic configuration and loading of variables! JSON stores all of its data in a map format (key/value pairs) that was neat and easier to comprehend. JSON is said to be slowly replacing XML because of several benefits like ease of data modeling or mapping directly to domain objects, more predictability and easy to understand the structure. JSON is just a data format whereas XML is a markup language. Structure of XML vs JSON : Dept of CSE, PESU Page 1  Web Technologies Difference between XML and JSON: XML JSON (Extensible Markup Language) (JavaScript Object Notation) XML is a markup language, not a programming JSON is just a format written in JavaScript. language, that has tags to define elements. XML data is stored as a tree structure. Example – Data is stored like a map with key value pairs. Example – 2001 {“employees”: [ Varsha {"id":"2001", “name":"Varsha"}, 2002 {"id":"2002", "name":"Akash"} Akash ]} Dept of CSE, PESU Page 2  Web Technologies Can perform processing and formatting documents It does not do any processing or computation and objects. Bulky and slow in parsing, leading to slower data Very fast as the size of file is considerably small, transmission faster parsing by the JavaScript engine and hence faster transfer of data Supports namespaces, comments and metadata There is no provision for namespace, adding comments or writing metadata Document size is bulky and with big files, the tag Compact and easy to read, no redundant or empty structure makes it huge and complex to read. tags or data, making the file look simple. Doesn’t support array directly. To be able to use Supports array which can be accessed as – array, one has to add tags for each item. x = student.subjects[i]; science where “subjects” is an array as – maths “subjects”: [“science”, “math”, “computers”] computers Supports many complex data types including charts, JSON supports only strings, numbers, arrays Boolean images and other non-primitive data types. and object. Even object can only contain primitive types. XML supports UTF-8 and UTF-16 encodings. JSON supports UTF as well as ASCII encodings. Dept of CSE, PESU Page 3  Web Technologies XML structures are prone to some attacks as external JSON parsing is safe almost all the time except if entity expansion and DTD validation are enabled by JSONP is used, which can lead to Cross-Site Request default. When these are disabled, XML parsers are Forgery (CSRF) attack. safer. Though the X is AJAX stands for XML, because of As data is serially processed in JSON, using it with the tags in XML, a lot of bandwidth is unnecessarily AJAX ensures faster processing and hence consumed, making AJAX requests slow. preferable. Data can be easily manipulated using eval() method. XML Parser The XML DOM (Document Object Model) defines the properties and methods for accessing and editing XML. XML parser is a software library or a package that provides interface for client applications to work with XML documents. It checks for proper format of the XML document and may also validate the XML documents. XMLSerializer The XMLSerializer interface provides the serializeToString() method to construct an XML string representing a DOM tree. Eg – var s = new XMLSerializer(); var d = document; var str = s.serializeToString(d); saveXML(str); Example Dept of CSE, PESU Page 4  Web Technologies var text = ""+"John"+"Web"+""; //converts a DOM string to XML DOM structure var parser = new DOMParser(); var xmldoc = parser.parseFromString(text,"text/xml"); document.getElementById("demo").innerHTML = xmldoc.getElementsByTagName("name").childNodes.nodeValue; JSON JSON: JavaScript Object Notation. JSON is a syntax for storing and exchanging data. JSON is text, written with JavaScript object notation. JSON is a lightweight data-interchange format JSON is "self-describing" and easy to understand JSON is language independent JSON uses JavaScript syntax, but the JSON format is text only. Text can be read and used as a data format by any programming language. JSON NOTATION JSON data is written as name/value pairs. A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value. The values can be a string, number, an object(JSON object),an array, a Boolean, null. Dept of CSE, PESU Page 5  Web Technologies Eg- { "name": "John" } in JSON and { name: "John" } in JavaScript If you have data stored in a JavaScript object, you can convert the object into JSON, and send it to a server: var obj = { name: "John", age: 30, city: "New York" }; var myJSON = JSON.stringify(obj); document.getElementById("demo").innerHTML = myJSON; If you receive data in JSON format, you can convert it into a JavaScript object: var myJSON = '{ "name":"John", "age":31, "city":"New York" }'; var myObj = JSON.parse(myJSON); document.getElementById("demo").innerHTML = myObj.name; JSON vs XML formats Eg- employee details {"employees":[ { "firstName":"John", "lastName":"Doe" }, JSON { "firstName":"Anna", "lastName":"Smith" }, { "firstName":"Peter", "lastName":"Jones" } ]} Dept of CSE, PESU Page 6  Web Technologies XML John Doe Anna Smith Peter Jones Dept of CSE, PESU Page 7