Os Pruett
Loading...
Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.
2 Favorites
-
jovewu, Software Developer at My own sweet home!,
favorited this 3 years ago
-
jovewu, Software Developer at My own sweet home!,
favorited this 3 years ago
Os Pruett - Presentation Transcript
- Ajax and Web Services Mark Pruett Dominion 1
- Ajax started as an acronym: Asynchronous Javascript and XML 2
- Web Services 3
- REST Representational State Transfer 4
- SOAP Simple Object Access Protocol 5
- Question: Are news feeds web services? 6
- A Simple Ajax / Web Service Example 7
- Program Specification \"Write an application that reads the answer to the question, \"What's the meaning of life, the universe, and everything\", stored on our server, and displays it in the user's web browser.\" 8
- Meaning of Life, the Universe, and Everything: 42 9
- Store the value 42 in a text file: MeaningOfLifeTheUniverseAndEverything.txt 10
- #!/usr/bin/perl use strict; my $ANSWERS_DIR = \"/var/www/html\"; # Get the question. my $question; my @parts = split (\"&\", $ENV{\"QUERY_STRING\"}); foreach my $lrval (@parts) { if ($lrval =~ /^question=(.+)$/) { $question = $1; $question =~ s/%([\\dA-Fa-f]{2})/pack (\"C\", hex ($1))/eg ; } } # Get the answer. my $answer = get_answer_to ($question); # Return the answer. print \"Content-type: text/html\\n\\n\"; print \"$answer\\n\"; sub get_answer_to { my ($question) = @_; my $answer = \"I didn't understand the question ($question).\"; if ($question eq \"What is the meaning of life, the universe, and everything?\") { open (my $IFILE, \"< $ANSWERS_DIR/MeaningOfLifeTheUniverseAndEverything.txt\"); $answer = <$IFILE>; close $IFILE; } return $answer; } 11
- <HTML> <HEAD> <TITLE>Question</TITLE> <SCRIPT language=\"Javascript\"> function get_answer () { var xmlhttp = create_xmlhttp (); var url = \"/cgi-bin/svc/answers.cgi?\"; var parms = \"question=What%20is%20the%20meaning%20of%20life,\" + \"%20the%20universe,%20and%20everything?\"; xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) { var span = document.getElementById (\"spanAnswer\"); span.innerHTML = xmlhttp.responseText; } } xmlhttp.open(\"GET\", url + parms, true); xmlhttp.send (null); } function create_xmlhttp () { // 25 lines omitted... } </SCRIPT> <BODY> <form id=\"frmQuestion\"> What is the meaning of life, the universe, and everything? <input type=\"button\" value=\"Get Answer\" onclick=\"get_answer();\"> <span id=\"spanAnswer\"> </span> </form> </BODY> </HTML> 12
- 13
- 14
- A Corporate Information Architecture Diagram 15
- 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
- Trade-Off #0 Ajax vs. Flex vs. Flash vs. Silverlight 17
- Trade-Off #1 Toolkits 18
- Toolkits: prototype ! Dojo ! GWT (Google) ! Atlas (Microsoft) ! Rico ! Zimbra ! DWR ! many, many, more ! 19
- Internet Explorer – Error on Page 20
- Internet Explorer – Script Error Dialog 21
- Trade-Off #2 SOAP vs. REST 22
- SOAP Simple Object Access Protocol 23
- A SOAP Envelope for Google Search API <?xml version=\"1.0\" encoding=\"UTF-8\"?> <SOAP-ENV:Envelope xmlns:SOAP-ENV=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:xsi=\"http://www.w3.org/1999/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/1999/XMLSchema\"> <SOAP-ENV:Body> <ns1:doGoogleSearch xmlns:ns1=\"urn:GoogleSearch\"> <key xsi:type=\"xsd:string\">YOUR_GOOGLE_KEY</key>' <q xsi:type=\"xsd:string\">ajax javascript</q> <start xsi:type=\"xsd:int\">0</start> <maxResults xsi:type=\"xsd:int\">5</maxResults> <filter xsi:type=\"xsd:boolean\">true</filter> <restrict xsi:type=\"xsd:string\"></restrict> <safeSearch xsi:type=\"xsd:boolean\">false</safeSearch> <lr xsi:type=\"xsd:string\"></lr> <ie xsi:type=\"xsd:string\">latin1</ie> <oe xsi:type=\"xsd:string\">latin1</oe> </ns1:doGoogleSearch> </SOAP-ENV:Body></SOAP-ENV:Envelope> 24
- Javascript Ajax SOAP Search (the hard way) function search () { var query = document.getElementById(\"txtSearch\").value; var soap_env = '<?xml version=\"1.0\" encoding=\"UTF-8\"?>' + \"<SOAP-ENV:Envelope\" ... + '<SOAP-ENV:Body>' + '<ns1:doGoogleSearch xmlns:ns1=\"urn:GoogleSearch\">' + '<key xsi:type=\"xsd:string\">MY_GOOGLE_KEY</key>' + '<q xsi:type=\"xsd:string\">' + query + '</q>' ... + '</ns1:doGoogleSearch>' + '</SOAP-ENV:Body></SOAP-ENV:Envelope>'; var ajax = new Ajax (\"/gsearch\", soap_env, \"POST\", function () { if (ajax.req.status == 200) { google2html (\"divOutput\", ajax.req.responseXML); } } ); // Google's SOAP server requires this header. ajax.setRequestHeader(\"Content-Type\", \"text/xml\"); // Send the request to the SOAP server. ajax.request (); } 25
- REST Representational State Transfer 26
- REST Uses HTTP GET and POST ! Also uses HTTP PUT and DELETE ! 27
- 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
- Trade-Off #3 Asynchronous vs. Synchronous 29
- Trade-Off #4 XML vs. JSON vs. CSV 30
- 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
- XML If you want the XMLHttpRequest responseXML property make sure your server uses the proper response header: Content-type: text/xml 32
- JSON { \"firstName\": \"John\", \"lastName\": \"Smith\", \"address\": { \"city\": \"New York, NY\", \"zipCode\": 10021, \"streetAddress\": \"21 2nd Street\" }, \"phoneNumbers\": [ \"212 732-1234\", \"646 123-4567\" ] } 33
- JSON var my_json; ... my_json = eval (\"(\" + http_request.responseText + \")\"); ... alert (my_json.firstName + \" \" + my_json.lastName); 34
- CSV \"John\",\"Smith\",\"21 2nd Street\",\"New York, NY\",10021, \"212 732-1234\",\"646 123-4567\" 35
- Trade-Off #5 XMLHttpRequest vs. The Script Tag Hack or What To Do About Proxies 36
- The Cross-Domain Problem 37
- 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
- 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
- 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 = \"http://api.search.yahoo.com/WebSearchService/V1/webSearch\"; my $APPID = \"Perl+API+install+test\"; # Append the Yahoo! Search appid to the parameter string. my $parameters = $ENV{QUERY_STRING} . \"&appid=$APPID\"; # Retrieve data from the Yahoo! server using the Perl LWP module. my $data = get \"$REAL_URL?$parameters\"; # 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 \"Content-type: text/xml\\n\\n\"; print $data; 40
- The Javascript SCRIPT tag hack <script language=\"Javascript\" src=\"http://random.server/somescript.js\"> 41
- 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 + \"&_callback=\" + obj_name + \".jsonHandler\"; 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(\"head\").item(0); var script = document.createElement (\"script\"); 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 = \"<b>\" + this.title + \"</b><br>\\n\";; for (var i=0; i < json.count; i++) { html += \"<a href='\" + json.value.items[i].link + \"'>\"; // Some formatting code deleted... } html += desc + \"<p>\\n\"; } div.innerHTML = html; } 42
- 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
- A Script Tag Hack JS Object for “Badging” Yahoo! Pipes Content ... <script language=\"Javascript\" src=\"ypipes_json.js\"></script> <script> var yp1; function init () { var url; url = \"http://pipes.yahoo.com/pipes/pipe.run?\" + \"textinput1=linux\" + \"&_id=lnmGDou72xGK6WDrZYQMOQ\" + \"&_run=1\" + \"&_render=json\"; yp1 = new YPipesJSON (\"O'Reilly on Linux\", url, \"target1\", \"yp1\"); yp1.requestJSON (); } </script> </head> <body onload=\"init();\"> <h3>Yahoo! Pipes JSON Script Tag Example</h3> <div id=\"target1\"> Loading... </div> </body> </html> 44
- A Script Tag Hack JS Object for “Badging” Yahoo! Pipes Content 45
- Conclusion(s) 46
More info about this document
© All Rights Reserved
Go to text version
- Total Views 1532
- 1530 on SlideShare
- Comments 0
- Favorites 2
- Downloads 0
Most viewed embeds
All embeds
- Upload Info
- Uploaded via SlideShare
- Uploaded as Adobe PDF
0 comments
Post a comment