The document provides an introduction to AJAX and web services. It discusses AJAX-enabled rich internet applications and how they differ from traditional web applications. It describes how AJAX uses asynchronous JavaScript and XML to improve performance by separating client-side interaction from server communication. The document also covers the XMLHttpRequest object and its properties/methods. Finally, it gives an overview of jQuery, including how to add jQuery to web pages, common jQuery features and syntax.
The document provides an introduction to AJAX and web services. It discusses AJAX-enabled rich internet applications and how they differ from traditional web applications. It describes how AJAX uses asynchronous JavaScript and XML to improve performance by separating client-side interaction from server communication. The document also covers the XMLHttpRequest object and its properties/methods. Finally, it gives an overview of jQuery, including how to add jQuery to web pages, common jQuery features and syntax.
The document provides an introduction to AJAX and web services. It discusses AJAX-enabled rich internet applications and how they differ from traditional web applications. It describes how AJAX uses asynchronous JavaScript and XML to improve performance by separating client-side interaction from server communication. The document also covers the XMLHttpRequest object and its properties/methods. Finally, it gives an overview of jQuery, including how to add jQuery to web pages, common jQuery features and syntax.
SERVICES UNIT V : INTRODUCTION TO AJAX and WEB SERVICES
Introduction to Ajax , Ajax Client Server Architecture,
XMLhttpRequest Object , Call Back Methods- Introduction to Ajax , Ajax Client Server Architecture, XMLhttpRequest Object , Call Back Methods- Creating, Publishing ,Testing and Describing a Web services(WSDL) , Consuming a web service- Database Driven web service from an application. AJAX-Enabled Rich Internet Applications Introduction
• RIAs –web applications that approximate the
look, feel and usability of desktop applications. • Two key attributes-Performance and rich GUI. • Get performance from Ajax(Asynchronous JavaScript and XML),uses more responsive client- side scripting. • Performance is achieved by separating client-side user interaction and server communication, and run them in parallel, reducing the delays of server-side processing normally experienced by the user. • Traditional web applications use XHTML forms to build simple and thin GUIs • RIA use Rich GUI with Ajax toolkits and with RIA environments such as Adobe’s Flex, Microsoft’s Silver light and Java Server Faces • The client-side of Ajax applications is written in XHTML and CSS, and uses JavaScript to add functionality to the user interface. • XML is used to structure the data passed between the server and the client. [use JSON (JavaScript Object Notation) also for this purpose.] • The Ajax component that manages interaction with the server is usually implemented with JavaScript’s XMLHttpRequest object — commonly abbreviated as XHR. • The server processing can be implemented using any server-side technology, such as PHP, ASP.NET, Java Server Faces and Ruby on Rails. Traditional Web Applications vs. Ajax Applications Traditional Web Applications
• Step 1: User fills in the form’s fields, then submits the
form. • Step 2:The browser generates a request to the server, which receives the request and processes it. • Step 3:The server generates and sends a response containing the exact page that the browser will render. • Step 4:browser loads the new page and temporarily makes the browser window blank. (Note that the client waits for the server to respond and reloads the entire page with the data from the response (Step 4)). • While such a synchronous request is being processed on the server, the user cannot interact with the client web page. • If the user interacts with and submits another form, the process begins again (Steps 5–8). Traditional Web Application Ajax Web Applications
• Ajax applications add a layer between the client and
the server to manage communication between the two • Step 1: When the user interacts with the page, the client creates an XMLHttpRequest object to manage a request • Step 2: The XMLHttpRequest object sends the request to the server (Step 2) and awaits the response. The requests are asynchronous, so the user can continue interacting with the application on the client-side while the server processes the earlier request concurrently. • Steps 3 and 4:Other user interactions could result in additional requests to the server • Once the server responds to the original request (Step 5), the XMLHttpRequest object which issued the request, calls a client-side function to process the data returned by the server. • This function—known as a callback function— uses partial page updates (Step 6) to display the data in the existing web page without reloading the entire page. • At the same time, the server may be responding to the second request (Step 7) and the client-side may be starting to do another partial page update (Step 8) • The callback function updates only a designated part of the page. Such partial page updates help make web applications more responsive, making them feel more like desktop applications • The non-Ajax web application does not load a new page while the user interacts with it. XMLHttpRequest Object Properties and Methods Methods jquery
• jQuery is a JavaScript Library.
• jQuery greatly simplifies JavaScript programming. • jQuery is easy to learn. Jquery features
• jQuery is a lightweight, "write less, do more", JavaScript library.
• The purpose of jQuery is to make it much easier to use JavaScript on your website. • jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. • jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. • The jQuery library contains the following features: HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX Utilities Adding jQuery to Your Web Pages
• There are several ways to start using jQuery on your web
site. • You can Download the jQuery library from jQuery.com Include jQuery from a CDN, like Google • The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section): • <head> <script src="jquery-1.10.2.min.js"></script> </head> Alternatives to Downloading
• If you don't want to download and host jQuery
yourself, you can include it from a CDN (Content Delivery Network). • Both Google and Microsoft host jQuery. • To use jQuery from Google or Microsoft, use one of the following: • <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10. 2/jquery.min.js"> </script> </head> jQuery Syntax
• The jQuery syntax is tailor made for selecting HTML
elements and performing some action on the element(s). • Basic syntax is: $(selector).action() A $ sign to define/access jQuery A (selector) to "query (or find)" HTML elements A jQuery action() to be performed on the element(s) • Examples: $(this).hide() - hides the current element. $("p").hide() - hides all <p> elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test". • The focus() method attaches an event handler function to an HTML form field. • The function is executed when the form field gets focus and change its background color • $("input").focus(function(){ $(this).css("background-color","#cccccc"); }); References
• “Internet and world wide web ,how to
program” by Deitel and Deitel chapter 15 • For jquery,”w3schools.com”