26
UNIT-III AJAX A NEW APPROACH AJAX: AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS and Java Script. Ajax uses XHTML for content and CSS for presentation, as well as the Document Object Model and JavaScript for dynamic content display. Conventional web application transmit information to and from the sever using synchronous requests. This means you fill out a form, hit submit, and get directed to a new page with new information from the server. With AJAX when submit is pressed, 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. 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 Intuitive and natural user interaction. No clicking required only Mouse movement is a sufficient event trigger. Page 1

karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

UNIT-IIIAJAX A NEW APPROACH

AJAX: AJAX stands for Asynchronous JavaScript and XML. AJAX is a new

technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS and Java Script.

Ajax uses XHTML for content and CSS for presentation, as well as the Document Object Model and JavaScript for dynamic content display.

Conventional web application transmit information to and from the sever using synchronous requests. This means you fill out a form, hit submit, and get directed to a new page with new information from the server.

With AJAX when submit is pressed, 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.

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 Intuitive and natural user interaction. No clicking required only Mouse

movement is a sufficient event trigger. Data-driven as opposed to page-driven

Ajax is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behaviour of the existing page. Data can be retrieved using the XMLHttpRequest object. Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and allow the user to interact with, the information presented. JavaScript and

Page 1

Page 2: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.

The term Ajax has come to represent a broad group of web technologies that can be used to implement a web application that communicates with a server in the background, without interfering with the current state of the page

HTML (or XHTML) and CSS for presentation The Document Object Model (DOM) for dynamic display of and interaction with data XML for the interchange of data, and XSLT for its manipulation The XMLHttpRequest object for asynchronous communication JavaScript to bring these technologies together

PROS AND CONS OF AJAX

Pros: – Allows web applications to interact with data on the server – Avoid clunky GET/POST send/receive interfaces – web apps look more and more like real applications – Some applications can only be realized this way • Eg: Google Suggest offers interactive access to one of the largest data collections in the world – For office style applications, user's data is stored on a reliable server, accessable from any web browser

Cons:- – Tough to make compatible across all browsers – Should have a low-latency connection to the server – Can be server intensive• Eg: Google Suggest generates a search for every keystroke entered

XMLHttpRequest Methods

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)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 possibleThe "async" parameter specifies whether the request should be handled asynchronously or not . "true" means that 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.

setRequestHeader(label,value)Adds a label/value pair to the HTTP header to be sent.

XMLHttpRequest Properties

Page 2

Page 3: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

onreadystatechangeAn event handler for an event that fires at every state change.

readyStateThe readyState property defines the current state of the XMLHttpRequest object.Here are the possible values for the readyState propery:

State Description0 The request is not initialized1 The request has been set up2 The request has been sent3 The request is in process4 The request is completed

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 have been completely received from the server.

responseTextReturns the response as a string.

responseXMLReturns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties.

statusReturns the status as a number (e.g. 404 for "Not Found" and 200 for "OK").

status TextReturns the status as a string (e.g. "Not Found" or "OK").

Steps of AJAX Operation

1. A client event occurs2. An XMLHttpRequest object is created3. The XMLHttpRequest object is configured4. The XMLHttpRequest object makes an asynchronous request to the Webserver.5. Web server returns the result containing XML document.6. The XMLHttpRequest object calls the callback() function and processes the result.7. The HTML DOM is updated

1. A client event occurs A JavaScript function is called as the result of an event Example: sendRequest() JavaScript function is mapped as a event handler to a onClick on input form field. <input type="button" value="Show Message”onclick="sendRequest()"/>

2. The XMLHttpRequest object is createdThe XMLHttpRequest ObjectAll modern browsers support the XMLHttpRequest object (IE5 and IE6 use an ActiveXObject).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.Create an XMLHttpRequest ObjectAll modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have a built-in XMLHttpRequest object.

Page 3

Page 4: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

Syntax for creating an XMLHttpRequest object:variable=new XMLHttpRequest();Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object:variable=new ActiveXObject("Microsoft.XMLHTTP");To handle all modern browsers, including IE5 and IE6, check if the browser supports the XMLHttpRequest object. If it does, create an XMLHttpRequest object, if not, create an ActiveXObject:Example:var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }Example Progarm:

var request;function getRequestObject() {if (window.ActiveXObject) {return(new ActiveXObject("Microsoft.XMLHTTP"));} else if (window.XMLHttpRequest) {return(new XMLHttpRequest());} else {return(null);}}

3. The XMLHttpRequest object is Configured:Send a Request To a ServerTo send a request to a server, we use the open() and send() methods of the XMLHttpRequest object:xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();

Method Description

open(method,url,async) Specifies the type of request, the URL, and if the request should be handled asynchronously or not.

method: the type of request: GET or POSTurl: the location of the file on the serverasync: true (asynchronous) or false (synchronous)

send(string) Sends the request off to the server.

string: Only used for POST requests

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

GET RequestsA simple GET request:

Page 4

Page 5: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

Examplexmlhttp.open("GET","demo_get.asp",true);xmlhttp.send();<!DOCTYPE html><html><head><script>function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; }}xmlhttp.open("GET","demo_get.asp",true);xmlhttp.send();}</script></head><body><h2>AJAX</h2><button type="button" onclick="loadXMLDoc()">Request data</button><div id="myDiv"></div>

</body></html>POST RequestsA simple POST request:Examplexmlhttp.open("POST","demo_post.asp",true);xmlhttp.send();

Example program

<!DOCTYPE html><html><head><script>function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();

Page 5

Page 6: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

}else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }xmlhttp.open("POST","demo_post.asp",true);xmlhttp.send();}</script></head><body><h2>AJAX</h2><button type="button" onclick="loadXMLDoc()">Request data</button><div id="myDiv"></div></body></html>

