Web-Engineering-Lec-14 (1) .pptx

Lecture Outline
 AJAX
 XML

AJAX
 AJAX = Asynchronous JavaScript and XML.
 Ajax is not a programming language or a tool, but a concept or
technique.
 AJAX is a technique for creating better, faster, and more interactive
web applications with the help of XML, HTML, CSS, and Java Script.
 Conventional web applications transmit information to and from
the server using synchronous requests.
 With AJAX, when you hit submit, JavaScript will make a request to
the server, interpret the results, and update the current screen. In
the purest sense, the user would never know that anything was
even transmitted to the server.

AJAX
 XML is commonly used as the format for receiving server data,
although any format, including plain text, can be used.
 AJAX is a web browser technology independent of web server
software.
 A user can continue to use the application while the client
program requests information from the server in the
background.

AJAX
 AJAX is based on the following open standards:
 Browser-based presentation using HTML and Cascading Style Sheets
(CSS)
 Behind-the-scenes data fetches using XMLHttpRequest objects in the
browser.
 JavaScript/DOM (to display/use the data).
 XMLHttpRequest (XHR) is an API available to web
browser scripting languages such as JavaScript. It is used to
send HTTP or HTTPS requests to a web server and load the
server response data back into the script.

AJAX
 There are 4 main benefits of using Ajax in web applications:
 Callbacks: Ajax is used to perform a callback, making a quick
round trip to and from the server to retrieve and/or save
data without posting the entire page back to the server. By
not performing a full postback and sending all form data to
the server, network utilization is minimized and quicker
operations occur.
 Making Asynchronous Calls: Ajax allows you to make
asynchronous calls to a web server. This allows the client
browser to avoid waiting for all data to arrive before
allowing the user to act once more.

AJAX
 Benefits of using Ajax in web applications (Cont.):
 User-Friendly: Because a page postback is being eliminated,
Ajax enabled applications will always be more responsive,
faster and more user-friendly.
 Increased Speed: The main purpose of Ajax is to improve
the speed, performance and usability of a web application.

AJAX
Google Suggest is using AJAX to create a very dynamic web
interface: When you start typing in Google's search box, a
JavaScript sends the letters off to a server and the server returns
a list of suggestions.

AJAX
 The keystone of AJAX is the XMLHttpRequest object.
 All modern browsers support the XMLHttpRequest object.
 The XMLHttpRequest object is used to exchange data with a
server behind the scenes. This means that it is possible to
update parts of a web page, without reloading the whole
page.
var xhttp = new XMLHttpRequest();

AJAX
 To send a request to a server, we use the open() and send()
