Wikipedia on a web page

DBpedia is the structured information of Wikipedia that is available on the Web. Many web pages can be enriched with information from DBpedia, given that web page authors know how to engineer calls to DBpedia, unpack the payload they receive and integrate the payload into their web pages.

Presented below are three Greasemonkey scripts that make calls to DBpedia using mime types of (1) text/html, (2) XML and (3) JSON (JavaScript Simple Object Notation), unpack these payloads and present the contents within a JavaScript alert function. Web page authors are invited to use these examples as scripting clichés in building their own applications.

The SPARQL request

SPARQL is an RDF query language. These scripts make XMLHttpRequests to the public SPARQL endpoint provided by DBpedia ("http://dbpedia.org/sparql"). The same SPARQL query is used with both scripts: it asks for the abstract of civil engineering in the English language:

"SELECT ?abstract WHERE 
   { 
     { <http://dbpedia.org/resource/Civil_engineering> 
       <http://dbpedia.org/property/abstract>  
       ?abstract 
       FILTER langMatches( lang(?abstract), 'en') }   
   }";

Greasemonkey and the Firefox browser

Greasemonkey supports an XMLHttpRequest call to any server, which facilitates building an AJAX-type web page applications that use DBpedia.

Use a current version of Firefox and add Greasemonkey. Then point your Firefox browser at either of the Greasemonkey scripts below. Your browser will recognize them as Greasemonkey scripts and load them, then merely refresh your web page to see the effect.

At this moment the scripts are written to fire on any web page, and not to fire on my homepage. I recommend that you change these settings.

// @include  *                                        // Change this to target your page
// @exclude  http://faculty.washington.edu/tabrooks   // Change this to exempt specific pages

Script #1: Using mime type text/html and XPath

Declaring a mime type of 'text/html' gives a payload structured as an HTML table element with two identical table data <td> elements. The payload is structured like this:

<table class="sparql" border="1">
  <tr>
    <th>abstract</th>
  </tr>
  <tr>
    <td>Civil engineering is ... in 1905.</td>
  </tr>
  <tr>
    <td>Civil engineering is ... in 1905.</td>
  </tr>
</table>

With XPath you can easily target the first <td> element: ".//td[1]". To facilitate the use of XPath, a new HTML element is created and the payload becomes its innerHTML content. The document evaluate function produces a nodelist. SnapshotItem(0) is the single node in this nodelist and its firstchild.nodeValue is the textual content of the <td> element.

var mashPage = document.createElement("div");
mashPage.innerHTML = response.responseText;			
			
var myNodeList;
myNodeList = document.evaluate(".//td[1]",mashPage,null,XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,null);
		
alert(myNodeList.snapshotItem(0).firstChild.nodeValue);	

The script: "myXMLDemo.user.js"

Script #2: Using mime type XML and XPath

Declaring the mime type "application/sparql-results+xml" gives a payload structured as XML. The payload is structured like this:

<sparql 
  xsi:schemalocation="http://www.w3.org/2001/sw/DataAccess/rf1/result2.xsd" 
  xmlns="http://www.w3.org/2005/sparql-results#" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  
 <variable name="abstract">
  <results>
    <result>
      <binding name="abstract">
        <literal xml:lang="en">Civil engineering is ... in 1905.</literal>
      </binding>
    </result>
    <result>
      <binding name="abstract">
        <literal xml:lang="en">Civil engineering is ... in 1905.</literal>
      </binding>
    </result>
  </results>
</variable>
</sparql>

A new XML document is created with the new XML(string) function where the string argument is "responseDetails.responseText". A new HTML element is created and the new XML document becomes its innerHTML. The document.evaluate() function is used to direct an XPath into the HTML element.

var myNewXMLDoc = new XML(responseDetails.responseText);
			  		  
var newElement = document.createElement("div");
			  
newElement.innerHTML = myNewXMLDoc;			  		 
    
var headings = document.evaluate('//result', newElement, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,null); 
       
alert(headings.snapshotItem(0).textContent);

It is possible to use complex XPaths into the XML document:

	
// Target the attribute of the ancestor element "variable"
var complexXPath = "//result/ancestor::variable/@name";

var headings = document.evaluate(complexXPath, newElement, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,null); 

The script: "sparqlXML.user.js"

Script #3: Using mime type JSON and unpacking the JSON object

Declaring the mime type "application/sparql-results+json" gives a payload structured as JSON (JavaScript Simple Object Notation). The payload is structured like this:

{ "head": { "link": [], "vars": ["abstract"] },
  "results": { "distinct": false, "ordered": true, "bindings": [
    { "abstract": { "type": "literal", "xml:lang": "en", "value": "Civil engineering is ... in 1905." }},
    { "abstract": { "type": "literal", "xml:lang": "en", "value": "Civil engineering is ... in 1905." }} ] } }

The JavaScript eval() function can translate the responseDetails.responseText payload into an active JSON object. Note the hack of placing an extra set of parentheses inside the eval() function to avoid confusing the JavaScript engine. The JSON object is structured as a results object with an array of bindings objects. Indexing into the bindings array can focus on the first one and the value of its abstract.

var jsonData = eval( '(' + responseDetails.responseText + ')' );			
	  	  
alert(jsonData.results.bindings[0].abstract.value); 

The script: "myDemo.user.js"