1 / 14

Unit 6

Unit 6 . Introduction to AJAX. I. Overview of Ajax:.

todd
Download Presentation

Unit 6

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Unit 6 Introduction to AJAX

  2. I. Overview of Ajax: • Making Web applications look and feel like desktop applications is what this book is all about, that’s what Ajax does. Although Web development is getting more and more popular, users still experience the nasty part of having to click a button, wait until a new page loads, click another button, wait until a new page loads, and so on.

  3. I. Overview of Ajax (cont..) • That’s where Ajax comes in. With Ajax, you communicate with the server behind the scenes, grab the data you want and display it instantly in a Web page — no page refreshes needed, no flickering in the browser, no waiting. That’s a big deal, because at last it lets Web applications start to look like desktop applications. With today’s faster connections, grabbing data from the server is usually a snap, so Web software can have the same look and feel of software on the user’s desktop. • And that, in a nutshell, is going to be the future of Web programming — now the applications in your browser can look and work just like the applications installed on your computer. No wonder Ajax is the hottest topic to come along in years.

  4. II. What is AJAX? • AJAX = Asynchronous JavaScript and XML. • AJAX is a technique for creating fast and dynamic web pages. • AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

  5. III. How AJAX work ?

  6. III. How AJAX work ? (cont..) • JavaScript is the scripting language that nearly all browsers support, which will let you fetch data behind the scenes, and XML is the popular language that lets you store data in an easy format. Here’s an overview of how Ajax works: • 1. In the browser, you write code in JavaScript that can fetch data from the server as needed. • 2. When more data is needed from the server, the JavaScript uses a special item supported by browsers, the XMLHttpRequest object, to send a request to the server behind the scenes — without causing a page refresh. The JavaScript in the browser doesn’t have to stop everything to wait for that data to come back from the server. It can wait for the data in the background and spring into action when the data does appear (that’s called asynchronous data retrieval). • 3. The data that comes back from the server can be XML, or just plain text if you \prefer. The JavaScript code in the browser can read that data and put it to work immediately.

  7. IV. Why use AJAX? • Building a web application that employs AJAX is more difficult than building it the classic way. You need to go to extra lengths to make sure that the user experience is and remains enjoyable, and not plain annoying. With all the hype going around AJAX, a lot of applications that do not have a real need for it have been built.

  8. IV. Why use AJAX? (cont..) The Benefits of AJAX • To help you decide whether AJAX is for you or not, here are some of the advantages it has over classic web development techniques: • The interface is much more responsive, as explained before, because only a small part of the page is transferred at a time. The user has the feeling that changes are instantaneous.

  9. IV. Why use AJAX? (cont..) 2. In a classic web application, when the web server sends a web page to the browser, it can use multiple connection threads to speed up delivery. However, this happens for content only – what is between the <body> tags. All script and CSS files linked in the page's <head> section are transferred using only one connection thread, which diminishes performance. With AJAX, you only have to load the basic scripts and CSS files, and request the rest as content, through multiple connections.

  10. IV. Why use AJAX? (cont..) 3. Waiting time is reduced – when the visitor submits a form, they no longer have to wait for the entire page to be rebuilt and re-transmitted by the server. Instead, only the relevant content changes, and in non-critical cases, the visitor can still work while the data is being submitted. 4. If a page section encounters an error, other sections are not affected (if not logically linked) and the data already entered by the user is not lost. This way, the application fails graciously, without causing head-aches for the users.

  11. IV. Why use AJAX? (cont..) 5. Traffic to and from the server is reduced considerably – because you do not have to send the entire page content (CSS, images, static sections), the bandwidth usage is most likely to decrease.

  12. 1. All about Javascript: • Understanding the Ajax and JavaScript connection • Writing JavaScript • Handling browser events • Writing JavaScript functions • Storing data in variables • Using JavaScript loops • Connecting JavaScript to buttons • Working with text fields from JavaScript

  13. Example <html> <head> <title>Ajax at work</title> • <script language = "javascript"> • varXMLHttpRequestObject = false; • if (window.XMLHttpRequest) { • XMLHttpRequestObject = new XMLHttpRequest(); • } else if (window.ActiveXObject) { • XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); • } • function getData(dataSource, divID) • { • if(XMLHttpRequestObject) { • varobj = document.getElementById(divID); • XMLHttpRequestObject.open("GET", dataSource); • XMLHttpRequestObject.onreadystatechange = function() • {

  14. Example (cont..) • if (XMLHttpRequestObject.readyState == 4 && • XMLHttpRequestObject.status == 200) { • obj.innerHTML = XMLHttpRequestObject.responseText; • } • } • XMLHttpRequestObject.send(null); • } • } • </script> • </head> • <body> • <H1>Fetching data with Ajax</H1> • <form> • <input type = "button" value = "Display Message" • onclick = "getData('data.txt', 'targetDiv')"> • </form> • <div id="targetDiv"> • <p>The fetched data will go here.</p> • </div> • </body> • </html>

More Related