UNIT-IIT AJAX AJAX AJAX is an acronyan for Asynchronous JavaScript and XML. AJAX is a new technique for cxeating bette, faster end interactive web applications with the help of IevaSciipt, DOM, XML, HTML, CSS ete. AJAX allows you to send and receive data asynchronously without reloading the entixe web page. Soit is fet. ‘AJAX allows you to send only importent information to the server not the entire page. So only valuable date fiom the client side iz routed to the server side. It makes your application interactive and faster “Ajax isthe most visble Rich Internet Application(RIA) technique so fer Where it is used? ‘There are too many web applications running on the web that ere using AJAX Technology. Some Gmail Face book: Twitter Google maps YouTube ete, Synchronous Vs. Asynchronous Application Before understanding AIAX, let’s understand classic web application model and AJAX Web spplicetion model ‘Synchronous (Classic Web-Application Model) ‘A synclronous request blocks the client until operation completesi.e. browser is not unresponsive. In such case, JavaScript Engine of the browser is blocked, full page refresh alent (53. ow ra seh). mt Brew a> >] server ee oops posse Peescng ime Asyou can see in the above image, full page is refteshed at request time and user is blocked until request completes. “Asynchronous (AJAX Web-Application Medel) ‘An asynchronous request doesn't block the client ie. brawser is responsive. At that time, user can perform other operations also. In such case, JaveScxipt Engine of the browser is not blocked. partial UI updatos Cas serverUNIT-IIL AJAX Asyyou can see in the above image, full page is not refreshed at request time and user gets response from the AJAX Engine Let's try to understand asynchronous communication by the image given below. AJAX Components ‘AJAX isnot a technology but group of inter-related technologies. AJAX Technologies includes HTML/XHTML end CSS DOM XML of JSONGavaScript Object Notation) XMLHttpRequest Object TaveScript + HTML/XHTML and CSS ‘These technologies are used for displaying content and style, Itis mainly used for presentation + DOM Itis used for dynamic display and interaction with date + XML or JSON(Javaserip t Object Notation) For carrying data to and from server, JSON is like XML but shost and fester then XML. + XMLHttpRequest Object For asynclronous communication between client and server. © JavaScript Itis used to bring above technologies together. Independently, itis used mainly for client- side validation. Understanding XMLHttpRequest It is the heast of AJAX technique. An object of XMLHttpRequest is used for esynchronous communication between client end server it provides a set of useful methods and properties thet are used to send HTTP Request to and retiieve deta from the web 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 seloadingit. ‘+ Methods of XMLHttpRequest object Method Description Vaid opentmethod, URL) ‘Opens the request specifying get or post method end ut. ‘vad openfmethod URL, async) | Same af above but specifies agymchronaus or not ‘void openfmethod URL, ‘Same ag above but specifies usemame async, username, password) and password. void send) ‘Sends GET request vod sending) ‘Sends POST request saRequeceaden(header,velus) | Tradds request headersUNIT-IIL AJAX Syntax of open() methed: xmlHittp opert“GET”,"conn php”.tna Oo which takes three attributes 1. AnHTTP method such as GET POST , or HEAD 2. The URL of the Server resource 3. A boolean Flag that indicates whether the request should be asynchronously(true) or synchronously( false) Properties of XMLHttpRequest Object: Property Descrip te Represents the date of the request Itrenges om 0 to 0 UNINITIALIZED — After creating XMLHttpRequest Object before calling open() method, readyStete 1 CONNECTION ESTABLISHED ~ open() is called ‘but send0 is not called. 2 REQUEST SENT- send) is called 3 PROCESSING - Downloading date; responseT ext holds the deta, 4 DONE - The operation is completed successfully. Tris called whenever readystafe attribute chenges. It must not onReadySteteChang® | 4. used with smchronous requests. TepouseText Retums response as TEXT TesponsiXML Retumns response as XML How AJAX Werks? ‘AJAX communicates with the server using XMLHttpRequest object. Let's understand the flow of AJAX with the following figure 1. User sends a request from the UI and e javascript call goes to XMLHttpRequest object 2. HTTP Requestis sent to the server by XMLHttpRequest object. 3. Server interacts with the database usingJSP, PHP, Serviet, ASP net etc 4. Dateisretrieved. 5. Server sends XML data or JSON deta to the XMLHttpRequest cellbackfunction 6 HTML endCSS datas displayed on the browser Browser Wed Senor uiirenes 2 HTP Rew | La Inplementaion (emt) ° D verse | 6) eos Tatas 8) | exraroe | 4)UNIT-IIL AJAX Intreduction to Web Services Technology keep on changing, users were forces to leern new application on continuous basis. ‘With internet, focus is shifting to-wards services based software. Users may access these services using wide range of devices such as PDAs, motile phones, desktop computers ete. Service ariented software development is possible using man known techniques such es COM, CORBA, RMI, JINI, RPC ete. some of them are capable of delivering services aver web and some or not. Most of these technologies uses particular protocols for communication and with no standardization. Web service is the concept of cresting services thet can be accessed over web. Most of these ‘What are Web Services? ‘Aweb services may be defines as: An application component accessible vie standard web protocols, It is like unit of application loge. It provides services and data to remote clients and other applications. Remote clients and application access web services with internet protocols. They use XML for deta transport end SOAP for using services. Accessing service is independent of implementation. ‘With component development model, web service must have following cheracteristics se Registration with lookup service + Public interface for client to invoke service ‘Web services should also process following charactetistics ‘It should use standard web protocols for communication + It should be accessible over web +P It should support loose coupling between uncoupled distributed systems Web services receive information from clients as messages, containing instructions about whet client wants, similar to method cells with parameters. These message delivered by web services are encoded using XML XML ensbled web services are interoperable with other web services, ‘Web Service Technologies: ‘Wide variety of technologies suppasts web services. Following technologies ere available for exestion of web services. These are vendor neutral technologies. They are sb Simple Object Access Protocal(SOAP) se Web Services Description L anguage(WSDL) “ UDDIUniversal Description Discovery and Integration) ‘Simple Object Access Protecel (SOAP): SOAP is a light weight end simple XML based protocol. It ensbles exchenge of structured and typed information on web by describing messaging formet for machine to machine communication. It also enables creation of web services based on open infrastructure SOAP is application communication protocol designed to communicate vielnternet SOAP is a format for sending end receiving messages, SOAP provides deta transport for Web services. SOAP is platform and lenguage-independent. SOAP enables client applications to easily connect to remote services and invoke remote methods. SOAP can be used in combination with variety of existing internet protocols and formats including HTTP, SMTP ete. ASOAP message is en ordinary XML document which consists of three pasts ‘ SOAP Envelope: defines what is in messege, who is the recipient, whether message is optional or mandatory + SOAP Enceding Rules: defines set of rules for exchenging instances of application defined data types ‘SOAP RPC Representation: defines convention for representing remote procedure callsUNIT-IIL AJAX ‘and response SOAP Message Structure ‘The following block depicts the general structure of a SOAP message ~ <2eml version="1 0"7> UNIT-IIL AJAX UNIT-IIL AJAX If-we are creating web service thet offered latest stock quotes, we need to creste WSDL file con server thet desciibes service. Client obtains copy of this file, understend contract, create SOAP request based on contract and dispatch request to server using HTTP post. Server validates the request, if found valid executes request. The result which is latest stock price for requested symbol is then retumed to client as SOAP response. ‘Typical SOAP message is shown below: IVORY. Brwelope xmins:IVORY="‘hitp://schemas.xmlsoap.or g/soap/erwelope IVORY encodingStyle "hitp://schemas.xmlsoap.or g/coaplencoding > ‘ DIS ‘The consumer of web service creates SOAP message as ebove, embeds it in HTTP POST equest end sends it to web service for processing. POST /StockQuote HTTP/I.1 Host wwe. stockquoteserver.com Content-Type: text/xml charset="uf-3 Content-Length: rowm SOAPAction. “Some- URI SOAP Message ‘The message now contains requested stock price. A typicel retuned SOAP message may look like following 34 5 Interoperability. ‘The mejor goal in design of SOAP was to allow for easy creation of interoperable distributed web services. Few details of SOAP specifications are open for interpretation, implementation may differ across different vendors SOAP message though it is conforment XML message, may not strictly follow SOAP specification. Implementations: SOAP technology was developed by DevelopMentor, IBM, Lotus, Microsoft ete. More than 50 vendors have curently implemented SOAP. Most popular implementations are by Apache which is open source java based implementation and by Microsoft in NET platform. SOAP specification hesUNIT-IIL AJAX been submitted to W3C, which is now working on new specifications called XMLP (KML Protocol) SOAP Messages with Attachments (SwA) SOAP can send message with an ettechment containing of another document or image ete. On Internet, GIF, JPEG data formats are treated as stenderds for image transmission Second iteration of SOAP specification allowed for attachments to be combined with SOAP message by using multipart MIME structwe. This multi part structure is celled as SOAP Message Package. This new specification was developed by HP and Microsoft Sample SOAP message attachment is shown here: MIME-Version: 1.0 Content-Type: Multpart/Related: boundary=MIME_botadary: type=text/xml, start= "” Content- Description: This is the optional message description. “MIME boundary Content-Type: text/xml charset=UTF-8 Content-Transfer- Encoding: Sbit Content-ID: ‘The root element is definitions as shown below.UNIT-IIL AJAX ? The name attribute is optionel and can serve as light weight form of documentation The rntoken represents name token that are qualified strings similer to CDATA, but cheracter usage is limited to letters, digits, underscores, colons, periods end dashes A targetNamespace may be specified by providing wi. The import tag may be used to associate namespace with document locations. Following code segment shows how declared namespace is associated with document location specified in import statement ? <- extensibility element -> ‘The weal: documentation tag is optional as in case of definitions. The xed type system may be usedto define typesin message. WSDL allows type systems to be added via extensibility element. * Message Element: It represents abstract definition of deta begin transmitted Syntax for message element * ‘* ? ‘* ? ? ? ? ? wsdl fault name=nmntoken”? message="‘qname”>? ? ‘Binding Element: It defines protocol to be used and specifies data format for operations end messages defined by pesticular portType. The full syntax for binding is givenbelow: * <? <-Extensibility element -->* wsdl: operation name= "‘rmtoken'">* ‘? <-Extensibility element -->* ? ? <-Extensibility element ->* ? <? <-Extensibility element -->* * ‘? <--Extensibility element ->* ‘The operation in WSDL file can be document oriented or remote proceduse call (RPC) criented The style atibute of element defines type of operation. If operation is document oriented, input and output messeges will consist of XML documents. IF operetion is RPC oriented, input message contains operations input parameters end output messege conteins result of opertion. + Port Element: It defines individual end point by specifying single addkess forbinding wsdl port name="rmtoken’ binding="“qname'> * <-Extenstbility element (1) -> ‘The name attribute defines unique name for port with cuzent WSDL document. The binding attribute refers to binding end extensibility element is used to specify addvess information for pttUNIT-IIL AJAX sb Service Element: it aggregates set of related ports. Each port specifies addvess forbinding * ? * ? <-Extensibility element -> ‘<--Extensibility element -> Universal Descrip tion, Discovery and Integration (UDDI) UDDI is an XML-based standard for describing, publishing and finding web UDDI stands for Universal Descrip tion, Discovery, and Integration. UDDI is a specification for a distibuted registry of web services UDDI is a pletform-independent, open framework. UDDI can communicate vie SOAP, CORBA, Java RMIProtocol, UDDI uses Web Service Definition L anguage(WSDL) to descsibe 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 twe sections: LA registry of all web service's metadata, including a pointer to the WSDL description of « A set of WSDL port type definitions for manipuleting and searching thet registry. ‘A business or @ company can register three types of information into « UDDI registry. This informationis contained in three elements of UDDI. These three elements are: OD White Pages, Yellow Pages, and 0 Green Pages. ‘White Pages ‘White pages contain: Basic information about the company and its business Basic contact informstion including business name, adéress, contact phone mamber, ete 1 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 vwithit Yellow pages uses commonly accepted industriel 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 whet they want. Green Pages Green pages conteins technical information about web service. A green page allows someone to bind to e Web service after it's been found It includes O The variousintesfeces OD The URL locetions Discovery information and similer deta required to find and run the Web service Implementation: This is global, public registry celled UDDI business registry. It is possible for individuals to set up private UDDI registries. The implementations for cresting private registries are available from IBM, Idoox etc, Microsoft hes developed UDDI SDK that allows visual basic programmer to write program code to interact with UDDI registry. The use of SDK greatly simplifies interaction with segistry and shields programmer from local level deteils of XML end SOAPUNIT-1 Introduction to HTML 1. Create a simple HTML page which demonstrates use of three types of lists? (Or)Explain the concept of list? Ans Lists: Lists is one of the most effective ways of structuring a website or its contents. HTML provides three types of lists, they are: Definition list i. Ordered list ii, Unordered list ii i, Ordered Lists: An ordered list has a number instead of bullet in front of each list item Ordered list must be enclosed within

