Scribd
Upload
17 views19 pages

WP Ch6

Uploaded by

Abiyu Emu
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
17 views19 pages

WP Ch6

Uploaded by

Abiyu Emu
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/ 19

Chapter 6: Advanced

JavaScript and XML

Web Programming
1
BY:- Jibril H.
• AJAX is a developer's dream, because you can:
Read data from a web server - after the page has loaded
Update a web page without reloading the page
Send data to a web server - in the background
AJAX = Asynchronous JavaScript And XML.
AJAX is not a programming language.

AJAX Introduction 2
BY:- Jibril H.
• 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)
• AJAX is a misleading name. AJAX applications might use XML to transport
data, but it is equally common to transport data as plain text or JSON text.
• AJAX allows web pages to be updated asynchronously by exchanging data
with a web server behind the scenes. This means that it is possible to update
parts of a web page, without reloading the whole page.

Cont … 3
BY:- Jibril H.
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>

AJAX Example 4
BY:- Jibril H.
• The HTML page contains a <div> section and a <button>.
• The <div> section is used to display information from a server.
• The <button> calls a function (if it is clicked).
• The function requests data from a web server and displays it:

Cont … 5
BY:- Jibril H.
Function loadDoc()
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
• Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook
tabs.

Cont … 6
BY:- Jibril H.
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

How AJAX Works 7


BY:- Jibril H.
Cont … 8
BY:- Jibril H.
• The XMLHttpRequest object is the key to AJAX. It has been available ever
since Internet Explorer 5.5 was released in July 2000, but was not fully
discovered until AJAX and Web 2.0 in 2005 became popular.
• XMLHttpRequest (XHR) is an API that can be used by JavaScript, JScript,
VBScript, and other web browser scripting languages to transfer and
manipulate XML data to and from a webserver using HTTP, establishing an
independent connection channel between a webpage's Client-Side and Server-
Side.

AJAX - XMLHttpRequest 9
BY:- Jibril H.
• The data returned from XMLHttpRequest calls will often be provided by
back-end databases. Besides XML, XMLHttpRequest can be used to
fetch data in other formats, e.g. JSON or even plain text.
• You already have seen a couple of examples on how to create an
XMLHttpRequest object.
• Listed below are some of the methods and properties that you have to get
familiar with.

Cont … 10
BY:- Jibril H.
• abort():- Cancels the current request.
• getAllResponseHeaders() :- Returns the complete set of HTTP headers as a
string.
• getResponseHeader( headerName ) :- Returns the value of the specified
HTTP header.
• open( method, URL )
• open( method, URL, async )
• open( method, URL, async, userName )
• open( method, URL, async, userName, password )

XMLHttpRequest Methods 11
BY:- Jibril H.
• Specifies the method, URL, and other optional attributes of a request.
• The method parameter can have a value of "GET", "POST", or "HEAD".
Other HTTP methods such as "PUT" and "DELETE" (primarily used in REST
applications) may be possible.
• The "async" parameter specifies whether the request should be handled
asynchronously or not. "true" means that the script processing carries on after
the send() method without waiting for a response, and "false" means that the
script waits for a response before continuing script processing.
• send( content ):- Sends the request.

Cont … 12
BY:- Jibril H.
• setRequestHeader( label, value ):- Adds a label/value pair to the HTTP header to be sent.
• XMLHttpRequest Properties
• Onreadystatechange:- An event handler for an event that fires at every state change.
• readyState:- The readyState property defines the current state of the XMLHttpRequest
object.

Cont … 13
BY:- Jibril H.
The following table provides a list of the possible values for the readyState
property
State Description
0 The request is not initialized.
1 The request has been set up.
2 The request has been sent.
3 The request is in process.
4 The request is completed.

Cont … 14
BY:- Jibril H.
• readyState = 0 After you have created the XMLHttpRequest object, but
before you have called the open() method.
• readyState = 1 After you have called the open() method, but before you
have called send().
• readyState = 2 After you have called send().
• readyState = 3 After the browser has established a communication with the
server, but before the server has completed the response.
• readyState = 4 After the request has been completed, and the response data
has been completely received from the server.

Cont … 15
BY:- Jibril H.
• responseText:- Returns the response as a string.
• responseXML :- Returns the response as XML. This property returns an
XML document object, which can be examined and parsed using the W3C
DOM node tree methods and properties.
• status :- Returns the status as a number (e.g., 404 for "Not Found" and 200
for "OK").
• statusText :- Returns the status as a string (e.g., "Not Found" or "OK").

Cont … 16
BY:- Jibril H.
• Speed is enhanced as there is no need to reload the page again.
• AJAX make asynchronous calls to a web server, this means client browsers
avoid waiting for all the data to arrive before starting of rendering.
• Form validation can be done successfully through it.
• Bandwidth utilization – It saves memory when the data is fetched from the
same page.
• More interactive.

Advantages: 17
BY:- Jibril H.
• Ajax is dependent on Javascript. If there is some Javascript problem with
the browser or in the OS, Ajax will not support.
• Ajax can be problematic in Search engines as it uses Javascript for most of
its parts.
• Source code written in AJAX is easily human readable. There will be some
security issues in Ajax.
• Debugging is difficult.
• Problem with browser back button when using AJAX enabled pages

Disadvantages: 18
BY:- Jibril H.
Thank you

Question 19
BY:- Jibril H.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy