• Save
Os Pruett
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,460
On Slideshare
3,457
From Embeds
3
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 3

http://jisi.dreamblog.jp 2
http://www.slideshare.net 1

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