If you take a close look, you'll see that I added a Simpy-based search here. (If you don't know Simpy, check it out.) It performs a fulltext search on all my simpy-fied links and entries of this blog, and displays the results inline (given that you use Firefox, Camino, or Opera; it won't work with Safari and is untested with IE).
Here is how I did it:
(1) I wrote a PHP-script, which calls Simpy's REST API:
simpy.php
Simple enough all this does is to extract the query, build the URL Simpy expects, and use Snoopy (which is a single file) for the call of Simpy. Simpy responds with a XML-document containing links matching the query.
(2) I added a form and a <ul>-element for the results to my Blogger template and included a JavaScript file:
html snippet
... include simpy.js somewhere in the head
<script type="text/javascript" src="http://path/to/simpy.js"></script>
...
<li>
<h2>Search
(powered by <a href="http://simpy.com/">Simpy</a>)
(firefox, opera, camino)</h2>
<form name="simpy" action="#" onSubmit="searchSimpy(); return false;">
<input name="q" size="19" value="" type="text">
<input name="submitsimpy" type="submit" value="go">
</form>
<ul id="results">
</ul>
</li>
The form just calls the function searchSimpy() of the JavaScript (simpy.js, see below) when being submitted. This method will display the results as <li>-elements.
(3) I wrote the JavaScript (by harvesting some AJAX tutorials out there), which glues the HTML-form and the PHP-script together:
simpy.js
searchSimpy() builds the URL the PHP-script expects and triggers makeRequest(), which performs the request. If there is a valid response, makeRequest() calls injectResults(), which extracts the links of Simpy's response and displays the results in the blog.
Please note that I don't know PHP at all, and that this was my first use of AJAX. If you've spotted obvious mistakes, let me know (especially the incompatibility with Safari is driving me crazy).
[ajax] [development] [simpy] - trackback
Here is how I did it:
(1) I wrote a PHP-script, which calls Simpy's REST API:
simpy.php
<?php
// Snoopy is an HTTP client in PHP
require_once('./Snoopy.class.inc');
// build the URL for Simpy's REST API
$url = 'http://www.simpy.com/simpy/api/rest/GetLinks.do?q=' . urlencode($_GET["q"]);
// call the URL via Snoopy
$client = new Snoopy();
$client->agent = "bbyt simpysearch (snoopy)";
$client->user = "yoursimpyusername";
$client->pass = "yoursimpypassword";
$client->fetch($url);
// echo Simpy's response
echo ($client->results);
?>
// Snoopy is an HTTP client in PHP
require_once('./Snoopy.class.inc');
// build the URL for Simpy's REST API
$url = 'http://www.simpy.com/simpy/api/rest/GetLinks.do?q=' . urlencode($_GET["q"]);
// call the URL via Snoopy
$client = new Snoopy();
$client->agent = "bbyt simpysearch (snoopy)";
$client->user = "yoursimpyusername";
$client->pass = "yoursimpypassword";
$client->fetch($url);
// echo Simpy's response
echo ($client->results);
?>
Simple enough all this does is to extract the query, build the URL Simpy expects, and use Snoopy (which is a single file) for the call of Simpy. Simpy responds with a XML-document containing links matching the query.
(2) I added a form and a <ul>-element for the results to my Blogger template and included a JavaScript file:
html snippet
... include simpy.js somewhere in the head
<script type="text/javascript" src="http://path/to/simpy.js"></script>
...
<li>
<h2>Search
(powered by <a href="http://simpy.com/">Simpy</a>)
(firefox, opera, camino)</h2>
<form name="simpy" action="#" onSubmit="searchSimpy(); return false;">
<input name="q" size="19" value="" type="text">
<input name="submitsimpy" type="submit" value="go">
</form>
<ul id="results">
</ul>
</li>
The form just calls the function searchSimpy() of the JavaScript (simpy.js, see below) when being submitted. This method will display the results as <li>-elements.
(3) I wrote the JavaScript (by harvesting some AJAX tutorials out there), which glues the HTML-form and the PHP-script together:
simpy.js
var http_request = false;
function searchSimpy() {
var searchterm = document.simpy.q.value;
var url = "http://path/to/simpy.php?q=" + searchterm;
makeRequest(url);
}
function makeRequest(url) {
http_request = false;
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
return false;
}
http_request.onreadystatechange = injectResults;
http_request.open('GET', url, true);
http_request.send(null);
}
function injectResults() {
if (http_request.readyState == 4) {
var select = document.getElementById("results");
select.innerHTML="";
if (http_request.status == 200) {
var links = http_request.responseXML.getElementsByTagName("link");
for (i = 0; i < links.length; i++) {
var list = document.createElement('li');
var link = document.createElement('a');
link.appendChild(document.createTextNode(links[i].getElementsByTagName('title')[0].firstChild.data.replace("Blog before you Think!: ","")));
link.setAttribute('href',links[i].getElementsByTagName('url')[0].firstChild.data);
list.appendChild(link);
select.appendChild(list);
}
if (links.length == 0) {
var list = document.createElement('li');
var link = document.createElement('a');
link.appendChild(document.createTextNode("no result"));
link.setAttribute('href','#');
list.appendChild(link);
select.appendChild(list);
}
} else {
var list = document.createElement('li');
var link = document.createElement('a');
link.appendChild(document.createTextNode("no result"));
link.setAttribute('href','#');
list.appendChild(link);
select.appendChild(list);
}
}
}
function searchSimpy() {
var searchterm = document.simpy.q.value;
var url = "http://path/to/simpy.php?q=" + searchterm;
makeRequest(url);
}
function makeRequest(url) {
http_request = false;
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
return false;
}
http_request.onreadystatechange = injectResults;
http_request.open('GET', url, true);
http_request.send(null);
}
function injectResults() {
if (http_request.readyState == 4) {
var select = document.getElementById("results");
select.innerHTML="";
if (http_request.status == 200) {
var links = http_request.responseXML.getElementsByTagName("link");
for (i = 0; i < links.length; i++) {
var list = document.createElement('li');
var link = document.createElement('a');
link.appendChild(document.createTextNode(links[i].getElementsByTagName('title')[0].firstChild.data.replace("Blog before you Think!: ","")));
link.setAttribute('href',links[i].getElementsByTagName('url')[0].firstChild.data);
list.appendChild(link);
select.appendChild(list);
}
if (links.length == 0) {
var list = document.createElement('li');
var link = document.createElement('a');
link.appendChild(document.createTextNode("no result"));
link.setAttribute('href','#');
list.appendChild(link);
select.appendChild(list);
}
} else {
var list = document.createElement('li');
var link = document.createElement('a');
link.appendChild(document.createTextNode("no result"));
link.setAttribute('href','#');
list.appendChild(link);
select.appendChild(list);
}
}
}
searchSimpy() builds the URL the PHP-script expects and triggers makeRequest(), which performs the request. If there is a valid response, makeRequest() calls injectResults(), which extracts the links of Simpy's response and displays the results in the blog.
Please note that I don't know PHP at all, and that this was my first use of AJAX. If you've spotted obvious mistakes, let me know (especially the incompatibility with Safari is driving me crazy).
[ajax] [development] [simpy] - trackback
posted by saurierduval | 10/05/2005 11:37:00 AM
