0% found this document useful (0 votes)
25 views38 pages

Internet Technology-LEC 8

The document discusses XML, XQuery, and AJAX. It covers topics such as well-formed XML, DTDs, XML elements and attributes. It also discusses AJAX and how it uses XMLHttpRequest objects to request data from web servers and JavaScript to display the data. The document provides examples of XML, XQuery, and AJAX code.

Uploaded by

13576a8294
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
25 views38 pages

Internet Technology-LEC 8

The document discusses XML, XQuery, and AJAX. It covers topics such as well-formed XML, DTDs, XML elements and attributes. It also discusses AJAX and how it uses XMLHttpRequest objects to request data from web servers and JavaScript to display the data. The document provides examples of XML, XQuery, and AJAX code.

Uploaded by

13576a8294
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 38

Prof.

Mohammed Abdel Razek


Class 07

Summer 2020
By the end of this class, students will be able to:
Knowledge and Understanding Intellectual Skills
Learn XML XQuery, and AJAX
Run a simple code using XML XQuery, and AJAX
.
.

Professional and Practical Skills

Write simple code using XML , XQuery, and


AJAX

Prof. Mohammed Abdel Razek Internet Technology


3

Prof. Mohammed Abdel Razek Internet Technology


©1992-2012 by Pearson Education, Inc. All Rights Reserved. 4
©1992-2012 by Pearson Education, Inc. All Rights Reserved. 5
XML is a software independent tool for storing <note>
and transporting data. <to>Tove</to>
<from>Jani</from>
XML stands for eXtensible Markup Language <heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
XML was designed to be self-descriptive
</note>
XML does not DO anything. XML is just
information wrapped in tags

©1992-2012 by Pearson Education, Inc. All Rights Reserved. 6


XML and HTML were designed with different goals:
• XML was designed to carry data - with focus on what data is
• HTML was designed to display data - with focus on how data looks
• XML tags are not predefined like HTML tags are
• XML Does Not Use Predefined Tags, HTML uses

©1992-2012 by Pearson Education, Inc. All Rights Reserved. 7


• An XML document begins with an optional XML declaration, which identifies the document
as an XML document. The version attribute specifies the version of XML syntax used in
the document.
• XML comments begin with <!-- and end with -->
• An XML document contains text that represents its content (i.e., data) and elements that
specify its structure. XML documents delimit an element with start and end tags
• The root element of an XML document encompasses all its other elements
• XML element names can be of any length and can contain letters, digits, underscores,
hyphens and periods
• Must begin with either a letter or an underscore, and they should not begin with “xml” in any combination of uppercase and
lowercase letters, as this is reserved for use in the XML standards

8
• When a user loads an XML document in a browser, a parser parses the
document, and the browser uses a style sheet to format the data for
display
• Google Chrome places a down arrow and right arrow next to every
container element; they’re not part of the XML document.
• down arrow indicates that the browser is displaying the container element’s child
elements
• clicking the right arrow next to an element expands that element

©1992-2012 by Pearson Education, Inc. All Rights Reserved. 9


©1992-2012 by Pearson Education, Inc. All Rights Reserved. 10
©1992-2012 by Pearson Education, Inc. All Rights Reserved. 11
©1992-2012 by Pearson Education, Inc. All Rights Reserved. 12
©1992-2012 by Pearson Education, Inc. All Rights Reserved. 13
<!-- This is a comment -->

14
<?xml version="1.0" encoding="UTF-8"?>

The XML prolog is optional. If it exists, it must


come first in the document.
XML documents can contain international
characters, like Norwegian øæå or French êèé.
To avoid errors, you should specify the encoding
used, or save your XML files as UTF-8.

15
Some characters have a special meaning in XML.
If you place a character like "<" inside an XML
element, it will generate an error because the
parser interprets it as the start of a new element.

This will generate an XML error:

<message>salary < 1000</message>


To avoid this error, replace the "<" character with an entity reference:
<message>salary &lt; 1000</message>

16
&lt; < less than
&gt; > greater than
&amp; & ampersand
&apos; ' apostrophe
&quot; " quotation mark

