- Simon's Space

This article is printer friendly.

ESV Bible Text via AJAX

Date Stamp:: 19 August 2006
Topic(s):: How to, Tutorial
Permanent Link
Comments?

In response to the Toongabbie Anglican Church site being linked from the ESV Bible Blog, I received several requests to explain how the Bible Talk pages loaded the ESV text using “AJAX”.

The following is a brief summary. I am no expert in this, and simply share what I have done.

I cannot provide support for the following, requests for support may be ignored. Sorry.

Demo

Show: 1 John 1

Retrieving text

Using code from the ESV API page, the “bibletext.php” file takes the Bible reference passed to it and retrieves the ESV text.

<?php
$passage = urlencode($_GET['passage']);
$key = "IP";
$options = "audio-format=flash";
$url ="http://www.esvapi.org/v2/rest/passageQuery?key=$key&$options&passage=$passage";
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$response = curl_exec($ch);
curl_close($ch);
print $response;
?>

Note: I’ve left in “$options”, however, it is not required here because the default audio-format is flash.

Load Javascript

In the head of the HTML document, load the javascript.

<script type="text/javascript" src="http://www.example.com/directory/btajax.js"></script>

Javascript

I named the javascript btajax.js. I cannot quote a source for this code, but from a quick Google search it seems pretty standard.

var ajax=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
ajax = false;
}
}
@end @*/
if (!ajax && typeof XMLHttpRequest!='undefined') { ajax = new 
XMLHttpRequest(); }
function getMyHTML(serverPage, objID) {
if((serverPage.indexOf("http://www.example.com/")!=0)) return;
var obj = document.getElementById(objID);
obj.innerHTML = "<div style='background: #FFFFCC;'><h2>Bible 
Passage</h2><p>Loading...</p></div>";
ajax.open("GET", serverPage);
ajax.onreadystatechange = function() {
if (ajax.readyState  == 4 && ajax.status  == 200) { 
obj.innerHTML = ajax.responseText;
}
}
ajax.send(null);
}

Place the Bible text

Put this in your HTML page where you want the text to appear.

<div id="bibletext"></div>

Make sure you grab the CSS provided on the ESV API page, and copy it to your CSS file (or better create a separate CSS file and link to it in addition to your normal CSS file). This CSS file provides some basic formatting to the ESV text, e.g. superscript for verse numbers.

Trigger the text to load

A link that triggers the text to appear. This link includes the address of the bibletext.php file created earlier. You would replace <?php print $passage;?> with the output of your CMS.

On this page, for the demo, I have set the variable $passage to 1 John 1.

The link also includes the id of the div we created earlier, “bibletext”.

<p>Bible Passage: <a href="javascript://" onclick="getMyHTML('http://www.example.com/directory/bibletext.php?passage=<?php print $passage;?>','bibletext');">John 3:16</a></p>

For users who have Javascript turned off, this link will do nothing. So, change the href in the above to point to an actual page that will show the text (e.g. the ESV page, or your own Bible search page). You also need to add “return false;” to the “onclick”. For example, this code takes the user to the ESV site directly if Javascript is turned off:

<p>Bible Passage: <a href="http://www.gnpcb.org/esv/search/?q=<?php print $passage;?>" onclick="getMyHTML('http://www.example.com/directory/bibletext.php?passage=<?php print $passage;?>','bibletext');return false;">John 3:16</a></p>

On the Toongabbie Anglican Church web-site, if Javascript is turned off, the link will take them to the Bible search result on our web-site for the reference.

History

14 Oct 07 – updated to use the new domain for the ESV Web Service.
9 Sep 06 – updated “Trigger the text to load” to consider case where user has Javascript turned off.

Articles