Web Technology UNIT-5 AJAX: AJAX = Asynchronous JavaScript and XML. 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) 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 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 1 Web Technology UNIT-5 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. 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 2 Web Technology UNIT-5 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 TECHNOLOGIES USED IN AJAX: AJAX cannot work independently. It is used in combination with other technologies to create interactive WebPages. JavaScript Loosely typed scripting language. JavaScript function is called when an event occurs in a page. Glue for the whole AJAX operation. DOM API for accessing and manipulating structured documents. Represents the structure of XML and HTML documents. CSS Allows for a clear separation of the presentation style from the content and may be changed programmatically by JavaScript AJAX CLIENT SERVER ARCHITECTURE 3 Web Technology UNIT-5 The XMLHttpRequest Object The keystone of AJAX is the XMLHttpRequest object. All modern browsers support the XMLHttpRequest object. The XMLHttpRequest object can be used to exchange 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. 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. 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. Create an XMLHttpRequest Object All modern browsers (Chrome, Firefox, IE7+, Edge, Safari, Opera) have a built-in XMLHttpRequest object. Syntax for creating an XMLHttpRequest object: 4 Web Technology UNIT-5 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 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. setRequestHeader( label, value ) Adds a label/value pair to the HTTP header to be sent. 5 Web Technology UNIT-5 6 Web Technology UNIT-5 7 Web Technology UNIT-5 JQuery Callback Functions JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors. To prevent this, you can create a callback function. A callback function is executed after the current effect is finished. Typical syntax: $(selector).hide(speed,callback); Examples The example below has a callback parameter that is a function that will be executed after the hide effect is completed: The example below has no callback parameter, and the alert box will be displayed before the hide effect is completed: 8 Web Technology UNIT-5 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 applications. In this tutorial, you will learn what exactly web services are and why and how to use them. A web service is any piece of software that makes itself available over the internet and uses a standardized XML messaging system. XML is used to encode all communications to a web service. For example, a client invokes a web service by sending an XML message, then waits for a corresponding XML response. As all communication is in XML, web services are not tied to any one operating system or programming language-- Java can talk with Perl; Windows applications can talk with Unix applications. 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. These applications can be local, distributed, or web-based. Web services are built on top of open standards such as TCP/IP, HTTP, Java, HTML, and XML. Web services are XML-based information exchange systems that use the Internet for direct application-to-application interaction. These systems can include programs, objects, messages, or documents. A 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 computeris . This interoperability (e.g., between Java and Python, or Windows and Linux applications) due to the use of open standards. 9 Web Technology UNIT-5 Components of Web Services The 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 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. 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. 10 Web Technology UNIT-5 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. Web Service Roles There are three major roles within the web service architecture − Service Provider This is the provider of the web service. The service provider implements the service and makes it available on the Internet. Service Requestor 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. Service Registry This is a logically centralized directory of services. The registry provides a central place where developers can publish new services or find existing ones. It therefore serves as a centralized clearing house for companies and their services. WEB SERVICE COMMUNICATION MODELS: RPC-Based Communication Model The RPC-based communication model defines a request/response-based synchronous communication. When the client sends a request, the client waits until a response is sent back from the server before continuing any operation. Typical to implementing CORBA or RMI communication, the RPC-based Web services are tightly coupled and are implemented with remote objects to the client application. 11 Web Technology UNIT-5 Messaging-Based Communication Model The messaging-based communication model defines a loosely coupled and document-driven communication. The service requestor invoking a messaging-based service provider does not wait for a response. How Does a Web Service Work? A web service enables communication among various applications by using open standards such as HTML, XML, WSDL, and SOAP. A web service takes the help of − XML to tag the data SOAP to transfer a message WSDL to describe the availability of service. You can build a Java-based web service on Solaris that is accessible from your Visual Basic program that runs on Windows. You can also use C# to build new web services on Windows that can be invoked from your web application that is based on Java Server Pages (JSP) and runs on Linux. Client (e.g.