JSONP: technical details

What you do is this:

1. Create a web page

Create it just the way you would create any other page on your web site.

2. Include placeholders for the Universalis text

Here is an example of the sort of HTML you would use:

<p id="Universalis_Mass_G.text"></p>

The essential ingredient is the id attribute of the tag. This identifies which piece of the Universalis data should go in this tag. Here is a list of the names provided by Universalis for next Sunday (weekdays may have fewer readings):

To see this list, please turn Javascript ON.

The textual content of the <p> or <div> tag you provide does not matter. It will be replaced by the data obtained from Universalis.

3. Include a lump of Javascript

Please copy and paste it from the sample JSON page. This is because that page will always contain the latest version.

Our preferred place for this lump of Javascript is at the end of the <head> tag: that is, just before </head>. But you may have your own ideas, and they will probably be right too.

  1. Customize the Javascript so that it asks for the readings according to your own local calendar. Notes for customization are given as comments in the Javascript.
  2. The sample Javascript gives you the readings for today. If you want the readings for next Sunday instead, follow the instructions in the comments.
  3. Make sure you deal with the case of a visitor who has Javascript turned off. In the sample page, we make the "Today's Gospel" paragraph include a link to the Universalis Readings at Mass page. The link will be replaced by the text of the Gospel if Javascript is working. You can do something else if you like, but don't leave your visitor with a completely blank page!
  4. Include a link to the Universalis site, so that people know where all this is coming from. A link to the Readings at Mass page might be the most appropriate.
  5. The data sent to you from Universalis will include a copyright notice. Make sure it is visible somewhere!

Advanced customization

It is possible to have both today's readings and next Sunday's readings both on the same page, but you need to be a bit competent at Javascript to do it. We give a few comments in the sample page as a hint.

Technical details

What happens when the user views the web page is this:

  1. The anonymous function creates a <script> element whose code is loaded from the Universalis site.
  2. The Universalis site sends back a script with a single Javascript statement which calls your universalisCallback function, passing a JSON object which contains the readings for the day.
  3. The browser executes that Javascript statement, thus calling your universalisCallback function.
  4. Your universalisCallback function extracts the items it wants from the JSON object it has been given, and puts them into the appropriate parts of your web page.