To POST data like an HTML form, add an HTTP header with setRequestHeader(). Specify the data you want to send in the send() method:Examplexmlhttp.open("POST","ajax_test.asp",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Henry&lname=Ford");

Method Description

setRequestHeader(header,value) Adds HTTP headers to the request.

header: specifies the header namevalue: specifies the header value

The url - A File On a ServerThe url parameter of the open() method, is an address to a file on a server:xmlhttp.open("GET","ajax_test.asp",true);The file can be any kind of file, like .txt and .xml, or server scripting files like .asp and .php (which can perform actions on the server before sending the response back).Asynchronous - True or False?AJAX stands for Asynchronous JavaScript and XML, and for the XMLHttpRequest object to behave as AJAX, the async parameter of the open() method has to be set to true:xmlhttp.open("GET","ajax_test.asp",true);Sending asynchronous requests is a huge improvement for web developers. Many of the tasks performed on the server are very time consuming. Before AJAX, this operation could cause the application to hang or stop.With AJAX, 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

Async=true

Page 6

Page 7: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

When using async=true, specify a function to execute when the response is ready in the onreadystatechange event:Examplexmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();Async=falseTo use async=false, change the third parameter in the open() method to false:xmlhttp.open("GET","ajax_info.txt",false);Using async=false is not recommended, but for a few small requests this can be ok.Remember that the 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.Note: When you use async=false, do NOT write an onreadystatechange function - just put the code after the send() statement:

Examplexmlhttp.open("GET","ajax_info.txt",false);xmlhttp.send();document.getElementById("myDiv").innerHTML=xmlhttp.responseText;Example program:In this step we will write a function which will be triggered by the client event and a callback function handleResponse() will be registeredfunction sendRequest() {request = getRequestObject();request.onreadystatechange = handleResponse;request.open("GET", "student.xml", true);request.send(null);}

4. Making Asynchornous Request to the WebserverSource code is available in the above piece of code. Code written in blue color is responsible to make a request to the web server. This is all being done using XMLHttpRequest objectajaxRequest request.open("GET", "student.xml", true);request.send(null);

5. Webserver returns the result containing XML documentYou can implement your server side script in any language. But logic should be as follows

Get a request from the client Parse the input from the client Do required processing. Send the output to the client.

Sever side code

6. Callback function processRequest() is calledThe XMLHttpRequest object was configured to call the processRequest() function when there is a state change to the readyState of the XMLHttpRequest object. Now this function will recieve the result from the server and will do required processing. As in the following example it sets a variable message on true or false based on retruned value from the Webserver.function handleResponse() {if (request.readyState == 4) {

Page 7

Page 8: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.loadXML(request.responseText);request.responseText;}}7. The HTML DOM is updatedThis is the final step and in this step your HTML page will be updated. It happens in the following way JavaScript technology gets a reference to any element in a page using DOM API

The recommended way to gain a reference to an element is to call. JavaScript technology may now be used to modify the element's attributes; modify the element's style

properties; or add, remove, or modify child elements. Here is the examplealert(xmlDoc.documentElement.nodeName);child=xmlDoc.documentElement.childNodes;for(var i=0;i<child.length;i++) { name=child[i].nodeName; value=child[i].childNodes[0].nodeValue; alert(name+" "+value); }thats it...if you understood above mentioned seven steps then you are almost done with AJAX.

Reading html in AJAX:<!DOCTYPE html PUBLIC "...""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Ajax: Simple Message</title><script type="text/javascript">var request;function getRequestObject() {

if (window.ActiveXObject) {return(new ActiveXObject("Microsoft.XMLHTTP"));

} else if (window.XMLHttpRequest) {return(new XMLHttpRequest());} else {return(null);}}function sendRequest() {request = getRequestObject();request.onreadystatechange = handleResponse;request.open("GET", "message-data.html", true);request.send(null);}function handleResponse() {if (request.readyState == 4) {

if (window.DOMParser) { parser=new DOMParser(); htmlDoc=parser.parseFromString(request.responseText,"text/html");alert(request.responseText);

Page 8

Page 9: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

alert(htmlDoc.documentElement.nodeName);}}}</script></head><body><center><table border="1" bgcolor="gray"><tr><th><big>Ajax: Simple Message</big></th></tr></table><p/><form action="#"><input type="button" value="Show Message"onclick="sendRequest()"/></form></center></body></html>Message-data.html:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html> <head> <title></title> </head> <body> <p> HAI </p> </body></html>

Reading XML in Ajax: <!DOCTYPE html><html> <head> <script type="text/javascript">var request;function getRequestObject() {if (window.ActiveXObject) {return(new ActiveXObject("Microsoft.XMLHTTP"));} else if (window.XMLHttpRequest) {return(new XMLHttpRequest());} else {return(null);}}function sendRequest() {request = getRequestObject();request.onreadystatechange = handleResponse;request.open("GET", "student.xml", true);request.send(null);}function handleResponse() {if (request.readyState == 4) { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.loadXML(request.responseText);

Page 9

Page 10: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

alert(request.responseText);alert(xmlDoc.documentElement.nodeName);child=xmlDoc.documentElement.childNodes;for(var i=0;i<child.length;i++) { name=child[i].nodeName; value=child[i].childNodes[0].nodeValue; alert(name+" "+value); }

}}

</script></head><body> <center> <table border="1" bgcolor="gray"> <tr><th><big>Ajax: Simple Message</big></th></tr> </table> <p/> <form action="#"> <input type="button" value="Show Message" onclick="sendRequest()"/></body></html>Student.xml:<?xml version="1.0"?>-<student>-<name><f-name> MIC </f-name><l-name>MIC</l-name></name><rollno> 02 </rollno><address> vijayawada </address><mobileno>987654321</mobileno></student>Reading xml string in Ajax:<!DOCTYPE html><html><body><script type="text/javascript">text="<bookstore><book>";text=text+"<title>Everyday Italian</title>";text=text+"<author>Giada De Laurentiis</author>";text=text+"<year>2005</year>";text=text+"</book></bookstore>";if (window.DOMParser) { parser=new DOMParser(); xmlDoc=parser.parseFromString(text,"text/xml"); } else // Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async=false; xmlDoc.loadXML(text); } document.write("XML string is loaded into an XML DOM Object");document.write("<br>XML document root tag name is");document.write(xmlDoc.documentElement.nodeName);child=xmlDoc.documentElement.childNodes;for(var i=0;i<child.length;i++) { name=child[i].nodeName;