17
©1992-2012 by Pearson Education, Inc. All Rights Reserved. 18
An XML element is everything from (including) the
element's start tag to (including) the element's
end tag

<price>29.99</price>

©1992-2012 by Pearson Education, Inc. All Rights Reserved. 19


XML elements can have attributes
Attributes are designed to contain data related to
a specific element.

Attribute values must always be quoted. Either


single or double quotes can be used.

<person gender="female"> <person gender='female'>

©1992-2012 by Pearson Education, Inc. All Rights Reserved. 20


<?xml version="1.0" encoding="UTF-8"?>
- <note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

©1992-2012 by Pearson Education, Inc. All Rights Reserved. 21


An XML document with correct syntax is called "Well Formed".
An XML document validated against a DTD is both "Well Formed" and
"Valid".

DTD stands for Document Type Definition.

A DTD defines the structure and the legal elements and attributes of an XML
document.

Valid XML Documents

22
23

Prof. Mohammed Abdel Razek Internet Technology


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

24
25
The keystone of AJAX is the XMLHttpRequest
object.

To send a request to a server, we use the open() xhttp.open("GET", "ajax_info.txt", true);


and send() methods of the XMLHttpRequest xhttp.send();
object:

©1992-2012 by Pearson Education, Inc. All Rights Reserved. Revised by Dr. T. Tran for CSI3140 26
GET or POST?
GET is simpler and faster than POST, and can be used in most cases.
However, always use POST requests when:

• A cached file is not an option (update a file or database on the


server).
• Sending a large amount of data to the server (POST has no
size limitations).
• Sending user input (which can contain unknown characters),
POST is more robust and secure than GET.

27
28
29
AJAX can be used for
interactive communication
with an XML file.

30
31
function showCustomer(str) {
var xhttp;
if (str == "") { When a user selects
document.getElementById("txtHint").innerH getcustomer.php a customer in the
TML = "";
return; dropdown list above,
} a function called
xhttp = new XMLHttpRequest(); <?php
xhttp.onreadystatechange = function() { $mysqli
"showCustomer()" is
if (this.readyState == 4 && this.status = = new mysqli("servername", "username", "password" executed.
= 200) { , "dbname");
document.getElementById("txtHint").innerH if($mysqli->connect_error) {
TML = this.responseText; exit('Could not connect');
} }
};
xhttp.open("GET", "getcustomer.php?q="+str, $sql = "SELECT customerid, companyname,
true); contactname, address, city, postalcode, country
xhttp.send(); FROM customers WHERE customerid = ?";
}

32
33
XQuery is designed to query XML data.

XQuery is a language for finding and extracting elements and attributes from XML documents.
"Select all CD records with a price less than $10 from the CD collection stored in cd_catalog.xml"

©1992-2012 by Pearson Education, Inc. All Rights Reserved. Revised by Dr. T. Tran for CSI3140 34
XQuery can be used to:
• Extract information to use in a Web Service
• Generate summary reports
• Transform XML data to XHTML
• Search Web documents for relevant information

FLWOR (pronounced "flower") is an acronym for "For, Let,


Where, Order by, Return".

©1992-2012 by Pearson Education, Inc. All Rights Reserved. Revised by Dr. T. Tran for CSI3140 35
selects all book elements under the bookstore
for $x in doc("books.xml")/bookstore/book element into a variable called $x.

where $x/price>30 selects only book elements with a price element


with a value greater than 30.
order by $x/title
Will be sort by the title element.
return $x/title
Here it returns the title elements.

©1992-2012 by Pearson Education, Inc. All Rights Reserved. Revised by Dr. T. Tran for CSI3140 36
XQuery + HTML HTML

<ul> <ul>
{ <li><title lang="en">Everyday
for $x in Italian</title></li>
doc("books.xml")/bookstore/book/title <li><title lang="en">Harry Potter</title></li>
order by $x <li><title lang="en">Learning XML</title></li>
return <li>{$x}</li> <li><title lang="en">XQuery Kick
} Start</title></li>
</ul> </ul>

•Everyday Italian
•Harry Potter
•Learning XML
•XQuery Kick Start
37
Browser
Mohammed Abdelrazek

Email:

[email protected]
[email protected]

You might also like