logging in or signing up Getting Hands On AJAX new chunsfire Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 239 Category: Science & Tech.. License: All Rights Reserved Like it (0) Dislike it (0) Added: March 03, 2010 This Presentation is Public Favorites: 1 Presentation Description No description available. Comments Posting comment... Premium member Presentation Transcript Getting Hands On AJAX : Getting Hands On AJAX Submitted To:- Prof. Abhinav Juneja H.O.D CSE Submitted By:- Chuni Lal Kukreja IT/06/512 Outline : Outline What you’re in for… What’s AJAX? Why AJAX? Look at AJAX example Issues related with AJAX What you’re in for… : What you’re in for… A discussion about an emerging web application framework An introduction to the essential elements of AJAX Walkthrough the code of a working AJAX example Issues related with AJAX What is AJAX? : What is AJAX? Asynchronous Javascript and XML Not all AJAX apps involve XML Combination of technologies HTML, CSS, DOM XML, XMLHttp, JavaScript Not a language but a methodology A method for building more responsive and interactive applications. Who are using AJAX ? : Who are using AJAX ? Why Do I Care About AJAX? : Why Do I Care About AJAX? Enables building Rich Internet Applications (RIA) Allows dynamic interaction on the Web Improves performance Real-time updates, without reloading the whole page No plug-ins required Open Source Work on Open Standards Platform independence (OS, server, browser, IDE) Compatible with HTML and existing web development technologies Job Trends : Job Trends AJAX = Asynchronous JavaScript and XML : AJAX = Asynchronous JavaScript and XML JavaScript: used to make a request to the web server. Asynchronous: means that the processing will continue on without waiting for the server side retrieval to complete. XML: may be used to receive the data returned from the web server. Traditional Web Interaction : Traditional Web Interaction How AJAX works : How AJAX works Click, Wait, Refresh : Click, Wait, Refresh Ajax-powered user experiences : Ajax-powered user experiences Ajax Value Proposition : Ajax Value Proposition More productive end-users, lower bandwidth, and strong ROI Time spent waiting for data to be transmitted. Time spent completing a particular task Bandwidth consumed for the entire task Client vs. Server Scripting : Client vs. Server Scripting Client scripting Web browser does all the work Server Scripting Web server does all the work AJAX leverages both client and server side scripting AJAX Web Interaction : AJAX Web Interaction What you don’t see Data reload happens in the background JavaScript queries the server to get the proper data without you knowing it Page updates without a screen “reload” AJAX uses the XMLHttpRequest object : AJAX uses the XMLHttpRequest object Our JavaScript communicates directly with the server, through the JavaScript XHR object. With the XHR object, a web page can make a request to, and get a response from a web server - without reloading the page. Walkthrough An Example : Walkthrough An Example Slide 21: We create an AJAX application from scratch. It will have a click button to fetch data from a server and display the information in a web page, without reloading the page itself.. HMTL Code : HMTL Code <html> <head> <script src="ajax.js"></script> </head> <body> <center> <h1>Hello I.T. FINAL YEAR </h1> <div id="test"> <h2>Click to let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc('test1.txt')">ClickMe</button> </center> </body> </html> JavaScript Code : JavaScript Code function loadXMLDoc(url) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET",url,true); xmlhttp.send(null); document.getElementById('test').innerHTML=xmlhttp.responeText; } create a XMLHttpRequest object Open the request object if IE5 or IE6 create an ActiveXObject Update page with the response from the server Send request to server Important Properties : Important Properties The XHR object has 3 important properties: The responseText property The readyState property The onreadystatechange property Slide 27: responseText - stores any data retrieved from a server. document.getElementById('test').innerHTML=xmlhttp.responseText Once we have sent a request to the server we are not sure about the request completion. For this we need to set the onreadystatechange property, to a function (or name of a function) to be executed after completion. In this onreadystatechange function we must test the readyState property before we can use the result of the server call. The readyState property : The readyState property The readyState property holds the status of the server's response. Possible values for the readyState property: State Description 0 The request is not initialized 1 The request has been set up 2 The request has been sent 3 The request is in process 4 The request is complete Make A Change : Make A Change Slide 30: xmlhttp.onreadystatechange=state_Change(); xmlhttp.open("GET",url,true); xmlhttp.send(null); function state_Change() { if(xmlhttp.readyState==4) { if (xmlhttp.status==200) { // 200 = "OK" document.getElementById(‘test').innerHTML=xmlhttp.responseText; } else { alert("Problem retrieving data:" + xmlhttp.statusText); } } } INSPECT OUR CODE : INSPECT OUR CODE XHR Object can Request any Data : XHR Object can Request any Data Requesting Text Files Requesting XML Files Requesting HTML, JSP, ASPX, or ASP Files Submitting Forms Potential Uses for AJAX : Potential Uses for AJAX Slide 38: Login Forms Auto-Complete Chat Rooms And Instant Messaging Voting and Rating Form Submission & Validation Slide 39: Lightboxes Using AJAX With Flash Drag and Drop Updating With User Content Potential Problems : Potential Problems Ajax reliance on JavaScript Pages can be difficult to bookmark Time lag Debugging is difficult Complexity of the code makes it difficult for web developers AJAX - Further References : AJAX - Further References Articles Ajax: A New Approach to Web Applications by Jesse James Garrett http://www.adaptivepath.com/publications/essays/archives/000385.php Ajax gives software a fresh look (from CNET News) http://beta.news.com.com/Ajax+gives+software+a+fresh+look/2100-1007_3-5886709.html? Weighing the Alternatives (from ajax info) http://www.ajaxinfo.com/default~viewart~8.htm Resources XMLHttpRequest & Ajax Based Applications (from Fiftyfoureleven.com)http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/ Foundations of Ajax by Ryan Asleson, Nathaniel T. SchuttaISBN: 1590595823 http://www.worldcatlibraries.org/wcpa/isbn/1590595823 Tutorials Getting Started with AJAX (from A List Apart) http://www.alistapart.com/articles/gettingstartedwithajax AJAX:Getting Started (from Mozilla Developer Center) http://developer.mozilla.org/en/docs/AJAX:Getting_Started Dynamic HTML and XML: The XMLHTTPRequest Object (from Apple Developer Connection) http://developer.apple.com/internet/webcontent/xmlhttpreq.html Mastering Ajax, Part 1: Introduction to Ajax (from IBM developerWorks)http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html?ca=dgr-wikiAJAXinto1 Slide 42: THANK YOU You do not have the permission to view this presentation. In order to view it, please contact the author of the presentation.
Getting Hands On AJAX new chunsfire Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 239 Category: Science & Tech.. License: All Rights Reserved Like it (0) Dislike it (0) Added: March 03, 2010 This Presentation is Public Favorites: 1 Presentation Description No description available. Comments Posting comment... Premium member Presentation Transcript Getting Hands On AJAX : Getting Hands On AJAX Submitted To:- Prof. Abhinav Juneja H.O.D CSE Submitted By:- Chuni Lal Kukreja IT/06/512 Outline : Outline What you’re in for… What’s AJAX? Why AJAX? Look at AJAX example Issues related with AJAX What you’re in for… : What you’re in for… A discussion about an emerging web application framework An introduction to the essential elements of AJAX Walkthrough the code of a working AJAX example Issues related with AJAX What is AJAX? : What is AJAX? Asynchronous Javascript and XML Not all AJAX apps involve XML Combination of technologies HTML, CSS, DOM XML, XMLHttp, JavaScript Not a language but a methodology A method for building more responsive and interactive applications. Who are using AJAX ? : Who are using AJAX ? Why Do I Care About AJAX? : Why Do I Care About AJAX? Enables building Rich Internet Applications (RIA) Allows dynamic interaction on the Web Improves performance Real-time updates, without reloading the whole page No plug-ins required Open Source Work on Open Standards Platform independence (OS, server, browser, IDE) Compatible with HTML and existing web development technologies Job Trends : Job Trends AJAX = Asynchronous JavaScript and XML : AJAX = Asynchronous JavaScript and XML JavaScript: used to make a request to the web server. Asynchronous: means that the processing will continue on without waiting for the server side retrieval to complete. XML: may be used to receive the data returned from the web server. Traditional Web Interaction : Traditional Web Interaction How AJAX works : How AJAX works Click, Wait, Refresh : Click, Wait, Refresh Ajax-powered user experiences : Ajax-powered user experiences Ajax Value Proposition : Ajax Value Proposition More productive end-users, lower bandwidth, and strong ROI Time spent waiting for data to be transmitted. Time spent completing a particular task Bandwidth consumed for the entire task Client vs. Server Scripting : Client vs. Server Scripting Client scripting Web browser does all the work Server Scripting Web server does all the work AJAX leverages both client and server side scripting AJAX Web Interaction : AJAX Web Interaction What you don’t see Data reload happens in the background JavaScript queries the server to get the proper data without you knowing it Page updates without a screen “reload” AJAX uses the XMLHttpRequest object : AJAX uses the XMLHttpRequest object Our JavaScript communicates directly with the server, through the JavaScript XHR object. With the XHR object, a web page can make a request to, and get a response from a web server - without reloading the page. Walkthrough An Example : Walkthrough An Example Slide 21: We create an AJAX application from scratch. It will have a click button to fetch data from a server and display the information in a web page, without reloading the page itself.. HMTL Code : HMTL Code <html> <head> <script src="ajax.js"></script> </head> <body> <center> <h1>Hello I.T. FINAL YEAR </h1> <div id="test"> <h2>Click to let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc('test1.txt')">ClickMe</button> </center> </body> </html> JavaScript Code : JavaScript Code function loadXMLDoc(url) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET",url,true); xmlhttp.send(null); document.getElementById('test').innerHTML=xmlhttp.responeText; } create a XMLHttpRequest object Open the request object if IE5 or IE6 create an ActiveXObject Update page with the response from the server Send request to server Important Properties : Important Properties The XHR object has 3 important properties: The responseText property The readyState property The onreadystatechange property Slide 27: responseText - stores any data retrieved from a server. document.getElementById('test').innerHTML=xmlhttp.responseText Once we have sent a request to the server we are not sure about the request completion. For this we need to set the onreadystatechange property, to a function (or name of a function) to be executed after completion. In this onreadystatechange function we must test the readyState property before we can use the result of the server call. The readyState property : The readyState property The readyState property holds the status of the server's response. Possible values for the readyState property: State Description 0 The request is not initialized 1 The request has been set up 2 The request has been sent 3 The request is in process 4 The request is complete Make A Change : Make A Change Slide 30: xmlhttp.onreadystatechange=state_Change(); xmlhttp.open("GET",url,true); xmlhttp.send(null); function state_Change() { if(xmlhttp.readyState==4) { if (xmlhttp.status==200) { // 200 = "OK" document.getElementById(‘test').innerHTML=xmlhttp.responseText; } else { alert("Problem retrieving data:" + xmlhttp.statusText); } } } INSPECT OUR CODE : INSPECT OUR CODE XHR Object can Request any Data : XHR Object can Request any Data Requesting Text Files Requesting XML Files Requesting HTML, JSP, ASPX, or ASP Files Submitting Forms Potential Uses for AJAX : Potential Uses for AJAX Slide 38: Login Forms Auto-Complete Chat Rooms And Instant Messaging Voting and Rating Form Submission & Validation Slide 39: Lightboxes Using AJAX With Flash Drag and Drop Updating With User Content Potential Problems : Potential Problems Ajax reliance on JavaScript Pages can be difficult to bookmark Time lag Debugging is difficult Complexity of the code makes it difficult for web developers AJAX - Further References : AJAX - Further References Articles Ajax: A New Approach to Web Applications by Jesse James Garrett http://www.adaptivepath.com/publications/essays/archives/000385.php Ajax gives software a fresh look (from CNET News) http://beta.news.com.com/Ajax+gives+software+a+fresh+look/2100-1007_3-5886709.html? Weighing the Alternatives (from ajax info) http://www.ajaxinfo.com/default~viewart~8.htm Resources XMLHttpRequest & Ajax Based Applications (from Fiftyfoureleven.com)http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/ Foundations of Ajax by Ryan Asleson, Nathaniel T. SchuttaISBN: 1590595823 http://www.worldcatlibraries.org/wcpa/isbn/1590595823 Tutorials Getting Started with AJAX (from A List Apart) http://www.alistapart.com/articles/gettingstartedwithajax AJAX:Getting Started (from Mozilla Developer Center) http://developer.mozilla.org/en/docs/AJAX:Getting_Started Dynamic HTML and XML: The XMLHTTPRequest Object (from Apple Developer Connection) http://developer.apple.com/internet/webcontent/xmlhttpreq.html Mastering Ajax, Part 1: Introduction to Ajax (from IBM developerWorks)http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html?ca=dgr-wikiAJAXinto1 Slide 42: THANK YOU