Page 10

Page 11: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

value=child[i].childNodes[0].nodeValue; alert(name+" "+value); }</script></body></html>

Web Services

Web services are open standard (XML, SOAP, HTTP etc.) based Web applications that interact with other web applications for the purpose of exchanging data.Web Services can convert your existing applications into Web-applicationsA web service is a collection of open protocols and standards used for exchanging data between applications or systems. Software applications written in various programming languages and running on various platforms can use web services to exchange data over computer networks like the Internet in a manner similar to inter-process communication on a single computer. This interoperability (e.g., between Java and Python, or Windows and Linux applications) is due to the use of open standards.

Components of Web ServicesThe basic web services platform is XML + HTTP. All the standard web services work using the following components

SOAP (Simple Object Access Protocol) UDDI (Universal Description, Discovery and Integration) WSDL (Web Services Description Language)

SOAP (   S imple   O bject   A ccess   P rotocol ) A SOAP message is an ordinary XML document containing the following elements:

An Envelope element that identifies the XML document as a SOAP message A Header element that contains header information A Body element that contains call and response information A Fault element containing errors and status information

Syntax RulesHere are some important syntax rules:

A SOAP message MUST be encoded using XML A SOAP message MUST use the SOAP Envelope namespace A SOAP message MUST use the SOAP Encoding namespace A SOAP message must NOT contain a DTD reference A SOAP message must NOT contain XML Processing Instructions

SOAP Message<?xml version="1.0"?>

<soap:Envelope

Page 11

Page 12: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

xmlns:soap="http://www.w3.org/2003/05/soap-envelope/"soap:encodingStyle="http://www.w3.org/2003/05/soap-encoding"><soap:Header>................…..</soap:Header><soap:Body>…… ...  <soap:Fault> …………………….. ...  </soap:Fault></soap:Body></soap:Envelope>

SOAP Envelope Element

The required SOAP Envelope element is the root element of a SOAP message. This element defines the XML document as a SOAP message.

Example

<?xml version="1.0"?><soap:Envelopexmlns:soap="http://www.w3.org/2003/05/soap-envelope/"soap:encodingStyle="http://www.w3.org/2003/05/soap-encoding">  ...message information goes here ...</soap:Envelope>

xmlns:soap Namespace

Notice the xmlns:soap namespace in the example above. It should always have the value of: "http://www.w3.org/2003/05/soap-envelope/".The namespace defines the Envelope as a SOAP Envelope.If a different namespace is used, the application generates an error and discards the message.

The encodingStyle AttributeThe encodingStyle attribute is used to define the data types used in the document. This attribute may appear on any SOAP element, and applies to the element's contents and all child elements.A SOAP message has no default encoding.Syntaxsoap:encodingStyle="URI"<?xml version="1.0"?><soap:Envelopexmlns:soap="http://www.w3.org/2003/05/soap-envelope/"soap:encodingStyle="http://www.w3.org/2003/05/soap-encoding">  ...  Message information goes here  ...</soap:Envelope>

SOAP Header ElementThe optional SOAP Header element contains application-specific information (like authentication, payment, etc) about the SOAP message.

Page 12

Page 13: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

If the Header element is present, it must be the first child element of the Envelope element.Note: All immediate child elements of the Header element must be namespace-qualified.<?xml version="1.0"?><soap:Envelopexmlns:soap="http://www.w3.org/2003/05/soap-envelope/"soap:encodingStyle="http://www.w3.org/2003/05/soap-encoding"><soap:Header>  <m:Trans xmlns:m="http://www.w3schools.com/transaction/" soap:mustUnderstand="1">234  </m:Trans></soap:Header>...... </soap:Envelope>