methods of the XMLHttpRequest object.
xhttp.open("GET", “url", true);
xhttp.send();

AJAX
xhttp.open("GET", “url", true);
xhttp.send();

AJAX
 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.

AJAX
 A simple GET request.
 Above example may get a cached result. To avoid this, add a
unique ID to the URL:
 To send information with the GET method, add the
information to the URL:
xhttp.open("GET", “file_get_name.php", true);
xhttp.send();
xhttp.open("GET", “get_content.asp?t=" + Math.random()", true);
xhttp.send();
xhttp.open("GET", “update.asp?name=naveed&id=1", true
xhttp.send();

AJAX
 A simple POST request:
 To POST data like an HTML form, add an HTTP header with
setRequestHeader(). Specify the data you want to send in the
send() method
xhttp.open(" POST", “file_get_name.php", true);
xhttp.send();
xhttp.open("GET", “update.php ", true);
xhttp. setRequestHeader("Content-type", "application/x-www-form-urlencoded"
xhttp.send("fname=Henry&lname=Ford");

AJAX
 Asynchronous - True or False?
 For the XMLHttpRequest object to behave as AJAX, the async
parameter of the open() method has to be set to true.
 With AJAX asynchronous requests , the JavaScript does not
have to wait for the server response, but can instead:
 Execute other scripts while waiting for server response
 Deal with the response when the response ready
xhttp.open("GET", “file_get_name.asp", true);
xhttp.open("GET", “file_get_name.asp", false);

AJAX
 Async=true ,specify a function to execute when the response is
ready in the onreadystatechange event
 Async=false , JavaScript will NOT continue to execute, until the
server response is ready. If the server is busy or slow, the
application will hang or stop.
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
//Do Something using Javascript
}
};

AJAX
 AJAX - Server Response
 To get the response from a server, use the responseText or
responseXML property of the XMLHttpRequest object.

AJAX
 AJAX - The onreadystatechange Event
 The onreadystatechange event is triggered every time the
readyState changes.
 The readyState property holds the status of the
XMLHttpRequest.
xhttp.onreadystatechange = function() {
//Do Something using Javascript
}
};

AJAX
 AJAX - Callback function
 A callback function is a function passed as a parameter to
another function.
xhttp.onreadystatechange = function(cFunc) {
cFunc(xhttp);
}
};

XML
 XML = Extensible Markup Language.
 XML is a markup language that defines set of rules for
encoding documents in a format that is both human-readable
and machine-readable.
 Markup language is a set of symbols that can be placed in the
text of a document to separate and label the parts of that
document.
<message>
<text>Hello, world!</text>
</message>

XML
 Benefits of XML
 Open W3C standard
 Representation of data across heterogeneous environments
 Cross platform
 Allows for high degree of interoperability
 Strict rules
 Syntax
 Structure
 Case sensitive

XML
 Basic Components of XML Document
 Elements
Each element has a beginning and ending tag
<TAG_NAME>...</TAG_NAME>
Elements can be empty (<TAG_NAME />)
 Attributes
Describes an element; e.g. data type, data range, etc.
Can only appear on beginning tag

XML
 Basic Components of XML Document
 Processing instructions
Encoding specification (Unicode by default)
Namespace declaration
Schema declaration

XML
<?xml version=“1.0” ?>
<ROOT>
<ELEMENT1><SUBELEMENT1 /><SUBELEMENT2 /></ELEMENT1>
<ELEMENT2> </ELEMENT2>
<ELEMENT3 type=‘string’> </ELEMENT3>
<ELEMENT4 type=‘integer’ value=‘9.3’> </ELEMENT4>
</ROOT>
Xml Declaration
Elements
Elements with Attributes

XML
 Rules For Well-Formed XML
 There must be one, and only one, root element
 Sub-elements must be properly nested
A tag must end within the tag in which it was started
 Attributes are optional
Defined by an optional schema
 Attribute values must be enclosed in “” or ‘’
 Processing instructions are optional
 XML is case-sensitive
<tag> and <TAG> are not the same type of element

XML
 Well-Formed XML?
 No, CHILD2 and CHILD3 do not nested properly
<xml? Version=“1.0” ?>
<PARENT>
<CHILD1>This is element 1</CHILD1>
<CHILD2><CHILD3>Number 3</CHILD2></CHILD3>
</PARENT>

XML
 No, there are two root elements
<?xml Version=“1.0” ?>
<PARENT>
</PARENT>
<PARENT>
<CHILD1>This is another element 1</CHILD1>
</PARENT>

XML
 Yes
<xml? Version=“1.0” ?>
<PARENT>
<CHILD2> abc<CHILD2/>
<CHILD3>xyz</CHILD3>
</PARENT>

XML
<?xml version='1.0'?>
<bookstore>
<book>
<title>The Autobiography of Benjamin Franklin</title>
<author>
<first-name>Benjamin</first-name>
<last-name>Franklin</last-name>
</author>
<price>8.99</price>
</book>
<book>
<title>The Confidence Man</title>
<author>
<first-name>Herman</first-name>
<last-name>Melville</last-name>
</author>
<price>11.99</price>
</book>
</bookstore>

XML
 Complete XML document
<?xml version="1.0" encoding="UTF-8"?>
<contact-info>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</contact-info>

Reading XML Document
$xmlDoc = new DOMDocument();
$xmlDoc->load(‘filename.xml’);
$book = $xmlDoc->getElementsByTagName(“book");
foreach($book as $s){
foreach($s->childNodes as $item)
{
echo $item->nodeValue;
}
}

Web-Engineering-Lec-14 (1) .pptx

More Related Content

Similar to Web-Engineering-Lec-14 (1) .pptx (20)

More from iamayesha2526 (20)

Recently uploaded (20)

Web-Engineering-Lec-14 (1) .pptx