Posted By
Bajarangi soft ,
Posted On 08-10-2020
Both JSON and XML can be used to receive data from a web server.
The following JSON and XML examples both define an employees object, with an array of 3 employees:
JSON Example
{"employees":[
{ "firstName":"John", "lastName":"Doe" },
{ "firstName":"Anna", "lastName":"Smith" },
{ "firstName":"Peter", "lastName":"Jones" }
]}
XML Example
<employees>
<employee>
<firstName>John</firstName> <lastName>Doe</lastName>
</employee>
<employee>
<firstName>Anna</firstName> <lastName>Smith</lastName>
</employee>
<employee>
<firstName>Peter</firstName> <lastName>Jones</lastName>
</employee>
</employees>
JSON is Like XML Because
Both JSON and XML are "self describing" (human readable)
Both JSON and XML are hierarchical (values within values)
Both JSON and XML can be parsed and used by lots of programming languages
Both JSON and XML can be fetched with an XMLHttpRequest
JSON is Unlike XML Because
JSON doesn't use end tag
JSON is shorter
JSON is quicker to read and write
JSON can use arrays
The biggest difference is:
XML has to be parsed with an XML parser. JSON can be parsed by a standard JavaScript function.
Why JSON is Better Than XML
XML is much more difficult to parse than JSON.
JSON is parsed into a ready-to-use JavaScript object.
For AJAX applications, JSON is faster and easier than XML:
Using XML
Using JSON
Complete Code For JSON In JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>What Is Difference Between JSON and XML With Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<br>
<div class="text-center">
<h1 id="color" style="color: tomato">What Is Difference Between JSON and XML With Example</h1>
</div>
<br>
<div class="well">
<h2 id="demo1"></h2>
</div>
<script>
var myObj, i, j, x = "";
myObj = {
"employees": [
{"firstName":"Ford", "lastName":["Doe", "Smith" ]},
{"firstName":"BMW", "lastName":["Jones", "S"]},
{"firstName":"Fiat", "lastName":["Doe", "Panda"] }
]
}
for (i in myObj.employees) {
x += "<h2>" + myObj.employees[i].firstName + "</h2>";
for (j in myObj.employees[i].lastName) {
x += myObj.employees[i].lastName[j] + "<br>";
}
}
document.getElementById("demo1").innerHTML = x;
</script>
</div>
</body>
</html>