<html>
<head>
<title> SPARQL JavaScript </title>
<script>
/**
* Author: Mark Wallace
*
* This function asynchronously issues a SPARQL query to a
* SPARQL endpoint, and invokes the callback function with the JSON
* Format [1] results.
*
* Refs:
* [1] http://www.w3.org/TR/sparql11-results-json/
*/
function sparqlQueryJson(queryStr, endpoint, callback, isDebug) {
var querypart = "query=" + escape(queryStr);
// Get our HTTP request object.
var xmlhttp = null;
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if(window.ActiveXObject) {
// Code for older versions of IE, like IE6 and before.
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('Perhaps your browser does not support XMLHttpRequests?');
}
// Set up a POST with JSON result format.
xmlhttp.open('POST', endpoint, true); // GET can have caching probs, so POST
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.setRequestHeader("Accept", "application/sparql-results+json");
// Set up callback to get the response asynchronously.
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
// Do something with the results
if(isDebug) alert(xmlhttp.responseText);
callback(xmlhttp.responseText);
} else {
// Some kind of error occurred.
alert("Sparql query error: " + xmlhttp.status + " "
+ xmlhttp.responseText);
}
}
};
// Send the query to the endpoint.
xmlhttp.send(querypart);
// Done; now just wait for the callback to be called.
};
</script>
</head>
<body>
<script>
var endpoint = "http://dbpedia.org/sparql";
var query = "select * {?s ?p ?o} limit 5" ;
// Define a callback function to receive the SPARQL JSON result.
function myCallback(str) {
// Convert result to JSON
var jsonObj = eval('(' + str + ')');
// Build up a table of results.
var result = " <table border='2' cellpadding='9'>" ;
for(var i = 0; i< jsonObj.results.bindings.length; i++) {
result += " <tr> <td>" + jsonObj.results.bindings[i].s.value;
result += " </td><td>" + jsonObj.results.bindings[i].p.value;
result += " </td><td>" + jsonObj.results.bindings[i].o.value;
result += " </td></tr>";
}
result += "</table>" ;
document.getElementById("results").innerHTML = result;
}
// Make the query.
sparqlQueryJson(query, endpoint, myCallback, true);
</script>
<div id="results">
It may take a few moments for the info to be displayed here...
<br/><br/>
Run me in Internet Explorer or I get Cross Domain HTTP Request errors!
</div>
</body>
</html>
In the head section, the code defines a function, sparqlQueryJson(), that takes a SPARQL query string, a SPARQL endpoint URL, and a function to call when the result is ready. (The optional fourth parameter will show you the raw JSON SPARQL results in an alert window if you set it to true.) In the body section, the code specifies the query string, endpoint, and callback function, and then calls sparqlQueryJson() to issue the request.Put the above code in a file called sparql.htm, and give it a try in your browser!
A few things to note:
- Most browsers won't let you run this code because it makes a cross-domain request (calls a service on a different host than the HTML was served from). Use IE and if/when prompted, allow the content.
- I use an asynchronous XMLHttpRequest to perform the query to the SPARQL endpoint.
- It would be best to put the sparqlQueryJson() function in a separate file to make it reusable from multiple pages. I put everything in one file here just to simplify the example slightly.
