AJAX

What is AJAX
• Asynchronous JavaScript and XML.
• It is a group of inter-related technologies like JavaScript,
DOM, XML, HTML, CSS etc.
• allows you to send and receive data asynchronously
without reloading the web page. So it is fast.
• allows you to send only important information to the
server not the entire page
• gmail, facebook,twitter, google map, youtube 
AJAX is not a programming language.
AJAX just uses a combination of:
1.A browser built-in XMLHttpRequest object (to request data
from a web server)
2.JavaScript and HTML DOM (to display or use the data)
 Understanding Synchronous vs Asynchronous

Synchronous (Classic Web-Application Model)

A synchronous request blocks the client until operation completes
i.e. browser is not unresponsive.
In such case, javascript engine of the browser is blocked.
 Understanding Synchronous vs Asynchronous

Asynchronous (AJAX Web-Application Model)

An asynchronous request doesn’t block the client i.e. browser is
responsive.
At that time, user can perform another operations also. In such case,
javascript engine of the browser is not blocked.
 AJAX Technologies
AJAX is not a technology but group of inter-related technologies.
AJAX technologies includes:
1.HTML/XHTML and CSS
• used for displaying content and style
2.DOM
• used for dynamic display and interaction with data
3.XML or JSON
• For carrying data to and from server. JSON (Javascript
Object Notation) is like XML but short and faster than
XML
4.XMLHttpRequest
• For asynchronous communication between client and
server
5.JavaScript
• used to bring above technologies together, mainly for
client-side validation
How AJAX Works

AJAX communicates with the server

using XMLHttpRequest object
 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
1. User sends a request from the UI and a javascript call
goes to XMLHttpRequest object.
2. HTTP Request is sent to the server by
XMLHttpRequest object.
3. Server interacts with the database using JSP, PHP,
Servlet, ASP.net etc.
4. Data is retrieved.
5. Server sends XML data or JSON data to the
XMLHttpRequest callback function.
6. HTML and CSS data is displayed on the browser.
 Understanding XMLHttpRequest
An object of XMLHttpRequest is used for asynchronous
communication between client and server.
It performs following operations:
1. Sends data from the client in the background
2. Receives the data from the server
3. Updates the webpage without reloading it.

• 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.
 Properties of XMLHttpRequest object
The common properties of XMLHttpRequest object are as
follows:
Property Description
onReadyStateCha It is called whenever readystate attribute changes. It
nge must not be used with synchronous requests.
readyState represents the state of the request. It ranges from 0 to
4.
0 UNOPENED open() is not called.
1 OPENED open is called but send() is not called.
2 HEADERS_RECEIVED send() is called, and
headers and status are available.
3 LOADING Downloading data; responseText holds
the data.
4 DONE The operation is completed fully.
reponseText returns response as text.
responseXML returns response as XML
 Methods of XMLHttpRequest object
The important methods of XMLHttpRequest object are as follows:

Method Description
void open(method, URL) opens the request specifying get
or post method and url.
void open(method, URL, async) same as above but specifies
asynchronous or not.
void open(method, URL, async, same as above but specifies
username, password) username and password.
void send() sends get request.
void send(string) send post request.
setRequestHeader(header,value) it adds request headers.
Create an XMLHttpRequest Object
variable = new XMLHttpRequest();
Send a Request To a Server
use the open() and send() methods
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Method Description
open(method, url, Specifies the type of request
async)
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)
 onreadystatechange Property
• The readyState property holds the status of the XMLHttpRequest.
• The onreadystatechange property defines a function to be executed when
the readyState changes.
• The status property and the statusText property holds the status of the
XMLHttpRequest object.
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")
• https://www.w3schools.com/xml/ajax_examp
les.asp
• https://www.tutorialspoint.com/ajax/ajax_ex
amples.htm
<html>
<body>
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<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("POST", "demo_post.asp", true);
xhttp.send();
}
</script>

</body>
</html>
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style><body>
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Get my CD collection</button>
<table id="demo"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>
 Callback Function
