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
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;", $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
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
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
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
