Downloaded 33 times
Uploaded byHilary Mason
JWU Guest Talk: JavaScript and AJAX
The document discusses how JavaScript, AJAX, jQuery, and other technologies enable dynamic and interactive functionality on web pages without reloading. It covers how the Document Object Model (DOM) allows JavaScript to access and modify elements, and how events and asynchronous requests via XMLHttpRequest (XHR) enable complicated behaviors and communication between the browser and server. jQuery is presented as a library that abstracts away cross-browser differences and simplifies tasks like DOM manipulation and event handling.
JWU Guest Talk: JavaScript and AJAX
- 1. JavaScript, AJAX, jQuery,Code, OH MY! Or: How cool web stuff works
- 2. The Web ThatWas Web Page Web Page CGI
- 3. No reloading OMG LMAO!
- 4.
- 5. <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=ISO-8859-1" /> < title >I'm a web page</ title > </ head > < body > < div id = "top" >This is the top.</ div > </ body > </ html >
- 6. The Document ObjectModel (DOM) XML Document Object Model
- 7.
- 8. Referencing an XHTMLelement < div id = "top" >This is the top.</ div > … reference the element by unique ID document. getElementById( "top" ) … this returns the selected element in the parse tree. DOM Element Properties
- 9. How to LoseFriends <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=ISO-8859-1" /> < title >I'm a web page</ title > < script type= "text/javascript"> function element() { alert( document. getElementById( "top").innerHTML); } </ script> </ head > < body onload = "element()" > < div id = "top" >This is the top.</ div > </ body > </ html >
- 10. Manipulating Element ContentsInnerHTML! DOM Manipulation!
- 11. Events <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=ISO-8859-1" /> < title >I'm also a web page</ title > < script type= "text/javascript"> function update() { document. getElementById( "contents").innerHTML = "You clicked!"; } </ script> </ head > < body > < div id = "contents" >I'm here when you initially load.</ div > < input type = "button" value = "Click Me" onclick = "update()" /> </ body > </ html > Try Me
- 12.
- 13. XMLHttpRequest() XMLHttpRequest (XHR)transfers data between a client (browser) and a server over background HTTP requests.
- 14. Using XMLHttpRequest …ina cross-browser friendly way var request = new XMLHttpRequest(); request. open( "GET", url, false); request. send( null); if(!request. getResponseHeader( "Date")) { var cached = request; request = new XMLHttpRequest(); var ifModifiedSince = cached. getResponseHeader( "Last-Modified"); ifModifiedSince = (ifModifiedSince) ? ifModifiedSince : new Date( 0); // January 1, 1970 request. open( "GET", url, false); request. setRequestHeader( "If-Modified-Since", ifModifiedSince); request. send( ""); if(request. status == 304) { request = cached; } }
- 15. JavaScript Libraries Agood library will abstract away the ugly details of cross-platform code. Prototype (the first major lib) jQuery (write less, do more) Script.aculo.us (the prettiest) YUL! (the yahoo!iest) Etc…
- 16. jQuery < html> < head > < script type= "text/javascript" src= "jquery.js"></ script> <script type= "text/javascript"> // Your code goes here </ script> </ head > < body > < a href = "http://jquery.com/" >jQuery</ a > </ body > </ html >
- 17. jQuery Selector Syntax$(‘#elementid’) $(‘.classname’) $(‘#content a.link’)
- 18. Events $(‘#top’).click(); $(‘#top’).click(function(){ // do stuff when #top is clicked });
- 19. Document Ready Not“onload”! $(document).ready(function(){ // Your code here });
- 20. Local Example <html > < head > < script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></ script> <script type= "text/javascript"> $( document).ready( function() { $( "#content"). click( function() { alert( "hi"); }); }); </ script> </ head > < body > < div id = "content" >Did anyone go to Denny's today?</ div > </ body > </ html >
- 21. … explore… Thankyou!