• function passed as a parameter to another function
• you have more than one AJAX task in a website, you should
create one function for executing the XMLHttpRequest
object, and one callback function for each AJAX task.
• function call should contain the URL and what function to
call when the response is ready
Server Response Properties
Property Description
responseText get the response data as a string
returns the server response as a JavaScript string
document.getElementById("demo").innerHTML =
xhttp.responseText;
responseXML get the response data as XML data
returns the server response as an XML DOM object
loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
 };
  xhttp.open("GET", url, true);
  xhttp.send();
}

function myFunction1(xhttp) {
  // action goes here
} 
function myFunction2(xhttp) {
  // action goes here
}
WEB SERVICES
 What is a web service
• A web service is any piece of software that makes itself
available over the internet and uses a standardized XML
messaging system.
• Web services are self-contained, modular, distributed,
dynamic applications that can be described, published, located,
or invoked over the network to create products, processes, and
supply chains.
• A web service is a collection of open protocols and standards
used for exchanging data between applications or systems
• Software Component stored on one computer that can be
accessed via method calls by an application on another
computer
 A Web Service is can be defined by following ways:
1.is a client server application or application component for communication.
2.method of communication between two devices over network.
3.is a software system for interoperable machine to machine communication.
4.is a collection of standards or protocols for exchanging information between two
devices or application.

java, .net or PHP applications can communicate with other applications

through web service over the network
Benefits of web service
• Exposing the Existing Function on the network
• Interoperability
• Standardized Protocol
• Low Cost of Communication

Types of Web Services

 Web Service Components
There are three major web service components.
1. SOAP
2. WSDL
3. UDDI

WSDL
WSDL is an acronym for Web Services Description Language.
WSDL is a xml document containing information about web services such as method
name, method parameter and how to access it.
WSDL is a part of UDDI. It acts as a interface between web service applications.
WSDL is pronounced as wiz-dull.

UDDI
UDDI is an acronym for Universal Description, Discovery and Integration.
UDDI is a XML based framework for describing, discovering and integrating web
services.
UDDI is a directory of web service interfaces described by WSDL, containing
information about web services.
 10

23
 SOAP
SOAP is an acronym for Simple Object Access Protocol.
SOAP is a XML-based protocol for accessing web services.
SOAP is a W3C recommendation for communication between applications.
SOAP is XML based, so it is platform independent and language independent. In
other words, it can be used with Java, .Net or PHP language on any platform.

Advantages Disadvantages
WS Security: SOAP defines its Slow: SOAP uses XML format that must
own security known as WS be parsed to be read. It defines many
Security. standards that must be followed while
Language and Platform developing the SOAP applications. So it is
independent: SOAP web services slow and consumes more bandwidth and
can be written in any programming resource.
language and executed in any WSDL dependent: SOAP uses WSDL
platform. and doesn't have any other mechanism to
discover the service.
 RESTful Web Services

REST stands for REpresentational State Transfer.

REST is an architectural style not a protocol.
appeals to developers because it has a simpler style that makes
it easier to use than SOAP.
It is also less verbose so that less volume is sent when
communicating.
No SOAP REST
1) SOAP is a protocol. REST is an architectural style.
2) SOAP stands for Simple Object Access REST stands for REpresentational State
Protocol. Transfer.
3) SOAP can't use REST because it is a REST can use SOAP web services
protocol. because it is a concept and can use any
protocol like HTTP, SOAP.
4) SOAP uses services interfaces to REST uses URI to expose business logic.
expose the business logic.
5) JAX-WS is the java API for SOAP web JAX-RS is the java API for RESTful web
services. services.
6) SOAP defines standards to be strictly REST does not define too much standards
followed. like SOAP.
7) SOAP requires more bandwidth and REST requires less bandwidth and
resource than REST. resource than SOAP.
8) SOAP defines its own security. RESTful web services inherits security
measures from the underlying transport.
9) SOAP permits XML data format only. REST permits different data format such
as Plain text, HTML, XML, JSON etc.
10) SOAP is less preferred than REST. REST more preferred than SOAP.
10

