AJAX: From the Client-side with JavaScript, Back to the Server

Size: px

Start display at page:

Download "AJAX: From the Client-side with JavaScript, Back to the Server"

Brett Kelly
6 years ago
Views:

1 AJAX: From the Client-side with JavaScript, Back to the Server Asynchronous server calls and related technologies CS 370 SE Practicum, Cengiz Günay (Some slides courtesy of Eugene Agichtein and the Internets) CS 370, Günay (Emory) AJAX Spring / 16

2 Agenda Due 4/10: In-class demo and functional prototype deployed Have you met with Bob? Are you getting ready to deploy? Grading includes testing plan and feedback surveys. CS 370, Günay (Emory) AJAX Spring / 16

3 Agenda Due 4/10: In-class demo and functional prototype deployed Online classes: Today: Have you met with Bob? Are you getting ready to deploy? Grading includes testing plan and feedback surveys. You can still watch them, I'll accept late surveys until 4/8 (including for those of you who got no points) Clean your webapp with AJAX Learn all the lingo: JSON, SOAP, XML, REST CS 370, Günay (Emory) AJAX Spring / 16

4 Agenda Due 4/10: In-class demo and functional prototype deployed Online classes: Today: Have you met with Bob? Are you getting ready to deploy? Grading includes testing plan and feedback surveys. You can still watch them, I'll accept late surveys until 4/8 (including for those of you who got no points) Clean your webapp with AJAX Learn all the lingo: JSON, SOAP, XML, REST First, about next week's deliverable CS 370, Günay (Emory) AJAX Spring / 16

5 1st Functional Prototype: How to make the most out of it? You got something to work, so what? CS 370, Günay (Emory) AJAX Spring / 16

6 1st Functional Prototype: How to make the most out of it? You got something to work, so what? How to get feedback? CS 370, Günay (Emory) AJAX Spring / 16

7 1st Functional Prototype: How to make the most out of it? You got something to work, so what? How to get feedback? Know your clients: Who will use your service? Find them and market your demo to them Create a focus group? CS 370, Günay (Emory) AJAX Spring / 16

8 1st Functional Prototype: How to make the most out of it? You got something to work, so what? How to get feedback? Know your clients: Who will use your service? Find them and market your demo to them Create a focus group? How to get ecient feedback? CS 370, Günay (Emory) AJAX Spring / 16

9 1st Functional Prototype: How to make the most out of it? You got something to work, so what? How to get feedback? Know your clients: Who will use your service? Find them and market your demo to them Create a focus group? How to get ecient feedback? Prepare a guide for your testers (part of your testing plan) Prepare an exit survey (example questions: what's the most useful feature, what's most annoying, would you buy/use this,... ) Other ideas? (e.g., bug bounties) CS 370, Günay (Emory) AJAX Spring / 16

10 1st Functional Prototype: How to make the most out of it? You got something to work, so what? How to get feedback? Know your clients: Who will use your service? Find them and market your demo to them Create a focus group? How to get ecient feedback? Prepare a guide for your testers (part of your testing plan) Prepare an exit survey (example questions: what's the most useful feature, what's most annoying, would you buy/use this,... ) Other ideas? (e.g., bug bounties) Class grade will include post-deployment activities (see course website): reporting issues for others' and your own projects student votes for best project (extra) hacking into others' projects (extra) CS 370, Günay (Emory) AJAX Spring / 16

11 Entry/Exit Surveys Exit survey: Design Patterns and JavaScript Tell me briey about a design pattern you previously employed and found useful. Briey explain using JavaScript in your webapp as a design pattern. Entry survey: AJAX Who do you think invented AJAX? Netscape, Microsoft, or Google? (no cheating, just guess) What's the big deal? We can already run JS on client side. What's the signicance of AJAX? CS 370, Günay (Emory) AJAX Spring / 16

12 Brief History of AJAX s, websites are slow because of full page loads CS 370, Günay (Emory) AJAX Spring / 16

13 Brief History of AJAX s, websites are slow because of full page loads 1996, Microsoft Internet Explorer introduces the iframe tag CS 370, Günay (Emory) AJAX Spring / 16

14 Brief History of AJAX s, websites are slow because of full page loads 1996, Microsoft Internet Explorer introduces the iframe tag 1998, Microsoft Outlook Web Access team implemented the rst component XMLHTTP by client script. CS 370, Günay (Emory) AJAX Spring / 16

15 Brief History of AJAX s, websites are slow because of full page loads 1996, Microsoft Internet Explorer introduces the iframe tag 1998, Microsoft Outlook Web Access team implemented the rst component XMLHTTP by client script. 1999, Microsoft used its iframe technology to dynamically update the news stories and stock quotes on the default page for Internet Explorer, and created the XMLHTTP ActiveX control in Internet Explorer 5 CS 370, Günay (Emory) AJAX Spring / 16

16 Brief History of AJAX s, websites are slow because of full page loads 1996, Microsoft Internet Explorer introduces the iframe tag 1998, Microsoft Outlook Web Access team implemented the rst component XMLHTTP by client script. 1999, Microsoft used its iframe technology to dynamically update the news stories and stock quotes on the default page for Internet Explorer, and created the XMLHTTP ActiveX control in Internet Explorer 5 Adopted by Mozilla, Safari, Opera and other browsers as the XMLHttpRequest JavaScript object. CS 370, Günay (Emory) AJAX Spring / 16

