Internet and Web Technology (CLASS-7) [XML and AJAX] | NIC/NIELIT Web Technology

Ayes Chinmay
Internet
&
Web Technology
(XML and AJAX)

IWT Syllabus:
Module 3:
XML
Introduction to XML, XML vs HTML, Structures of a XML Document, Document Type Declaration (DTD),
XML Validation, Well Formed XML Documents, Valid XML Document, XML DOM, XSL, XSL ransformation,
XML Namespaces, XML Schema.
AJAX
AJAX Introduction, AJAX - The XMLHttpRequest Object, AJAX - Server Response, Ajax XML,
Ajax Database
jQuery
jQuery DOM Selectors, HTML Content, jQuery CSS Styles, jQuery HTML DOM
JSON
Introduction, syntax, Data Types, Parsing, Stringify, Object, Arrays
React.js
Introduction, ES6, Render HTML, JSX, Components , props, state, Lifecycle, Events, forms,
CSS

HTML vs XML:
No. HTML XML
1
HTML is used to display data and
focuses on how data looks.
XML is a software and hardware independent
tool used to transport and store data. It
focuses on what data is.
2 HTML is a markup language itself.
XML provides a framework to define markup
languages.
3 HTML is not case sensitive. XML is case sensitive.
4 HTML is a presentation language.
XML is neither a presentation language nor a
programming language.
5 HTML has its own predefined tags. You can define tags according to your need.
6
In HTML, it is not necessary to use a
closing tag.
XML makes it mandatory to use a closing tag.
7
HTML is static because it is used to
display data.
XML is dynamic because it is used to transport
data.
8 HTML does not preserve whitespaces. XML preserve whitespaces.

XML:
 XML (eXtensible Markup Language) is a mark up language.
 XML is designed to store and transport data.
 Xml was released in late 90’s. it was created to provide an easy to
use and store self describing data.
 XML became a W3C Recommendation on February 10, 1998.
 XML is not a replacement for HTML.
 XML is designed to be self-descriptive.
 XML is designed to carry data, not to display data.
 XML tags are not predefined. You must define your own tags.
 XML is platform independent and language independent.

Advantage XML:
1. Defining your own elements
2. Better organized documents
3. Sorting of database

XML DOM:
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
</book>
<book category="web">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
</book>
</bookstore>
<root>
<child>
<subchild>.....</subchild>
</child>
</root>

XML - Parsers:
 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.
 Modern day browsers have built-in XML parsers.

AJAX:
 Full Form of AJAX is Asynchronous JavaScript And XML.
 AJAX is not a programming language.
 AJAX just uses a combination of:
a) A browser built-in XMLHttpRequest object (to request data
from a web server)
b) JavaScript and HTML DOM (to display or use the data)

How AJAX works ?
1. An event occurs in a web page (the page is loaded, a button
is clicked)
2. An XMLHttpRequest object is created by JavaScript
3. The XMLHttpRequest object sends a request to a web
server
4. The server processes the request
5. The server sends a response back to the web page
6. The response is read by JavaScript
7. Proper action (like page update) is performed by JavaScript

XMLHttpRequest Object:
<!DOCTYPE html>
<html>
<body>
<h1>The XMLHttpRequest Object</h1>
<p id="demo">Let AJAX change this text.</p>
<button type="button"
onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", “test.txt", true);
xhttp.send();
}
</script>
</body>
</html>

Send a Request To a Server:
Method Description
open(method, url, async)
Specifies the type of request
method: the type of request: GET or POST
url: the server (file) location
async: true (asynchronous) or false (synchronous)
send() Sends the request to the server (used for GET)
send(string) Sends the request to the server (used for POST)

Server Response:
Property Description
onreadystatechange
Defines a function to be called when the readyState property
changes
readyState
Holds the status of the XMLHttpRequest.
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
status
200: "OK"
403: "Forbidden"
404: "Page not found"
statusText Returns the status-text (e.g. "OK" or "Not Found")

Model Questions:
1. XML uses
(a) user-defined tags. (b) pre-defined tags.
(c) extensible tags. (d) pairing tags.
2. The advantages of XML over HTML are:
A. It allows processing of data stored in Web pages.
B. It uses meaningful tags which aids in understanding the nature of a
document.
C. Is simpler than HTML.
D. It separates presentation and structure of document.
(a) A, B and C only (b) A, C and D only
(c) A, B and D only (d) B and D only

Model Questions: (Cont.)
3. What does XML stand for?
(a) Exclusive modern links
(b) Extensible markup language
(c) Extra memory links
(d) Exit markup language
4. To declare the version of XML, the correct syntax is.
(a) <?xml version=’1.0’/>
(b) <*xml version=’1.0’/>
(c) <?xml version="1.0"/>
(d) </xml version=’1.0’/>

Internet and Web Technology (CLASS-7) [XML and AJAX] | NIC/NIELIT Web Technology

More Related Content

What's hot (20)

Similar to Internet and Web Technology (CLASS-7) [XML and AJAX] | NIC/NIELIT Web Technology (20)

More from Ayes Chinmay (7)

Recently uploaded (20)

Internet and Web Technology (CLASS-7) [XML and AJAX] | NIC/NIELIT Web Technology