1,143
JAVA Web SERVICES
 web services resides at server side
client requests for web service and get from remote machine
through response

In Java, Web service is implemented as a class.

This class resides on server machine

Two main java web services api:

JAX-WS
for SOAP web services. The are two ways to write JAX-WS
application code: by RPC style and Document style.
JAX-RS
for RESTful web services. There are mainly 2 implementation
currently in use for creating JAX-RS application: Jersey and RESTeasy
Server
Client
Client Code Proxy Object Internet Web
Service
 Creating,Publishing,Testing and Describing a
Web Service
Publishing a web service
Making a web service available to receive client requests
Consuming a Web Service
using a web service from a client application
has two parts
1. object of a proxy class for interacting with web service
2. client application that consumes web service by
invoking methods on the object of proxy class

Service Provider or Publisher

This is the provider of the web service. The service provider
implements the service and makes it available on the Internet
or intranet.
Service Requestor or Consumer
This is any consumer of the web service. The requestor utilizes
an existing web service by opening a network connection and
sending an XML request.
<%@ WebService language = "C#" class = "FirstService" %>
using System;
using System.Web.Services;
using System.Xml.Serialization;
[WebService(Namespace="http://localhost/MyWebServices/")]
public class FirstService : WebService
{
[WebMethod]
public int Add(int a, int b)
{
return a + b; }
[WebMethod]
public String SayHello()
{
return "Hello World";
}
}
 SOAP
SOAP is an acronym for Simple Object Access Protocol.
SOAP provides the envelope for sending Web Services messages over
the Internet/Internet
It is an XML-based messaging protocol for exchanging information
among computers.
SOAP is an application of the XML specification.
A SOAP message is an ordinary XML document containing the
following elements −
Envelope − Defines the start and the end of the message. It is a
mandatory element.
Header − Contains any optional attributes of the message used in
processing the message, either at an intermediary point or at the ultimate
end-point. It is an optional element.
Body − Contains the XML data comprising the message being sent. It is
a mandatory element.
Fault − An optional Fault element that provides information about errors
that occur while processing the message.
 SOAP Message Structure
<?xml version="1.0"?>
<SOAP-ENV:Envelope xmlns:SOAP-ENV="http://www.w3.org/2001/12/soap-
envelope" SOAP-ENV:encodingStyle="http://www.w3.org/2001/12/soap-encoding">

<SOAP-ENV:Header>
...
...
</SOAP-ENV:Header>

<SOAP-ENV:Body>
...
...
<SOAP-ENV:Fault>
...
...
</SOAP-ENV:Fault>
...
</SOAP-ENV:Body>

</SOAP_ENV:Envelope>
The SOAP envelope contains two parts:
1.An optional header providing information on authentication, encoding of
data, or how a recipient of a SOAP message should process the message.
2.The body that contains the message. These messages can be defined using
the WSDL specification.
 SOAP Request

<?xml version="1.0"?>
<SOAP-ENV:Envelope xmlns:SOAP-
ENV="http://www.w3.org/2001/12/soap-envelope" SOAP-
ENV:encodingStyle="http://www.w3.org/2001/12/soap-encoding" >

<SOAP-ENV:Body xmlns:m="http://www.xyz.org/quotations" >

<m:GetQuotation>
<m:QuotationsName>MiscroSoft</m:QuotationsName>
</m:GetQuotation>

</SOAP-ENV:Body>

</SOAP-ENV:Envelope>
 SOAP Response

<?xml version="1.0"?>
<SOAP-ENV:Envelope xmlns:SOAP-
ENV="http://www.w3.org/2001/12/soap-envelope" SOAP-
ENV:encodingStyle="http://www.w3.org/2001/12/soap-encoding" >

<SOAP-ENV:Body xmlns:m="http://www.xyz.org/quotation" >

<m:GetQuotationResponse>
<m:Quotation>Here is the quotation</m:Quotation>
</m:GetQuotationResponse>

</SOAP-ENV:Body>

</SOAP-ENV:Envelope>
6