...

tag. + Create an Ordered List using

.

Example:

1. Apple
2. Orange
3. Grapefruit
— Attribute values for type are: disc, circle or squareExample: + Apple + Orange + Pear De n list: These are different to the previous types in that they do not use list items to contain their members. + Create definition lists using

= Pairs of text and associated definition; text is in

tag, definition in

tag Example:

HTML

A markup language ..

css

Language used to ..

+ An Example which illustrate three list: "y

Apple
1. Orange
2. Grapefruit
3. Apple
4. Orange
5. Grapefruit

HTML

A markup lang..

Figure 1. Example for lists 2. Write a short note about CSS and its advantages? Ans. Definition: + Cascading Style Sheets (CSS) form the presentation layer of the user interface. = Structure (XHTML) — Behavior (Client-Side Scripting) — Presentation (CSS) + Tells the browser agent how the element is to be presented to the user. + A styleis simply a set of formatting instructions that can be applied to a piece of text. CSS Syntax: + ACSS rule has two main parts: a selector, and one or more declarations: + The selector is normally the HTML element you want to style. + Each declaration consists of a property and a value. + The property is the style attribute you want to change. Each property has avalue. Selector Declaration Declaration {color:blue; font-size: 12px; } Property Value Property Valueing HTML with CSS CSS was introduced together with HTML 4, to provide a better way to style HTML elements. CSS can be added to HTML in the following 3 ways: + Inline - using the style attribute in HTML elements + Internal - using the

All header 1 elements will be red

alll text in paragraphs will be green.

Output: External Style Sheet ‘An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the section: HTML Style Tags: Tag Description