• Like
  • Save
Os Pruett
Upcoming SlideShare
Loading in...5
×
Uploaded on

 

More in: Technology
  • 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
2,000
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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