Attributes

mustUnderstand Attribute

The SOAP mustUnderstand attribute can be used to indicate whether a header entry is mandatory or optional for the recipient to process.

If you add mustUnderstand="1" to a child element of the Header element it indicates that the receiver processing the Header must recognize the element. If the receiver does not recognize the element it will fail when processing the Header.Syntaxsoap:mustUnderstand="0|1"

actor Attribute

A SOAP message may travel from a sender to a receiver by passing different endpoints along the message path. However, not all parts of a SOAP message may be intended for the ultimate endpoint, instead, it may be intended for one or more of the endpoints on the message path.The SOAP actor attribute is used to address the Header element to a specific endpoint.Syntaxsoap:actor="URI"

encodingStyle Attribute

The encodingStyle attribute is used to define the data types used in the document. This attribute may appear on any SOAP element, and it will apply to that element's contents and all child elements.

A SOAP message has no default encoding.Syntaxsoap:encodingStyle="URI"

SOAP Body Element

Page 13

Page 14: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

The required SOAP Body element contains the actual SOAP message intended for the ultimate endpoint of the message.Immediate child elements of the SOAP Body element may be namespace-qualified.Example<?xml version="1.0"?><soap:Envelopexmlns:soap="http://www.w3.org/2003/05/soap-envelope/"soap:encodingStyle="http://www.w3.org/2003/05/soap-encoding"><soap:Body>  <m:GetPrice xmlns:m="http://www.w3schools.com/prices">    <m:Item>Apples</m:Item>  </m:GetPrice></soap:Body></soap:Envelope>

SOAP Fault ElementThe optional SOAP Fault element is used to indicate error messages.The SOAP Fault element holds errors and status information for a SOAP message.If a Fault element is present, it must appear as a child element of the Body element. A Fault element can only appear once in a SOAP message.The SOAP Fault element has the following sub elements:

Sub Element Description

<faultcode> A code for identifying the fault

<faultstring> A human readable explanation of the fault

<faultactor> Information about who caused the fault to happen

<detail>Holds application specific error information related to the Body element

SOAP Example

A SOAP request:POST /InStock HTTP/1.1Host: www.example.orgContent-Type: application/soap+xml; charset=utf-8Content-Length: nnn<?xml version="1.0"?><soap:Envelopexmlns:soap="http://www.w3.org/2003/05/soap-envelope/"

Page 14

Page 15: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

soap:encodingStyle="http://www.w3.org/2003/05/soap-encoding"><soap:Body xmlns:m="http://www.example.org/stock">  <m:GetStockPrice>    <m:StockName>IBM</m:StockName>  </m:GetStockPrice></soap:Body></soap:Envelope>

The SOAP response:HTTP/1.1 200 OKContent-Type:application/soap+xml; charset=utf-8Content-Length: nnn<?xml version="1.0"?><soap:Envelopexmlns:soap="http://www.w3.org/2003/05/soap-envelope/"soap:encodingStyle="http://www.w3.org/2003/05/soap-encoding">

<soap:Body xmlns:m="http://www.example.org/stock">  <m:GetStockPriceResponse>    <m:Price>34.5</m:Price>  </m:GetStockPriceResponse></soap:Body></soap:Envelope>

WSDL(Web Services Description Language)WSDL stands for Web Services Description Language. It is the standard format for describing a web service. WSDL was developed jointly by Microsoft and IBM.

Features of WSDL WSDL is an XML-based protocol for information exchange in decentralized and distributed

environments. WSDL definitions describe how to access a web service and what operations it will perform. WSDL is a language for describing how to interface with XML-based services. WSDL is an integral part of Universal Description, Discovery, and Integration (UDDI), an XML-