17 Brief History of AJAX s, websites are slow because of full page loads 1996, Microsoft Internet Explorer introduces the iframe tag 1998, Microsoft Outlook Web Access team implemented the rst component XMLHTTP by client script. 1999, Microsoft used its iframe technology to dynamically update the news stories and stock quotes on the default page for Internet Explorer, and created the XMLHTTP ActiveX control in Internet Explorer 5 Adopted by Mozilla, Safari, Opera and other browsers as the XMLHttpRequest JavaScript object. AJAX still obscure until Outlook Web Access (2000) and Oddpost (2002), Google's cross browser Ajax with Gmail (2004) and Google Maps (2005). CS 370, Günay (Emory) AJAX Spring / 16

18 Brief History of AJAX s, websites are slow because of full page loads 1996, Microsoft Internet Explorer introduces the iframe tag 1998, Microsoft Outlook Web Access team implemented the rst component XMLHTTP by client script. 1999, Microsoft used its iframe technology to dynamically update the news stories and stock quotes on the default page for Internet Explorer, and created the XMLHTTP ActiveX control in Internet Explorer 5 Adopted by Mozilla, Safari, Opera and other browsers as the XMLHttpRequest JavaScript object. AJAX still obscure until Outlook Web Access (2000) and Oddpost (2002), Google's cross browser Ajax with Gmail (2004) and Google Maps (2005). What's the big deal? CS 370, Günay (Emory) AJAX Spring / 16

19 Scene I: Mac and PC dine at SnailScape Actors/Actresses: Clients: Mac & PC Server: The Last Apache Cook: MikeSQL

21 What's AJAX? AJAX: Asynchronous JavaScript And XML Wikipedia page W3Schools tutorial CS 370, Günay (Emory) AJAX Spring / 16

22 What's AJAX? AJAX: Asynchronous JavaScript And XML Wikipedia page W3Schools tutorial Why async? CS 370, Günay (Emory) AJAX Spring / 16

23 What's AJAX? AJAX: Asynchronous JavaScript And XML Wikipedia page W3Schools tutorial Why async? Doesn't make you wait, happens in parallel CS 370, Günay (Emory) AJAX Spring / 16

24 AJAX (Asynchronous Javascript + XML) Uses browser s XML support: DOM, XSLT XMLHttpRequest Google Maps is best-known AJAX application Agichtein for Emory CS171, Spring

25 AJAX Design Principles The browser hosts an application, not content Application code delivered to browser, mostly as JavaScript code The server delivers data, not content Data may be plain text, JavaScript fragments, or XML documents User/application interaction is continuous and fluid UI metaphors like drag-and-drop become possible This is real coding and requires discipline Significant developer responsibility to manage conversational state over entire web transaction Agichtein for Emory CS171, Spring

26 Basic AJAX process Agichtein for Emory CS171, Spring

27 Remember the document object model (DOM) Most commonly used: document.write() document.getelementbyid() W3Schools JavaScript HTML DOM tutorial Source of all known knowledge: Mozilla Developer Network DOM page, includes: DOM reference (e.g., document) CS 370, Günay (Emory) AJAX Spring / 16

28 Review: Changing a Div Content JavaScript method document.getelementbyid("xyz") var content = document.getelementbyid("h01"); alert(content.data); alert(content.innerhtml); Almost equivalent, innerhtml preferred How to modify a div? var content = document.getelementbyid("div01"); var newtext=prompt("what do you want to change?"); content.innerhtml = newtext; <html>... <body> <h1 id="h01">an HTML Document</h1> <div id="div01">we can change this, yes we can! </div> <div id="div02">we can change this one too! </div> </body> </html> 4/5/2012 2

29 Object Variables Variables can be assigned a object value Methods and attributes of the object are now accessible through the variable. Any changes to a variable's attributes will be reflected in the original object Example: var content = document.getelementbyid("div01"); content.innerhtml="ha ha!"; <html>... <body> <h1 id="h01">an HTML Document</h1> <div id="div01">we can change this, yes we can! </div> <div id="div02">we can change this one too! </div> </body> </html> 4/5/2012 3

30 Example AJAX W3Schools.com AJAX tutorial live examples (you can edit and run them!): First example Suggestion Database Sync vs. Async (all examples) CS 370, Günay (Emory) AJAX Spring / 16

31 XML? That's kind of lame, how about JSON? Need to parse XML? Isn't there an easier way? CS 370, Günay (Emory) AJAX Spring / 16

32 XML? That's kind of lame, how about JSON? Need to parse XML? Isn't there an easier way? Yes: JSON. What is it? CS 370, Günay (Emory) AJAX Spring / 16

33 XML? That's kind of lame, how about JSON? Need to parse XML? Isn't there an easier way? Yes: JSON. What is it? JSON: JavaScript Object Notation (Wikipedia) Basically, it's JS code Return text from the server that can be directly interpreted by browser! No parsing! CS 370, Günay (Emory) AJAX Spring / 16

