Enviar búsqueda
Cargar
JSON and XML
•
Descargar como PPTX, PDF
•
7 recomendaciones
•
3,495 vistas
People Strategists
Seguir
J&X
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 82
Descargar ahora
Recomendados
Unit 1-introduction to scripts
Unit 1-introduction to scripts
sana mateen
Ajax ppt
Ajax ppt
OECLIB Odisha Electronics Control Library
Namespaces in C#
Namespaces in C#
yogita kachve
Asp.net.
Asp.net.
Naveen Sihag
Javascript
Javascript
mussawir20
HTTP request and response
HTTP request and response
Sahil Agarwal
Java Streams
Java Streams
M Vishnuvardhan Reddy
Ajax
Ajax
Tech_MX
Recomendados
Unit 1-introduction to scripts
Unit 1-introduction to scripts
sana mateen
Ajax ppt
Ajax ppt
OECLIB Odisha Electronics Control Library
Namespaces in C#
Namespaces in C#
yogita kachve
Asp.net.
Asp.net.
Naveen Sihag
Javascript
Javascript
mussawir20
HTTP request and response
HTTP request and response
Sahil Agarwal
Java Streams
Java Streams
M Vishnuvardhan Reddy
Ajax
Ajax
Tech_MX
Advance Java Topics (J2EE)
Advance Java Topics (J2EE)
slire
Introduction to Node.js
Introduction to Node.js
Vikash Singh
JSON: The Basics
JSON: The Basics
Jeff Fox
JavaScript Object Notation (JSON)
JavaScript Object Notation (JSON)
BOSS Webtech
Jsp/Servlet
Jsp/Servlet
Sunil OS
Introduction to Spring Framework
Introduction to Spring Framework
Serhat Can
Dynamic HTML (DHTML)
Dynamic HTML (DHTML)
Himanshu Kumar
Basics of JavaScript
Basics of JavaScript
Bala Narayanan
Introduction to React JS
Introduction to React JS
Arno Lordkronos
Php forms
Php forms
Anne Lee
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
Edureka!
Java Course 8: I/O, Files and Streams
Java Course 8: I/O, Files and Streams
Anton Keks
Session tracking in servlets
Session tracking in servlets
vishal choudhary
Css Ppt
Css Ppt
Hema Prasanth
Javascript
Javascript
Manav Prasad
Servlets
Servlets
ZainabNoorGul
Crud tutorial en
Crud tutorial en
forkgrown
What Is Express JS?
What Is Express JS?
Simplilearn
Web forms in ASP.net
Web forms in ASP.net
Madhuri Kavade
Jsp ppt
Jsp ppt
Vikas Jagtap
Ajax for dummies, and not only.
Ajax for dummies, and not only.
Nerd Tzanetopoulos
Pracitcal AJAX
Pracitcal AJAX
jherr
Más contenido relacionado
La actualidad más candente
Advance Java Topics (J2EE)
Advance Java Topics (J2EE)
slire
Introduction to Node.js
Introduction to Node.js
Vikash Singh
JSON: The Basics
JSON: The Basics
Jeff Fox
JavaScript Object Notation (JSON)
JavaScript Object Notation (JSON)
BOSS Webtech
Jsp/Servlet
Jsp/Servlet
Sunil OS
Introduction to Spring Framework
Introduction to Spring Framework
Serhat Can
Dynamic HTML (DHTML)
Dynamic HTML (DHTML)
Himanshu Kumar
Basics of JavaScript
Basics of JavaScript
Bala Narayanan
Introduction to React JS
Introduction to React JS
Arno Lordkronos
Php forms
Php forms
Anne Lee
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
Edureka!
Java Course 8: I/O, Files and Streams
Java Course 8: I/O, Files and Streams
Anton Keks
Session tracking in servlets
Session tracking in servlets
vishal choudhary
Css Ppt
Css Ppt
Hema Prasanth
Javascript
Javascript
Manav Prasad
Servlets
Servlets
ZainabNoorGul
Crud tutorial en
Crud tutorial en
forkgrown
What Is Express JS?
What Is Express JS?
Simplilearn
Web forms in ASP.net
Web forms in ASP.net
Madhuri Kavade
Jsp ppt
Jsp ppt
Vikas Jagtap
La actualidad más candente
(20)
Advance Java Topics (J2EE)
Advance Java Topics (J2EE)
Introduction to Node.js
Introduction to Node.js
JSON: The Basics
JSON: The Basics
JavaScript Object Notation (JSON)
JavaScript Object Notation (JSON)
Jsp/Servlet
Jsp/Servlet
Introduction to Spring Framework
Introduction to Spring Framework
Dynamic HTML (DHTML)
Dynamic HTML (DHTML)
Basics of JavaScript
Basics of JavaScript
Introduction to React JS
Introduction to React JS
Php forms
Php forms
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
Java Course 8: I/O, Files and Streams
Java Course 8: I/O, Files and Streams
Session tracking in servlets
Session tracking in servlets
Css Ppt
Css Ppt
Javascript
Javascript
Servlets
Servlets
Crud tutorial en
Crud tutorial en
What Is Express JS?
What Is Express JS?
Web forms in ASP.net
Web forms in ASP.net
Jsp ppt
Jsp ppt
Similar a JSON and XML
Ajax for dummies, and not only.
Ajax for dummies, and not only.
Nerd Tzanetopoulos
Pracitcal AJAX
Pracitcal AJAX
jherr
jQuery - Chapter 5 - Ajax
jQuery - Chapter 5 - Ajax
WebStackAcademy
Ajax.ppt
Ajax.ppt
ssuser9d62d6
AJAX
AJAX
Gouthaman V
AJAX
AJAX
Gouthaman V
J query 01.07.2013.html
J query 01.07.2013.html
Rajasekharreddy Kadasani
J query 01.07.2013
J query 01.07.2013
Rajasekharreddy Kadasani
Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...
Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...
Ayes Chinmay
Building Applications Using Ajax
Building Applications Using Ajax
s_pradeep
Ajax Lecture Notes
Ajax Lecture Notes
Santhiya Grace
J query training
J query training
FIS - Fidelity Information Services
Ajax
Ajax
rahmed_sct
jQuery
jQuery
Ivano Malavolta
AJAX Workshop Notes
AJAX Workshop Notes
Pamela Fox
J query
J query
Ramakrishna kapa
Jqueryppt (1)
Jqueryppt (1)
AndreaSmile06
Jquery presentation
Jquery presentation
Mevin Mohan
Jdbc example program with access and MySql
Jdbc example program with access and MySql
kamal kotecha
Ajax and Jquery
Ajax and Jquery
People Strategists
Similar a JSON and XML
(20)
Ajax for dummies, and not only.
Ajax for dummies, and not only.
Pracitcal AJAX
Pracitcal AJAX
jQuery - Chapter 5 - Ajax
jQuery - Chapter 5 - Ajax
Ajax.ppt
Ajax.ppt
AJAX
AJAX
AJAX
AJAX
J query 01.07.2013.html
J query 01.07.2013.html
J query 01.07.2013
J query 01.07.2013
Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...
Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...
Building Applications Using Ajax
Building Applications Using Ajax
Ajax Lecture Notes
Ajax Lecture Notes
J query training
J query training
Ajax
Ajax
jQuery
jQuery
AJAX Workshop Notes
AJAX Workshop Notes
J query
J query
Jqueryppt (1)
Jqueryppt (1)
Jquery presentation
Jquery presentation
Jdbc example program with access and MySql
Jdbc example program with access and MySql
Ajax and Jquery
Ajax and Jquery
Más de People Strategists
MongoDB Session 3
MongoDB Session 3
People Strategists
MongoDB Session 2
MongoDB Session 2
People Strategists
MongoDB Session 1
MongoDB Session 1
People Strategists
Android - Day 1
Android - Day 1
People Strategists
Android - Day 2
Android - Day 2
People Strategists
Overview of web services
Overview of web services
People Strategists
Spring Framework - III
Spring Framework - III
People Strategists
Spring Framework-II
Spring Framework-II
People Strategists
Spring Framework -I
Spring Framework -I
People Strategists
Hibernate II
Hibernate II
People Strategists
Hibernate III
Hibernate III
People Strategists
Hibernate I
Hibernate I
People Strategists
Identifing Listeners and Filters
Identifing Listeners and Filters
People Strategists
Exploring Maven SVN GIT
Exploring Maven SVN GIT
People Strategists
Agile Dev. II
Agile Dev. II
People Strategists
Agile Dev. I
Agile Dev. I
People Strategists
Working with Servlets
Working with Servlets
People Strategists
Overview of JEE Technology
Overview of JEE Technology
People Strategists
JSP Technology II
JSP Technology II
People Strategists
JSP Technology I
JSP Technology I
People Strategists
Más de People Strategists
(20)
MongoDB Session 3
MongoDB Session 3
MongoDB Session 2
MongoDB Session 2
MongoDB Session 1
MongoDB Session 1
Android - Day 1
Android - Day 1
Android - Day 2
Android - Day 2
Overview of web services
Overview of web services
Spring Framework - III
Spring Framework - III
Spring Framework-II
Spring Framework-II
Spring Framework -I
Spring Framework -I
Hibernate II
Hibernate II
Hibernate III
Hibernate III
Hibernate I
Hibernate I
Identifing Listeners and Filters
Identifing Listeners and Filters
Exploring Maven SVN GIT
Exploring Maven SVN GIT
Agile Dev. II
Agile Dev. II
Agile Dev. I
Agile Dev. I
Working with Servlets
Working with Servlets
Overview of JEE Technology
Overview of JEE Technology
JSP Technology II
JSP Technology II
JSP Technology I
JSP Technology I
Último
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
rafiqahmad00786416
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
apidays
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
apidays
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Juan lago vázquez
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Zilliz
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
apidays
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
Sandro Moreira
Architecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
johnbeverley2021
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Deepika Singh
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
apidays
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
MIND CTI
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
Dropbox
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
Zilliz
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Orbitshub
Último
(20)
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
Architecting Cloud Native Applications
Architecting Cloud Native Applications
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
JSON and XML
1.
© People Strategists
www.peoplestrategists.com Slide 1 of 82 Working with JSON and XML
2.
© People Strategists
www.peoplestrategists.com Slide 2 of 82 In this session, you will learn to: Handle AJAX requests using jQuery Identify JSON Work with JSON Identify XML Identify DTD Validate XML using DTD Implement PCDATA Identify and work with namespaces Objectives
3.
© People Strategists
www.peoplestrategists.com Slide 3 of 82 Handling AJAX Requests using jQuery Can I use AJAX with jQuery so that I have to write less code and update parts of a Web page?
4.
© People Strategists
www.peoplestrategists.com Slide 4 of 82 jQuery library provides you with various methods, known as jQuery AJAX methods, that allow you to make a call to the AJAX code. These methods allow you to perform various tasks. Few of these tasks are given in the following list: Load data from an external file directly into a selected HTML element of you Web page. Request data in a specific format, such as text, XML, or JSON. The following list depicts the jQuery AJAX methods: load() get() post() ajax() Handling AJAX Requests using jQuery (Contd.)
5.
© People Strategists
www.peoplestrategists.com Slide 5 of 82 The load() method is used to load or fetch data from a Web server into a selected HTML element. The syntax to use the load() method is as follows: $(selector).load(URL[,data][,complete]) In the preceding syntax: URL: Is used to specify the URL from where you want to load the data. The URL can be used to refer to any resource, such as text file or html file. data: Is used to pass an object of a key/value pair along with the request to the server. complete: Is used to refer to a callback method that will be executed after the successful execution of load() method. The following code snippet depicts how to load content of the file “Test.txt” into a specific <div> element of an HTML Web page: $("#div1").load("Test.txt"); Handling AJAX Requests using jQuery (Contd.)
6.
© People Strategists
www.peoplestrategists.com Slide 6 of 82 The following code snippet depicts how to load content of an element with ID “para1” inside the file “Test.txt” into a specific <div> element of an HTML Web page: $("#div1").load("Test.txt #para1"); There might be situation when retrieving data from a URL resource fails. In such a scenario, you can use the following code snippet to display the status of the retrieval: Handling AJAX Requests using jQuery (Contd.) $("button").click(function(){ $("#div1").load(“Test.txt", function(responseTxt, statusTxt, xhr){ if(statusTxt == "success") alert("External content loaded successfully!"); if(statusTxt == "error") alert("Error: " + xhr.status + ": " + xhr.statusText); }); });
7.
© People Strategists
www.peoplestrategists.com Slide 7 of 82 The following code snippet load data from an external source and displays the AJAX call status: Handling AJAX Requests using jQuery (Contd.) <html> <head> <script src="https://ajax.googleapis. com/ajax/libs/jquery/1.11.3/jq uery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").load("Test.txt", function(responseTxt, statusTxt, xhr){ if(statusTxt == "success") alert("External Data Retrieved successfully!"); if(statusTxt == "error") alert("Error: " + xhr.status + ": " + xhr.statusText);});});}); </script> </head> <body> <div id="div1"><h2>The external content will be displayed here.</h2></div> <button>Load External Data</button> </body> </html> LoadAJAX.htm
8.
© People Strategists
www.peoplestrategists.com Slide 8 of 82 The following code depicts the data inside the “Test.txt” file: The following figures depict the outputs of the code snippet on the preceding slide. Handling AJAX Requests using jQuery (Contd.) <h2>Using load() AJAX method in jQuery</h2> <p id="p1">This is data from external resource.</p> Test.txt
9.
© People Strategists
www.peoplestrategists.com Slide 9 of 82 The get()method is used to load data from a Web server using the HTTP GET request. The syntax to use the get()method is as follows: $(selector).get(url[,data][, callback],[datatype]) In the preceding syntax: URL: Is used to specify the URL from where you want to load the data. The URL can be used to refer to any resource, such as text file or html file. data: Is used to pass an object of a key/value pair along with the request to the server. callback: Is used to refer to a callback method that will be executed after the successful execution of load() method. datatype: Is used to specify the type of data, such as text, JSON, or XML, that is expected in return from the server. Handling AJAX Requests using jQuery (Contd.)
10.
© People Strategists
www.peoplestrategists.com Slide 10 of 82 The following code snippet depicts how to use get() method to retrieve data from a web server: Handling AJAX Requests using jQuery (Contd.) $("button").click(function(){ $.get(“Test.aspx", function(data, status){ alert("Data: " + data + "n Status: " + status); }); });
11.
© People Strategists
www.peoplestrategists.com Slide 11 of 82 The post()method is: Similar to the get()method. Used to load data from a Web server using the HTTP POST request. Used when the requested is large in amount. Used to send the data in an encrypted format. The syntax to use the post()method is as follows: $(selector).post(url[,data][, callback],[datatype]) In the preceding syntax: URL: Is used to specify the URL from where you want to load the data. The URL can be used to refer to any resource, such as text file or html file. data: Is used to pass an object of a key/value pair along with the request to the server. callback: Is used to refer to a callback method that will be executed after the successful execution of load() method. datatype: Is used to specify the type of data, such as text, JSON, or XML, that is expected in return from the server. Handling AJAX Requests using jQuery (Contd.)
12.
© People Strategists
www.peoplestrategists.com Slide 12 of 82 The following code snippet depicts how to use post()method to retrieve data from a web server: Handling AJAX Requests using jQuery (Contd.) $("button").click(function(){ $.post(“LoginPage.aspx", { Uname: “User1", Pass: “password123" }, function(data, status){ alert("Data: " + data + "nStatus: " + status); }); });
13.
© People Strategists
www.peoplestrategists.com Slide 13 of 82 The ajax()jQuery method: Can be used to call the AJAX requests. Helps in partial-page updates. The syntax to use the ajax()method is as follows: $(selector).ajax(options) In the preceding syntax: options: Is an optional parameter that helps in configuring the AJAX calls by using key/value pairs. Handling AJAX Requests using jQuery (Contd.)
14.
© People Strategists
www.peoplestrategists.com Slide 14 of 82 The following table describes few of the important keys that can be specified as an option. Handling AJAX Requests using jQuery (Contd.) Option Description async A boolean value that indicates whether to execute the request asynchronously. complete A callback function that executes whenever the request finishes. datatype A string defining the type of data, such as XML, HTML, JSON, or script, that is expected back from the server. success A callback function that is executed if the request succeeds. type A string defining the HTTP method to be used for the request (GET or POST). URL A required option that refers to the string containing the URL to which the request is sent.
15.
© People Strategists
www.peoplestrategists.com Slide 15 of 82 The following code snippet depicts how to use ajax()method to retrieve data from a web server: Handling AJAX Requests using jQuery (Contd.) <html> <head> <title>The jQuery Example</title> <script src="https://ajax.googleapis.com /ajax/libs/jquery/1.11.3/jquery. min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#btn").click(function(event){ $.ajax( { url:'Test.txt', type:'GET', success:function(data) { $('#ContentArea').html(data);} });});}); </script> </head> <body> <p>Click here to load Test.txt file:</p> <div id="ContentArea" style="background-color: cyan;"> Content Area </div> <input type="button" id="btn" value="Load Data"/> </body> </html> AJAXMethod.htm
16.
© People Strategists
www.peoplestrategists.com Slide 16 of 82 The following code depicts the data inside the “Test.txt” file: The following figures depict the outputs of the code snippet on the preceding slide. Handling AJAX Requests using jQuery (Contd.) <h2>Using ajax() AJAX method in jQuery</h2> <p id="p1">This is data from external resource.</p> Test.txt
17.
© People Strategists
www.peoplestrategists.com Slide 17 of 82 Identifying JSON Is there any other easier and faster way to transfer data other than XML?
18.
© People Strategists
www.peoplestrategists.com Slide 18 of 82 JavaScript Object Notation (JSON): Is an open standard light-weight format that is used to store and exchange data. Is an easier and faster alternative to XML. Is language independent format that uses human readable text to transmit data objects. Consists of objects of name/value pairs. Files have the extension .json. Syntactically, JSON is similar to the code for creating JavaScript objects. Due to this similarity, standard JavaScript methods can be used to convert JSON data into JavaScript objects. The following code snippet depicts an example of JSON: {"fName":"Ronald", "lName":"Smith", "Contact":"121 12345"} Identifying JSON (Contd.)
19.
© People Strategists
www.peoplestrategists.com Slide 19 of 82 The following list depicts the similarities between JSON syntax and code for JavaScript object: JSON uses name/value pairs to store data. Commas are used to separate multiple data values. Objects are enclosed within curly braces. Square brackets are used to store arrays. The following code depicts how to create name/value pairs: "Name":"Value" JSON keys must be enclosed within double quotes. JSON Syntax
20.
© People Strategists
www.peoplestrategists.com Slide 20 of 82 The following code snippet depicts storing different types of values using JSON name/value pairs: A JSON object can include the following types of values: A numeric value A string A boolean value An array An object A null value JSON Values "fName": "Jane" Storing string value "lName": "Doe" Storing string value "isAlive": true Storing boolean value "age": 23 Storing integer value "children": [] Storing an array "spouse": null Storing null
21.
© People Strategists
www.peoplestrategists.com Slide 21 of 82 JSON objects are enclosed within curly braces. Similar to JavaScript objects, JSON objects can be used to store multiple name/value pairs. The following code snippet depicts storing data in a JSON object: JSON Objects { "fName": "Jane", "lName": "Doe", "isAlive": true, "age": 23, "children": [], "spouse": null }
22.
© People Strategists
www.peoplestrategists.com Slide 22 of 82 JSON arrays can be created by using square brackets, as shown in the following code snippet: Since JSON uses the same syntax as that of JavaScript objects, JSON arrays can be accessed in the same way as in JavaScript. JSON Arrays { "fName": "Jane", "lName": "Doe", "isAlive": true, "age": 23, "ContactNumber":[ {"type":"Mobile", "Number":"+9198765" } {"type":"Office", "Number":"+9124456" } ] "children": [], "spouse": null }
23.
© People Strategists
www.peoplestrategists.com Slide 23 of 82 The following figure depicts similarities and dissimilarities between JSON and XML: JSON vs. XML Similarities Dissimilarities Both are human-readable, that is, self-describing. Both represent hierarchical structure, that is, values within values. Both can be accessed and parsed by almost every programming language. Both can be accessed and fetched with an XMLHttpRequest object. XML needs an XML parser, whereas, a standard JavaScript method can be used to parse JSON. There is no need of end tag in JSON. JSON is much shorter as compared to XML. It is easy to read and write JSON. JSON can be used with arrays.
24.
© People Strategists
www.peoplestrategists.com Slide 24 of 82 The following code snippet depicts a JSON example that defines a student object containing an array of records of two students: The following code snippet depicts an XML example that defines a student object containing records of two students: JSON vs XML (Contd.) {"students":[ {"fName":"Jenny", "lName":"Watson"}, {"fName":"Dean", "lName":"Smith"} ]} <students> <student> <fName>Jenny</fName> <lName>Watson</lName> </student> <student> <fName>Dean</fName> <lName>Smith</lName> </student> </students>
25.
© People Strategists
www.peoplestrategists.com Slide 25 of 82 A most common usage of JSON objects is to read/fetch data from a Web server in JSON format, and display it on an HTML Web page. To read data from a JSON object, you can use the JSON.parse()method provided by JavaScript. The syntax for JSON.parse() method is as follows: var obj = JSON.parse(text); The following code snippet depicts how to use the JSON.parse()method: Reading Data From JSON var jsonData = '{"fName": "Jane", "lName": "Doe", "isAlive": true, "age": 23}'; var contact = JSON.parse(jsonData); document.write(contact.lName+", "+contact.fName);
26.
© People Strategists
www.peoplestrategists.com Slide 26 of 82 The following code snippet depicts how to read data using JSON.parse() method: Reading Data From JSON (Contd.) <html> <body> <h2>Reading JSON Object using JavaScript</h2> <p id="pData"></p> <script> var jsonData = '{"fName": "Jane", "lName": "Doe", "isAlive": true, "age": 23}'; var contact = JSON.parse(jsonData); document.getElementById("pData"). innerHTML = contact.fName + "<br>" + contact.lName + "<br>" + contact.age; </script> </body> </html>
27.
© People Strategists
www.peoplestrategists.com Slide 27 of 82 JavaScript provides you the JSON.stringify()method that allows you to convert JavaScript value to a JSON string. The syntax for JSON.stringify()method is as follows: var obj = JSON.stringify(value); The following code snippet depicts how to convert JavaScript value into JSON text/string using the JSON.stringify()method: Creating JSON Text From JavaScript var obj = new Object(); obj.fname = "John"; obj.lname = "Doe"; jsonText = JSON.stringify(obj); document.write(jsonText); //Output will be {"fname":"John","lname":"Doe"}
28.
© People Strategists
www.peoplestrategists.com Slide 28 of 82 The following code snippet depicts how to convert JavaScript value into JSON text/string using the JSON.stringify()method: Reading Data From JSON (Contd.) <html> <body> <h2>Reading JSON Object using JavaScript</h2> <p id="pData"></p> <script> var Students = new Array(); Students[0] = "John Doe"; Students[1] = "Jane Smith"; var jsonText = JSON.stringify(Students); document.getElementById("pData"). innerHTML = jsonText; </script> </body> </html>
29.
© People Strategists
www.peoplestrategists.com Slide 29 of 82 Introduction to XML Consider a scenario where you need to exchange data in different formats.
30.
© People Strategists
www.peoplestrategists.com Slide 30 of 82 Introduction to XML (Contd.)
31.
© People Strategists
www.peoplestrategists.com Slide 31 of 82 XML: Stands for Extensive Markup Language. As its name suggests, it has following basic characteristics: Extensible: It is an extensible language that allows programmers to define their own tags. Markup: It is based on markup tags similar to HTML tags. Language: It is similar language to HTML. In addition, offers more flexibility and power to programmers to describe data. Introduction to XML (Contd.)
32.
© People Strategists
www.peoplestrategists.com Slide 32 of 82 XML: Is a self-describing language. Is recommended by W3C for information exchange over the Internet. Tags are not pre-defined, to use it, you need to define your own tags. Is a software and hardware independent language. Enables programmers to store data in a well-formed structure. Transfers data between various heterogeneous systems over the network. Introduction to XML (Contd.)
33.
© People Strategists
www.peoplestrategists.com Slide 33 of 82 Introduction to XML (Contd.) C# Application Java Application SQL Server Database DB2 Database Oracle Database Web Services XML The following figure depicts how data is exchanged to heterogeneous environment using XML:
34.
© People Strategists
www.peoplestrategists.com Slide 34 of 82 Some common advantages of XML are: Extensible: It is an extensible language that allows programmers to define their own tags based on the specific requirements. Data Interchange: It allows programmers to store data in textual format that can be used as a standard to interchange data. Smart Searches: It allows programmers to specify whether they want to search information based on text or tags, and returns the information that matches the search criteria. Fast Updates: Use of XML allows offers fast update of information, as only text needs to be updated. CSS and XSL Support: XML supports CSS (Cascading Style Sheet) and (Extensible Style Sheet) languages that can be used to apply required formatting of an XML document. Data Transformation: As per requirements, data can be stored in the form of text, object, or data in a database. The stored data can be extracted by the client application in the required format. Advantages of XML
35.
© People Strategists
www.peoplestrategists.com Slide 35 of 82 Separate Content/Presentation: XML defines the meaning of data. The representation of data can be controlled with the help of CSS and XSL languages. New Languages: XML can be also used to develop new languages. Some languages that are derived from XML are: XHTML WSDL SMIL RSS Advantages of XML (Contd.)
36.
© People Strategists
www.peoplestrategists.com Slide 36 of 82 Creating Well-Formed XML How can I create my own XML document?
37.
© People Strategists
www.peoplestrategists.com Slide 37 of 82 XML is used to represent data in a well-formed structure. It provides you various components that you can use to define the structure of data. Creating Well-formed XML (Contd.) ComponentsofXML Processing Instruction Tags Elements Content Attributes Entities Comments
38.
© People Strategists
www.peoplestrategists.com Slide 38 of 82 Processing Instruction (PI): Specifies how an XML document is processed. Is included in an XML document by adding the following line of code at the starting of the file: Creating Well-Formed XML (Contd.) <?xml version="1.0" encoding="UTF-8"?>
39.
© People Strategists
www.peoplestrategists.com Slide 39 of 82 Tags: Specify the name of information presented in an XML document. Must have opening (<>) and closing (</>) brackets that encloses the name of the tag. For example: Creating Well-formed XML (Contd.) <first_name>Allen</first_name> Tags Tags
40.
© People Strategists
www.peoplestrategists.com Slide 40 of 82 Elements: Are the basic building blocks of XML. Are represented with the help of tags. Are used to describe data in an XML document. Can contains one or more elements. That contain child elements are known as root element. For example: Creating Well-formed XML (Contd.) <name> <first_name>Allen</first_name> <last_name>Thomas</last_name> </name> Root Element Child Elements
41.
© People Strategists
www.peoplestrategists.com Slide 41 of 82 Content: Refers the information represented by the elements. Can be categories into following types: Character Content Element Content Mixed Content For example: Creating Well-Formed XML (Contd.) <name> The name of person is: <first_name>Allen</first_name> <last_name>Thomas</last_name> </name> Character Content Element Content Element Content
42.
© People Strategists
www.peoplestrategists.com Slide 42 of 82 Attributes: Allow programmers to provide additional information about the elements. Are created in the form of name-value pair. For example: Creating Well-formed XML (Contd.) <emp emp_id="001"> <first_name>Allen</first_name> <last_name>Thomas</last_name> </emp>
43.
© People Strategists
www.peoplestrategists.com Slide 43 of 82 Entity: Allows the insertion of special characters in XML documents. For example, the < entity inserts a literal < character into a document. Supports the following in-build entities: < > "e; & Creating Well-formed XML (Contd.)
44.
© People Strategists
www.peoplestrategists.com Slide 44 of 82 Comments: Are used to explain the purpose of XML markup. Are not evaluated by the XML parser. Are enclosed within <!..- -> symbols. For example: Creating Well-formed XML (Contd.) <emp emp_id="001"> <first_name>Allen</first_name> <last_name>Thomas</last_name> </emp> <!--emp element has two child elements-->
45.
© People Strategists
www.peoplestrategists.com Slide 45 of 82 Creating Well-formed XML (Contd.) <?xml version="1.0" encoding="utf-8"?> <employee emp_id="001"> <!--employee is the root element--> <name> The name of employee is: <firstname>John</firstname> <lastname>Smith</lastname> </name> </employee> The following code depicts the output well-formed XML document:
46.
© People Strategists
www.peoplestrategists.com Slide 46 of 82 DTD Stands for Document Type Definition. Is used to define the structure and the valid elements and attributes of an XML document. Verifies the data in an XML document. Can be used to verify data of a local file or data received over the network. Can be declared as of the following two types: Specifying Rules Using DTD DTD Declaration Internal External
47.
© People Strategists
www.peoplestrategists.com Slide 47 of 82 Internal DTD Declaration: Is declared inside the XML file. Must be enclosed inside the <!DOCTYPE> definition, as: In the preceding code snippet: !DOCTYPE name: Specifies that the name is the root element of this document. <!ELEMENT name(first_name, last_name): Specifies that the name element must has two elements, first_name and last_name. <!ELEMENT first_name: Specifies the first_name element to be of type PCDATA. <!ELEMENT last_name: Specifies the last_name element to be of type PCDATA. Specifying Rules Using DTD (Contd.) <?xml version="1.0"?> <!DOCTYPE name [ <!ELEMENT name (first_name, last_name)> <!ELEMENT first_name (#PCDATA)> <!ELEMENT last_name (#PCDATA)> ]>
48.
© People Strategists
www.peoplestrategists.com Slide 48 of 82 External DTD Declaration: Is declared outside the XML file. References of the DTD file must be included in the <!DOCTYPE> definition. For example: Specifying Rules Using DTD (Contd.) <?xml version="1.0"?> <!DOCTYPE name SYSTEM "name.dtd"> <name> <first_name>John</first_name > <first_name>Thomas</first_na me> </name> <!ELEMENT name (first_name, last_name)> <!ELEMENT first_name (#PCDATA)> <!ELEMENT last_name (#PCDATA)> name.dtd name.xml
49.
© People Strategists
www.peoplestrategists.com Slide 49 of 82 An XML that has correct syntax is known as a well-formed document. An XML document that is validated against a DTD is a well-formed as well as a valid document. A valid XML document refers to a well-formed (has correct syntax) and follows all rules specified in a DTD. A DTD is used to define the structure of an XML document in the form of a list of valid elements, as shown in the following code snippet: Creating Valid XML Using DTD <!DOCTYPE name [ <!ELEMENT name (first_name, last_name)> <!ELEMENT first_name(#PCDATA)> <!ELEMENT last_name(#PCDATA)> ]> name.dtd
50.
© People Strategists
www.peoplestrategists.com Slide 50 of 82 The DTD definition given in the previous slide is interpreted as follows: !DOCTYPE name defines that the root element of the document is note !ELEMENT name defines that the note element must contain two elements: first_name and last_name !ELEMENT first_name defines the first_name element is to be of type PCDATA !ELEMENT last_name defines the last_name element to be of type PCDATA When the specified DTD document is referenced in an XML document, the document must follow the rules specified in DTD. Creating Valid XML Using DTD (Contd.)
51.
© People Strategists
www.peoplestrategists.com Slide 51 of 82 You can declare elements by using the ELEMENT declaration. In a DTD, you can declare the following type of elements: Empty Elements Elements with Parsed Character Data Elements with any Contents Elements with Children Declaring Only One Occurrence of an Element Declaring Minimum One Occurrence of an Element Declaring Zero or More Occurrences of an Element Declaring Zero or One Occurrences of an Element Declaring either/or Content Declaring Mixed Content The general syntax of declaring a DTD is shown in the following syntax: Element Declaration <!ELEMENT element-name category>
52.
© People Strategists
www.peoplestrategists.com Slide 52 of 82 Empty Elements: Are declared with the Empty keyword. Syntax: Example: The syntax of declaring an element is shown in the following code snippet: Element Declaration (Contd.) <!ELEMENT element-name category> <!ELEMENT p EMPTY>
53.
© People Strategists
www.peoplestrategists.com Slide 53 of 82 Elements with Parsed Character Data: Are declared with #PCDATA inside parentheses. Syntax: Example: Element Declaration (Contd.) <!ELEMENT element-name (#PCDATA)> <!ELEMENT from (#PCDATA)>
54.
© People Strategists
www.peoplestrategists.com Slide 54 of 82 Elements with any Contents: Are declared with the ANY keyword inside parentheses. Can contain any kind of allowed XML data. Syntax: Example: Element Declaration (Contd.) <!ELEMENT element-name ANY> <!ELEMENT note ANY>
55.
© People Strategists
www.peoplestrategists.com Slide 55 of 82 Elements with Children: Are declared with name of one or more children inside the parentheses. Syntax: Example: Element Declaration (Contd.) <!ELEMENT element-name(child1, child2,...)> <!ELEMENT name(first_name, middle_name, last_name)>
56.
© People Strategists
www.peoplestrategists.com Slide 56 of 82 Only One Occurrence of an Element Is used to declare an element such that the child element must occur once and only once inside the root element. Example: Element Declaration (Contd.) <!ELEMENT element-name (child-name)> <!ELEMENT name(full_name)>
57.
© People Strategists
www.peoplestrategists.com Slide 57 of 82 Minimum One Occurrence of an Element: Is declared with the plus (+) sign. Syntax: Example: Element Declaration (Contd.) <!ELEMENT element-name (child-name+)> <!ELEMENT contacts (mobile_number+)>
58.
© People Strategists
www.peoplestrategists.com Slide 58 of 82 Zero or More Occurrences of an Element: Is declared with the asterisk (*) symbol. Syntax: Example: Element Declaration (Contd.) <!ELEMENT element-name (child-name*)> <!ELEMENT note (email_id*)>
59.
© People Strategists
www.peoplestrategists.com Slide 59 of 82 Zero or One Occurrences of an Element: Is declared with the question mark (?) symbol. Syntax: Example: Element Declaration (Contd.) <!ELEMENT element-name (child-name?)> <!ELEMENT note (email_id?)>
60.
© People Strategists
www.peoplestrategists.com Slide 60 of 82 Either/or Content: Is declared with the pipe (|) symbol. Syntax: Example: Element Declaration (Contd.) <!ELEMENT note (child1|child2)> <!ELEMENT note (email_id|mobie_number)>
61.
© People Strategists
www.peoplestrategists.com Slide 61 of 82 Mixed Content: Is declared with the pipe (|) and asterisk (*) symbols. Syntax: Example: Element Declaration (Contd.) <!ELEMENT contacts(#PCDATA|child1|child2|child3)*> <!ELEMENT contacts(email_id|mobie_number|address)*>
62.
© People Strategists
www.peoplestrategists.com Slide 62 of 82 PCDATA refers to the parsed character data. It is generally rep[resents the character data in the form of text that is found between the start tag and the end tag of an XML element. The text of PCDATA is parsed by a parser. The XML parser examines the PCDATD text to find entities and markup. Tags found inside the PCDATA text are treated as markup. Entities found inside the PCDATA are explained to their specific meaning. The PCDATD should not include &, <, or > characters. You can include these characters by using the &, <, and > entities. Use of PCDATA
63.
© People Strategists
www.peoplestrategists.com Slide 63 of 82 You can declare attributes with an ATTLIST declaration. To declare an attribute in DTD, you can use the following code snippet: Example: XML Example: Attribute Declaration in DTD <!ATTLIST element-name attribute-name attribute-type attribute-value> <!ATTLIST employee id CDATA "011"> <employee radius="011" />
64.
© People Strategists
www.peoplestrategists.com Slide 64 of 82 While declaring an attribute in DTD, you can use one of the following values for attribute-type. Attribute Types Type Description CDATA Specifies that the value is character type. (en1|en2|..) Specifies that the value must be from an enumerated list. ID Specifies that the value is unique ID. IDREF Specifies that the value is the ID of another element. NMTOKEN Specifies that the value is a valid XML name. NMTOKENS Specifies that the value is a list of valid XML names. ENTITY Specifies that the value is an entity. ENTITIES Specifies that the value is an list entities. NOTATION Specifies that the value is the name of notation xml: Specifies that the value is the pre-defined XML value.
65.
© People Strategists
www.peoplestrategists.com Slide 65 of 82 In DTD, you can declare attribute values with one of the following types: Fixed, Default and Optional Types Default REQUIRED IMPLIED FIXED
66.
© People Strategists
www.peoplestrategists.com Slide 66 of 82 Attribute with Default Value: In DTD, you can declare an attribute with a default value. If no value is specified for that attribute, the default value is automatically assigned. For example: In the preceding example, if the value of radius attribute is not provided, the default value, 0, is assigned. Fixed, Default, and Optional Types (Contd.) DTD Declaration: <!ELEMENT circle EMPTY> <!ATTLIST circle radius CDATA "0"> XML Markup: <circle radius="10" />
67.
© People Strategists
www.peoplestrategists.com Slide 67 of 82 Attribute with #REQUIRED Keyword: Is used to force the users to provide the value of the attribute. For example: Fixed, Default and Optional Types (Contd.) DTD Declaration: <!ATTLIST employee contact CDATA #REQUIRED> Valid XML Markup: <employee contact="897897676" /> Invalid XML Markup: <employee />
68.
© People Strategists
www.peoplestrategists.com Slide 68 of 82 Attribute with #IMPLIED Keyword: Is used to when the attribute is optional and does not have an default value. For example: In the preceding code snippet, the contact attribute is optional. The user is not forced to provide the value of the attribute. Fixed, Default and Optional Types (Contd.) DTD Declaration: <!ATTLIST employee contact CDATA #IMPLIED> Valid XML Markup: <employee contact="897897676" /> Valid XML Markup: <employee />
69.
© People Strategists
www.peoplestrategists.com Slide 69 of 82 Attribute with #FIXED Keyword: Is used to provide a fixed value to the attribute. The value cannot be changed in the XML document. For example: Fixed, Default and Optional Types (Contd.) DTD Declaration: <!ATTLIST number base CDATA #FIXED "decimal" > Valid XML Markup: <number base="decimal" /> Invalid XML Markup: <number base="binary" />
70.
© People Strategists
www.peoplestrategists.com Slide 70 of 82 Namespaces What is a namespace in XML?
71.
© People Strategists
www.peoplestrategists.com Slide 71 of 82 A namespace can be considered as a virtual space that is identified by a Uniform Resource Identifier (URI). It is represented in the form of a string that uniquely identifies the elements and attributes from different schemas, as shown in the following figure. Namespaces (Contd.) schema1.xsd www.myschema.com/schema1 Namespace URI
72.
© People Strategists
www.peoplestrategists.com Slide 72 of 82 Namespace URI: Is not a Web URI. does not locate a resource on the Internet. Does not actually point to a resource on the Internet. Is a unique identifier that resolves conflicts between elements having same name. Declaring a Namespace: You can declare an namespace with the help of xmlns keyword, as shown in the following code snippet: In the preceding code snippet, URI is the namespace name, and prefix is the alias of the namespace. Namespaces (Contd.) xmlns:prefix="URI"
73.
© People Strategists
www.peoplestrategists.com Slide 73 of 82 In XML, you can declare namespaces by using the following two methods. Namespaces (Contd.) Declaring a Namespace Default Explicit
74.
© People Strategists
www.peoplestrategists.com Slide 74 of 82 Default Declaration: Allows programmers to declare a default namespace for a document. Does not require a prefix name. For Example: Namespaces (Contd.) <schema xmlns="http://myxmlschema.com/XMLSchema"> ... ... </schema>
75.
© People Strategists
www.peoplestrategists.com Slide 75 of 82 Explicit Declaration: Requires the use of a prefix with the xmlns keyword. Is used to define an XML schema that uses elements and attributes defined in one or more namespaces. For Example: In the preceding code snippet, xsd is the prefix for the namespace URI. Namespaces (Contd.) <xsd:schema xmlns:xsd="http://myxmlschema.com/XMLSchema"> ... ... </schema>
76.
© People Strategists
www.peoplestrategists.com Slide 76 of 82 In XML, namespaces are used to avoid conflict between the elements having same name. To define the structure of an elements XML schema (XSD) files are used. An XML document can have the references of multiple schema files. In this situation, if an element is defined in two or more schemas with the same name, the conflict of definition may occur. Why Namespaces?
77.
© People Strategists
www.peoplestrategists.com Slide 77 of 82 For example: Schema 1 contains the Name element that defines the name of a product. Schema 2 contains the Name element that defines the name of a customer. Schema 1 and Schema 2 are used in Schema 3. Now the conflict between the definition of Name element may occur because it is defined in Schema 1 and Schema 2 both. To avoid such situations, namespaces are used. Why Namespaces (Contd.)? Schema 1 Schema 2Schema 3 Name Name
78.
© People Strategists
www.peoplestrategists.com Slide 78 of 82 What are the Advantages of Using XML Schema Over DTD XML schemas follow a universal standard that made data communication over the Internet safe. For example, a date like: "01-07-2015" can be interpreted as 7 January in some countries, whereas in other countries as 1 July. However, an XML element accepts date in the fixed format "YYYY- MM-DD" to ensure its correct interpretation. XML schemas support data types that allow programmers to: Specify the acceptable content in the document Ensure the validity of data Work with databases Apply restrictions on data Specify data formats Convert data from one data type to another
79.
© People Strategists
www.peoplestrategists.com Slide 79 of 82 What are the Advantages of Using XML Schema Over (Contd.) You can define number and order of child elements using XML schemas, but not with DTDs. XML schemas support namespaces, whereas DTDs do not support namespaces. XML schemas can be also extended, therefore, you can: Reuse an XML schema in other schemas. Drive your own data types from the standard types. Add the reference of multiple schemas in a single XML document.
80.
© People Strategists
www.peoplestrategists.com Slide 80 of 82 In this session, you have learned that: jQuery library provides you with various methods, known as jQuery AJAX methods, that allow you to make a call to the AJAX code. The load() method is used to load or fetch data from a Web server into a selected HTML element. The get() method is used to load data from a Web server using the HTTP GET request. The post() method is used to load data from a Web server using the HTTP POST request. The ajax() jQuery method can be used to call the AJAX requests and helps in partial-page updates. JSON is an open standard light-weight format that is used to store and exchange data. Syntactically, JSON is similar to the code for creating JavaScript objects. To read data from a JSON object, you can use the JSON.parse() method provided by JavaScript. Summary
81.
© People Strategists
www.peoplestrategists.com Slide 81 of 82 To read data from a JSON object, you can use the JSON.parse() method provided by JavaScript. JavaScript provides you the JSON.stringify() method that allows you to convert JavaScript value to a JSON string. XML stands for Extensive Markup Language. XML is a self-describing language. XML is recommended by W3C for information exchange over the Internet. XML transfers data between various heterogeneous systems over the network. DTD can be declared as: Internal External PCDATA refers to the parsed character data. Summary (Contd.)
82.
© People Strategists
www.peoplestrategists.com Slide 82 of 82 A namespace can be considered as a virtual space that is identified by a Uniform Resource Identifier (URI). XML schemas follow a universal standard that made data communication over the Internet safe. XML schemas support namespaces, whereas DTDs do not support namespaces. Summary (Contd.)
Descargar ahora