based worldwide business registry. WSDL is the language that UDDI uses. WSDL is pronounced as 'wiz-dull' and spelled out as 'W-S-D-L'. WSDL Usage WSDL is often used in combination with SOAP and XML Schema to provide web services over

the Internet. A client program connecting to a web service can read the WSDL to determine what functions are available on the server. Any special datatypes used are embedded in the WSDL file in the form of XML Schema. The client can then use SOAP to actually call one of the functions listed in the WSDL.

WSDL ElementsA WSDL document contains the following elements:

Page 15

Page 16: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

Definition : It is the root element of all WSDL documents. It defines the name of the web service, declares multiple namespaces used throughout the remainder of the document, and contains all the service elements described here.

Data types : The data types to be used in the messages are in the form of XML schemas. Message : It is an abstract definition of the data, in the form of a message presented either as an

entire document or as arguments to be mapped to a method invocation. Operation : It is the abstract definition of the operation for a message, such as naming a method,

message queue, or business process, that will accept and process the message. Port type : It is an abstract set of operations mapped to one or more end-points, defining the

collection of operations for a binding; the collection of operations, as it is abstract, can be mapped to multiple transports through various bindings.

Binding : It is the concrete protocol and data formats for the operations and messages defined for a particular port type.

Port : It is a combination of a binding and a network address, providing the target address of the service communication.

Service : It is a collection of related end-points encompassing the service definitions in the file; the services map the binding to the port and include any extensibility definitions.

In addition to these major elements, the WSDL specification also defines the following utility elements: Documentation: This element is used to provide human-readable documentation and can be

included inside any other WSDL element. Import : This element is used to import other WSDL documents or XML Schemas.

WSDL Document StructureThe main structure of a WSDL document looks like this:<definitions> <types> definition of types........ </types>

<message> definition of a message.... </message>

<portType> <operation> definition of a operation....... </operation> </portType>

<binding> definition of a binding.... </binding>

<service> definition of a service.... </service></definitions>

Page 16

Page 17: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

Patterns of OperationWSDL supports four basic patterns of operation:One-wayThe service receives a message. The operation therefore has a single inputelement. The grammar for a one-way operation is:<wsdl:definitions .... > <wsdl:portType .... > * <wsdl:operation name="nmtoken"> <wsdl:input name="nmtoken"? message="qname"/> </wsdl:operation> </wsdl:portType ></wsdl:definitions>

Request-responseThe service receives a message and sends a response. The operation therefore has one input element, followed by one output element. To encapsulate errors, an optional fault element can also be specified. The grammar for a request-response operation is:<wsdl:definitions .... > <wsdl:portType .... > * <wsdl:operation name="nmtoken" parameterOrder="nmtokens"> <wsdl:input name="nmtoken"? message="qname"/> <wsdl:output name="nmtoken"? message="qname"/> <wsdl:fault name="nmtoken" message="qname"/>* </wsdl:operation> </wsdl:portType ></wsdl:definitions>Solicit-responseThe service sends a message and receives a response. The operation therefore has one output element, followed by one input element. To encapsulate errors, an optional fault element can also be specified. The grammar for a solicit-response operation is:<wsdl:definitions .... > <wsdl:portType .... > * <wsdl:operation name="nmtoken" parameterOrder="nmtokens"> <wsdl:output name="nmtoken"? message="qname"/> <wsdl:input name="nmtoken"? message="qname"/> <wsdl:fault name="nmtoken" message="qname"/>* </wsdl:operation> </wsdl:portType ></wsdl:definitions>NotificationThe service sends a message. The operation therefore has a singleoutputelement. Following is the grammar for a notification operation:<wsdl:definitions .... > <wsdl:portType .... > * <wsdl:operation name="nmtoken"> <wsdl:output name="nmtoken"? message="qname"/> </wsdl:operation>

Page 17

Page 18: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

</wsdl:portType ></wsdl:definitions>WSDL - Binding ElementThe <binding> element provides specific details on how a portType operation will actually be transmitted over the wire.

The bindings can be made available via multiple transports including HTTP GET, HTTP POST, or SOAP.

