Your SlideShare is downloading. ×
0
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Os Pruett
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Os Pruett

2,080

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,080
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Ajax and Web Services Mark Pruett Dominion 1
  2. Ajax started as an acronym: Asynchronous Javascript and XML 2
  3. Web Services 3
  4. REST Representational State Transfer 4
  5. SOAP Simple Object Access Protocol 5
  6. Question: Are news feeds web services? 6
  7. A Simple Ajax / Web Service Example 7
  8. Program Specification quot;Write an application that reads the answer to the question, quot;What's the meaning of life, the universe, and everythingquot;, stored on our server, and displays it in the user's web browser.quot; 8
  9. Meaning of Life, the Universe, and Everything: 42 9
  10. Store the value 42 in a text file: MeaningOfLifeTheUniverseAndEverything.txt 10
  11. #!/usr/bin/perl use strict; my $ANSWERS_DIR = quot;/var/www/htmlquot;; # Get the question. my $question; my @parts = split (quot;&quot;, $ENV{quot;QUERY_STRINGquot;}); foreach my $lrval (@parts) { if ($lrval =~ /^question=(.+)$/) { $question = $1; $question =~ s/%([dA-Fa-f]{2})/pack (quot;Cquot;, hex ($1))/eg ; } } # Get the answer. my $answer = get_answer_to ($question); # Return the answer. print quot;Content-type: text/htmlnnquot;; print quot;$answernquot;; sub get_answer_to { my ($question) = @_; my $answer = quot;I didn't understand the question ($question).quot;; if ($question eq quot;What is the meaning of life, the universe, and everything?quot;) { open (my $IFILE, quot;< $ANSWERS_DIR/MeaningOfLifeTheUniverseAndEverything.txtquot;); $answer = <$IFILE>; close $IFILE; } return $answer; } 11
  12. <HTML> <HEAD> <TITLE>Question</TITLE> <SCRIPT language=quot;Javascriptquot;> function get_answer () { var xmlhttp = create_xmlhttp (); var url = quot;/cgi-bin/svc/answers.cgi?quot;; var parms = quot;question=What%20is%20the%20meaning%20of%20life,quot; + quot;%20the%20universe,%20and%20everything?quot;; xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) { var span = document.getElementById (quot;spanAnswerquot;); span.innerHTML = xmlhttp.responseText; } } xmlhttp.open(quot;GETquot;, url + parms, true); xmlhttp.send (null); } function create_xmlhttp () { // 25 lines omitted... } </SCRIPT> <BODY> <form id=quot;frmQuestionquot;> What is the meaning of life, the universe, and everything? <input type=quot;buttonquot; value=quot;Get Answerquot; onclick=quot;get_answer();quot;> <span id=quot;spanAnswerquot;> </span> </form> </BODY> </HTML> 12
  13. 13
  14. 14
  15. A Corporate Information Architecture Diagram 15
  16. The Evolution of Ajax Use Send back a chunk of HTML – dump into DIV tag ! Send back delimited text – parse it and dynamically ! update the page Send back XML – parse dynamically ! Some people move to JSON ! 16
  17. Trade-Off #0 Ajax vs. Flex vs. Flash vs. Silverlight 17
  18. Trade-Off #1 Toolkits 18
  19. Toolkits: prototype ! Dojo ! GWT (Google) ! Atlas (Microsoft) ! Rico ! Zimbra ! DWR ! many, many, more ! 19
  20. Internet Explorer – Error on Page 20
  21. Internet Explorer – Script Error Dialog 21
  22. Trade-Off #2 SOAP vs. REST 22
  23. SOAP Simple Object Access Protocol 23
  24. A SOAP Envelope for Google Search API <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> <SOAP-ENV:Envelope xmlns:SOAP-ENV=quot;http://schemas.xmlsoap.org/soap/envelope/quot; xmlns:xsi=quot;http://www.w3.org/1999/XMLSchema-instancequot; xmlns:xsd=quot;http://www.w3.org/1999/XMLSchemaquot;> <SOAP-ENV:Body> <ns1:doGoogleSearch xmlns:ns1=quot;urn:GoogleSearchquot;> <key xsi:type=quot;xsd:stringquot;>YOUR_GOOGLE_KEY</key>' <q xsi:type=quot;xsd:stringquot;>ajax javascript</q> <start xsi:type=quot;xsd:intquot;>0</start> <maxResults xsi:type=quot;xsd:intquot;>5</maxResults> <filter xsi:type=quot;xsd:booleanquot;>true</filter> <restrict xsi:type=quot;xsd:stringquot;></restrict> <safeSearch xsi:type=quot;xsd:booleanquot;>false</safeSearch> <lr xsi:type=quot;xsd:stringquot;></lr> <ie xsi:type=quot;xsd:stringquot;>latin1</ie> <oe xsi:type=quot;xsd:stringquot;>latin1</oe> </ns1:doGoogleSearch> </SOAP-ENV:Body></SOAP-ENV:Envelope> 24
  25. Javascript Ajax SOAP Search (the hard way) function search () { var query = document.getElementById(quot;txtSearchquot;).value; var soap_env = '<?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>' + quot;<SOAP-ENV:Envelopequot; ... + '<SOAP-ENV:Body>' + '<ns1:doGoogleSearch xmlns:ns1=quot;urn:GoogleSearchquot;>' + '<key xsi:type=quot;xsd:stringquot;>MY_GOOGLE_KEY</key>' + '<q xsi:type=quot;xsd:stringquot;>' + query + '</q>' ... + '</ns1:doGoogleSearch>' + '</SOAP-ENV:Body></SOAP-ENV:Envelope>'; var ajax = new Ajax (quot;/gsearchquot;, soap_env, quot;POSTquot;, function () { if (ajax.req.status == 200) { google2html (quot;divOutputquot;, ajax.req.responseXML); } } ); // Google's SOAP server requires this header. ajax.setRequestHeader(quot;Content-Typequot;, quot;text/xmlquot;); // Send the request to the SOAP server. ajax.request (); } 25
  26. REST Representational State Transfer 26
  27. REST Uses HTTP GET and POST ! Also uses HTTP PUT and DELETE ! 27
  28. REST HTTP Method HTTP Status Codes REST Web Service Operation GET 200 OK Retrieve a representation of a 410 Gone resource from the server. PUT 200 OK Create a new resource on the server. 400 Bad Request POST 200 OK Update an existing resource. 410 Gone DELETE 200 OK Delete and existing service. 204 No Content 28
  29. Trade-Off #3 Asynchronous vs. Synchronous 29
  30. Trade-Off #4 XML vs. JSON vs. CSV 30
  31. XML <person> <firstName>John</firstName> <lastName>Smith</lastName> <address> <city>New York, NY</city> <zipCode>10021</zipCode> <streetAddress>21 2nd Street</streetAddress> </address> <phoneNumbers> <number>212 732-1234</number> <number>646 123-4567</number> </phoneNumbers> </person> 31
  32. XML If you want the XMLHttpRequest responseXML property make sure your server uses the proper response header: Content-type: text/xml 32
  33. JSON { quot;firstNamequot;: quot;Johnquot;, quot;lastNamequot;: quot;Smithquot;, quot;addressquot;: { quot;cityquot;: quot;New York, NYquot;, quot;zipCodequot;: 10021, quot;streetAddressquot;: quot;21 2nd Streetquot; }, quot;phoneNumbersquot;: [ quot;212 732-1234quot;, quot;646 123-4567quot; ] } 33
  34. JSON var my_json; ... my_json = eval (quot;(quot; + http_request.responseText + quot;)quot;); ... alert (my_json.firstName + quot; quot; + my_json.lastName); 34
  35. CSV quot;Johnquot;,quot;Smithquot;,quot;21 2nd Streetquot;,quot;New York, NYquot;,10021, quot;212 732-1234quot;,quot;646 123-4567quot; 35
  36. Trade-Off #5 XMLHttpRequest vs. The Script Tag Hack or What To Do About Proxies 36
  37. The Cross-Domain Problem 37
  38. Apache ProxyPass ProxyPass pattern substitution ProxyPassReverse pattern substitution ProxyPass /ysearch/ http://api.search.yahoo.com/WebSearchService/V1/ ProxyPassReverse /ysearch/ http://api.search.yahoo.com/WebSearchService/V1/ 38
  39. Apache ProxyPass Let's say your application is running on http://www.example.com. With these two proxy rules in place, any request to: http://www.example.com/ysearch/ is automatically redirected to: http://api.search.yahoo.com/WebSearchService/V1/ 39
  40. A CGI Script as Proxy #!/usr/bin/perl #--------------------------------------------------------- # A simple, specific, proxy as a standalone server script. #--------------------------------------------------------- use strict; use LWP::Simple; # Constants my $REAL_URL = quot;http://api.search.yahoo.com/WebSearchService/V1/webSearchquot;; my $APPID = quot;Perl+API+install+testquot;; # Append the Yahoo! Search appid to the parameter string. my $parameters = $ENV{QUERY_STRING} . quot;&appid=$APPIDquot;; # Retrieve data from the Yahoo! server using the Perl LWP module. my $data = get quot;$REAL_URL?$parametersquot;; # Output the HTTP header followed by the retrieved XML. # Anything a server CGI script sends to standard output # is sent back to the browser. print quot;Content-type: text/xmlnnquot;; print $data; 40
  41. The Javascript SCRIPT tag hack <script language=quot;Javascriptquot; src=quot;http://random.server/somescript.jsquot;> 41
  42. A Script Tag Hack JS Object for “Badging” Yahoo! Pipes Content // The YPipesJSON constructor function YPipesJSON (title, ypipes_url, div_name, obj_name) { this.title = title; this.url = ypipes_url + quot;&_callback=quot; + obj_name + quot;.jsonHandlerquot;; this.div_name = div_name; } // The requestJSON method: builds script tag - launches our request to the server. YPipesJSON.prototype.requestJSON = function () { var head = document.getElementsByTagName(quot;headquot;).item(0); var script = document.createElement (quot;scriptquot;); script.src = this.url; head.appendChild (script); } // The jsonHandler method: this is our callback function. // It's called when the JSON is returned to our browser from Yahoo!. YPipesJSON.prototype.jsonHandler = function (json) { var div = document.getElementById (this.div_name); var desc_limit = 200; var html = quot;<b>quot; + this.title + quot;</b><br>nquot;;; for (var i=0; i < json.count; i++) { html += quot;<a href='quot; + json.value.items[i].link + quot;'>quot;; // Some formatting code deleted... } html += desc + quot;<p>nquot;; } div.innerHTML = html; } 42
  43. A Script Tag Hack JS Object for “Badging” Yahoo! Pipes Content http://pipes.yahoo.com/pipes/pipe.run? textinput1=linux &_id=lnmGDou72xGK6WDrZYQMOQ &_run=1 &_render=json &_callback=yp1.jsonHandler 43
  44. A Script Tag Hack JS Object for “Badging” Yahoo! Pipes Content ... <script language=quot;Javascriptquot; src=quot;ypipes_json.jsquot;></script> <script> var yp1; function init () { var url; url = quot;http://pipes.yahoo.com/pipes/pipe.run?quot; + quot;textinput1=linuxquot; + quot;&_id=lnmGDou72xGK6WDrZYQMOQquot; + quot;&_run=1quot; + quot;&_render=jsonquot;; yp1 = new YPipesJSON (quot;O'Reilly on Linuxquot;, url, quot;target1quot;, quot;yp1quot;); yp1.requestJSON (); } </script> </head> <body onload=quot;init();quot;> <h3>Yahoo! Pipes JSON Script Tag Example</h3> <div id=quot;target1quot;> Loading... </div> </body> </html> 44
  45. A Script Tag Hack JS Object for “Badging” Yahoo! Pipes Content 45
  46. Conclusion(s) 46

×