Download presentation
Presentation is loading. Please wait.
1
AJAX
2
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: A browser built-in XMLHttpRequest object (to request data from a web server) JavaScript and HTML DOM (to display or use the data)
3
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.
4
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.
5
AJAX Technologies AJAX is not a technology but group of inter-related technologies. AJAX technologies includes: HTML/XHTML and CSS used for displaying content and style DOM used for dynamic display and interaction with data XML or JSON For carrying data to and from server. JSON (Javascript Object Notation) is like XML but short and faster than XML XMLHttpRequest For asynchronous communication between client and server JavaScript used to bring above technologies together, mainly for client-side validation
6
How AJAX Works AJAX communicates with the server using XMLHttpRequest object
7
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
9
User sends a request from the UI and a javascript call goes to XMLHttpRequest object.
HTTP Request is sent to the server by XMLHttpRequest object. Server interacts with the database using JSP, PHP, Servlet, ASP.net etc. Data is retrieved. Server sends XML data or JSON data to the XMLHttpRequest callback function. HTML and CSS data is displayed on the browser.
10
Understanding XMLHttpRequest
An object of XMLHttpRequest is used for asynchronous communication between client and server. It performs following operations: Sends data from the client in the background Receives the data from the server 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.
11
Properties of XMLHttpRequest object
The common properties of XMLHttpRequest object are as follows: Property Description onReadyStateChange It is called whenever readystate attribute changes. It 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
12
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, username, password) same as above but specifies username and password. void send() sends get request. void send(string) send post request. setRequestHeader(header,value) it adds request headers.
13
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, 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)
14
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")
15
<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>
16
<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();
17
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>
18
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
19
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 }
20
WEB SERVICES
21
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
22
A Web Service is can be defined by following ways:
is a client server application or application component for communication. method of communication between two devices over network. is a software system for interoperable machine to machine communication. 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
23
Benefits of web service
Exposing the Existing Function on the network Interoperability Standardized Protocol Low Cost of Communication Types of Web Services
24
Web Service Components
There are three major web service components. SOAP WSDL 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.
25
10 23
26
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 own security known as WS Security. Language and Platform independent: SOAP web services can be written in any programming language and executed in any platform. Slow: SOAP uses XML format that must be parsed to be read. It defines many standards that must be followed while developing the SOAP applications. So it is slow and consumes more bandwidth and resource. WSDL dependent: SOAP uses WSDL and doesn't have any other mechanism to discover the service.
28
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.
29
No SOAP REST 1) SOAP is a protocol. REST is an architectural style. 2) SOAP stands for Simple Object Access Protocol. REST stands for REpresentational State Transfer. 3) SOAP can't use REST because it is a protocol. REST can use SOAP web services because it is a concept and can use any protocol like HTTP, SOAP. 4) SOAP uses services interfaces to expose the business logic. REST uses URI to expose business logic. 5) JAX-WS is the java API for SOAP web services. JAX-RS is the java API for RESTful web services. 6) SOAP defines standards to be strictly followed. REST does not define too much standards like SOAP. 7) SOAP requires more bandwidth and resource than REST. REST requires less bandwidth and 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.
30
10 1,143
31
JAVA Web SERVICES
32
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 Client Code Proxy Object Internet Web Service Server Client
33
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.
34
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=" public class FirstService : WebService { [WebMethod] public int Add(int a, int b) return a + b; } public String SayHello() return "Hello World"; }
35
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.
36
SOAP Message Structure
<?xml version="1.0"?> <SOAP-ENV:Envelope xmlns:SOAP-ENV=" SOAP-ENV:encodingStyle=" <SOAP-ENV:Header> ... </SOAP-ENV:Header> <SOAP-ENV:Body> <SOAP-ENV:Fault> </SOAP-ENV:Fault> </SOAP-ENV:Body> </SOAP_ENV:Envelope>
37
The SOAP envelope contains two parts:
An optional header providing information on authentication, encoding of data, or how a recipient of a SOAP message should process the message. The body that contains the message. These messages can be defined using the WSDL specification.
38
SOAP Request <?xml version="1.0"?> <SOAP-ENV:Envelope xmlns:SOAP-ENV=" SOAP-ENV:encodingStyle=" > <SOAP-ENV:Body xmlns:m=" > <m:GetQuotation> <m:QuotationsName>MiscroSoft</m:QuotationsName> </m:GetQuotation> </SOAP-ENV:Body> </SOAP-ENV:Envelope>
39
SOAP Response <?xml version="1.0"?> <SOAP-ENV:Envelope xmlns:SOAP-ENV=" SOAP-ENV:encodingStyle=" > <SOAP-ENV:Body xmlns:m=" > <m:GetQuotationResponse> <m:Quotation>Here is the quotation</m:Quotation> </m:GetQuotationResponse> </SOAP-ENV:Body> </SOAP-ENV:Envelope>
40
6
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.