Making AJAX Easy with jQuery

Making AJAX Easy with jQuery Chris Renner Health Systems Analyst Programmer & Informatics Manager VUMC Office of Grants & Contracts Management October 18, 2010

Agenda • What is AJAX? • What is jQuery? • Demonstration/Tutorial • Resources • Q&A

What is AJAX? • Asynchronous JavaScript And XML • A bundle of technologies used together to enhance user experience by altering displayed information on a web page without a page refresh. • Employs HTML, CSS and JavaScript on client (browser) side, plus any one of a number of server-side technologies (e.g. PHP, ASP, etc).

AJAX visual model

What is jQuery? • A “JavaScript Library” that simplifies HTML and document traversing, event handling, animating, and AJAX interactions. • A short hand for writing JavaScript with fewer lines of code do to the same things. • “Write less, do more” • Most widely adopted (Google, Dell, BofA, Digg, WordPress, Drupal, others), in use by 1/3 of top 10,000 websites.

jQuery Syntax Examples Get value by ID - JavaScript: varfoo = document.getElementById(‘bar’).value; - jQuery: varfoo = $(‘#bar’).val(); Daisy Chaining $(“#myDiv”).addClass(“myClass”).css(‘font-weight’, ‘bold’).fade(‘slow);

XMLHTTP Request with JavaScript varreq; function loadXMLDoc(url) { req= false; // branch for native XMLHttpRequest object if(window.XMLHttpRequest && !(window.ActiveXObject)) { try { req= new XMLHttpRequest(); } catch(e) { req= false; } // branch for IE/Windows ActiveX version } else if(window.ActiveXObject) { try { req= new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { req= new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { req= false; } } } if(req) { req.onreadystatechange= processReqChange; req.open("GET", url, true); req.send(""); } }

XMLHTTP Request with jQuery $.ajax({ type: "POST", url: "some.php", data: “city=Nashville", success: function(msg){ alert( "Data Saved: " + msg ); } });

Tutorial/Demo • AJAX auto-complete

Resources • Beginning Ajax with PHP, Lee Babin, Apress, Amazon id: 1590596676 • http://www.jQuery.com • W3chools AJAX tutorial: http://www.w3schools.com/Ajax/Default.Asp

Demo Q&A • Any questions?

Find Me Phone: 2-7404 Email: chris.renner@vanderbilt.edu Dept Website: http://www.mc.vanderbilt.edu/gcm Web Development Blog: http://www.chrisrenner.com

Making AJAX Easy with jQuery