The bindings provide concrete information on what protocol is being used to transfer portType operations.

The bindings provide information where the service is located. For SOAP protocol, the binding is <soap:binding>, and the transport is SOAP messages on top of

HTTP protocol. You can specify multiple bindings for a single portType.

The binding element has two attributes : name and type attribute.<binding name="Hello_Binding" type="tns:Hello_PortType">The name attribute defines the name of the binding, and the type attribute points to the port for the binding, in this case the "tns:Hello_PortType" port.SOAP BindingThe SOAP extension elements include the following:

soap:binding soap:operation soap:body

soap:bindingThis element indicates that the binding will be made available via SOAP. Thestyle attribute indicates the overall style of the SOAP message format. A style value of rpc specifies an RPC format.The transport attribute indicates the transport of the SOAP messages. The value http://schemas.xmlsoap.org/soap/http indicates the SOAP HTTP transport, whereas http://schemas.xmlsoap.org/soap/smtp indicates the SOAP SMTP transport.

soap:operationThis element indicates the binding of a specific operation to a specific SOAP implementation. The soapAction attribute specifies that the SOAPAction HTTP header be used for identifying the service.

soap:bodyThis element enables you to specify the details of the input and output messages. In the case of HelloWorld, the body element specifies the SOAP encoding style and the namespace URN associated with the specified service.

<binding name="Hello_Binding" type="tns:Hello_PortType"> <soap:binding style="rpc" transport="http://schemas.xmlsoap.org/soap/http"/ > <operation name="sayHello"> <soap:operation soapAction="sayHello"/>

<input> <soap:body encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"

Page 18

Page 19: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

namespace="urn:examples:helloservice" use="encoded"/> </input>

<output> <soap:body encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" namespace="urn:examples:helloservice" use="encoded"/> </output> </operation></binding>

UDDI (Universal Description, Discovery, and Integration) UDDI is an XML-based standard for describing, publishing, and finding web services.

UDDI stands for Universal Description, Discovery, and Integration. UDDI is a specification for a distributed registry of web services. UDDI is a platform-independent, open framework. UDDI can communicate via SOAP, CORBA, Java RMI Protocol. UDDI uses Web Service Definition Language(WSDL) to describe interfaces to web services. UDDI is seen with SOAP and WSDL as one of the three foundation standards of web services. UDDI is an open industry initiative, enabling businesses to discover each other and define how

they interact over the Internet.

UDDI has two sections: A registry of all web service's metadata, including a pointer to the WSDL description of a service. A set of WSDL port type definitions for manipulating and searching that registry.

UDDI - ElementsA business or a company can register three types of information into a UDDI registry. This information is contained in three elements of UDDI.These three elements are:

White Pages, Yellow Pages, and Green Pages.

White Pages

Page 19

Page 20: karthikbandi906.files.wordpress.com · Web viewDec 03, 2017  · is a group of interrelated web development techniques used on the client-side to create asynchronous web applications

White pages contain: Basic information about the company and its business. Basic contact information including business name, address, contact phone number, etc. A Unique identifiers for the company tax IDs. This information allows others to discover your web

service based upon your business identification.Yellow Pages

Yellow pages contain more details about the company. They include descriptions of the kind of electronic capabilities the company can offer to anyone who wants to do business with it.

Yellow pages uses commonly accepted industrial categorization schemes, industry codes, product codes, business identification codes and the like to make it easier for companies to search through the listings and find exactly what they want.

Green PagesGreen pages contains technical information about a web service. A green page allows someone to bind to a Web service after it's been found. It includes:

The various interfaces The URL locations Discovery information and similar data required to find and run the Web service

Example

If the industry published an UDDI standard for flight rate checking and reservation, airlines could register their services into an UDDI directory.

Travel agencies could then search the UDDI directory to find the airline's reservation interface. When the interface is found, the travel agency can communicate with the service immediately

because it uses a well-defined reservation interface. (by WSDL)

Page 20