34 JSON in Ajax HTML Delivery. JSON data is built into the page. <html>... <script> var data = {... JSONdata... }; Agichtein for Emory CS171, Spring

35 JSON in Ajax XMLHttpRequest Obtain responsetext Parse the responsetext responsedata = eval( '(' + responsetext + ')'); responsedata = responsetext.parsejson(); Agichtein for Emory CS171, Spring

36 Secret <iframe> JSON in Ajax Request data using form.submit to the <iframe> target. The server sends the JSON text embedded in a script in a document. <html><head><script> document.domain = 'penzance.com'; parent.deliver({... JSONtext... }); </script></head></html> The function deliver is passed the value. Agichtein for Emory CS171, Spring

37 JSON in Ajax Dynamic script tag hack. Create a script node. The srcurl makes the request. The server sends the JSON text embedded in a script. deliver({... JSONtext... }); The function deliver is passed the value. The dynamic script tag hack is insecure. Agichtein for Emory CS171, Spring

38 JSONRequest A new facility. Two way data interchange between any page and any server. Exempt from the Same Origin Policy. Campaign to make a standard feature of all browsers. Agichtein for Emory CS171, Spring

39 Yahoo Web Service with JSON Tutorial/Howto: Can use nice interface widgets: Agichtein for Emory CS171, Spring

40 We have AJAX to bleach the oors, but now I need to take a shower. Do you have SOAP? Enough with the stupid household cleaner acronyms! CS 370, Günay (Emory) AJAX Spring / 16

41 We have AJAX to bleach the oors, but now I need to take a shower. Do you have SOAP? Enough with the stupid household cleaner acronyms! Calling functions remotely: SOAP: Simple Object Access Protocol XML-RPC: Remote Procedure Call through XML JSON-RPC: Replace XML with JSON (much simpler!) CS 370, Günay (Emory) AJAX Spring / 16

42 We have AJAX to bleach the oors, but now I need to take a shower. Do you have SOAP? Enough with the stupid household cleaner acronyms! Calling functions remotely: SOAP: Simple Object Access Protocol XML-RPC: Remote Procedure Call through XML JSON-RPC: Replace XML with JSON (much simpler!) Example of a JSON-RPC 2.0 request and response: --> {"jsonrpc": "2.0", "method": "subtract", "params": [42, 23], "id": 1} <-- {"jsonrpc": "2.0", "result": 19, "id": 1} CS 370, Günay (Emory) AJAX Spring / 16

43 AJAX made simple: the jquery way CS 370, Günay (Emory) AJAX Spring / 16

44 Web Hacking II: Function calls, AJAX, and JSON Emory Hackathon next weekend! CS 370, Günay (Emory) AJAX Spring / 16

45 Web Hacking II: Function calls, AJAX, and JSON Emory Hackathon next weekend! Let's hack their website. :) Breakpoints Debugging CS 370, Günay (Emory) AJAX Spring / 16

46 Web Hacking II: Function calls, AJAX, and JSON Emory Hackathon next weekend! Let's hack their website. :) Breakpoints Debugging Make those client-side JS hacks permanent: URL-triggered browser scripts (e.g., GreaseMonkey, UserScripts.org, GreaseSpot, My BlackBoard Optimizer) CS 370, Günay (Emory) AJAX Spring / 16

47 Web Hacking II: Function calls, AJAX, and JSON Emory Hackathon next weekend! Let's hack their website. :) Breakpoints Debugging Make those client-side JS hacks permanent: URL-triggered browser scripts (e.g., GreaseMonkey, UserScripts.org, GreaseSpot, My BlackBoard Optimizer) Let's hack Facebook CS 370, Günay (Emory) AJAX Spring / 16

48 Web Hacking II: Function calls, AJAX, and JSON Emory Hackathon next weekend! Let's hack their website. :) Breakpoints Debugging Make those client-side JS hacks permanent: URL-triggered browser scripts (e.g., GreaseMonkey, UserScripts.org, GreaseSpot, My BlackBoard Optimizer) Let's hack Facebook Uhh, it's hard CS 370, Günay (Emory) AJAX Spring / 16

49 Stop telling us about 2005! What's happening now? restfb: Facebook API Why is it called restfb? CS 370, Günay (Emory) AJAX Spring / 16

50 Stop telling us about 2005! What's happening now? restfb: Facebook API Why is it called restfb? REST: Representational state transfer client-server stateless cacheable layered CS 370, Günay (Emory) AJAX Spring / 16

51 Stop telling us about 2005! What's happening now? restfb: Facebook API Why is it called restfb? REST: Representational state transfer client-server stateless cacheable layered What else is happening with JavaScript? Converting from other languages: python, ruby, etc CS 370, Günay (Emory) AJAX Spring / 16

52 Upcoming episode Tuesday: Testing Scrum now! (don't forget to write down meeting minutes, including tasks assigned) CS 370, Günay (Emory) AJAX Spring / 16

The Web: Concepts and Technology

The Web: Concepts and Technology Web Services Feb 10 1 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009 Today s Plan Javascript wrap-up: p Objects Functions Loops