Client-side SFX integration with jQuery-Ajax (YQL)

Tags: 00code00, ajax, javascript, jquery, opac, sfx
Last Updated: Jul 20, 2010 13:35

Description
While Javascript XSS queries are forbidden by default, we use client-side scripting in two ways: piping requests through a cgi proxy script, and using the Yahoo YQL API (returns the SFX response as JSONP-X, which overrides the browser XSS restrictions). This page describes the latter option (YQL).
Author: Daniel Zimmel
Additional author(s):
Institution: Max Planck Gesellschaft
Year: 2010
License: BSD style
Short description: Use, modification and distribution of the code are permitted provided the copyright notice, list of conditions and disclaimer appear in all related material.
Link to terms: [Detailed license terms]
Skill required for using this code:
intermediate

State
Programming language
Software requirements
Screen captures
Author(s) homepage
Download
Working example
Using the following interfaces
Installation instructions
TO DO list
Known issues
Comments

State

Stable

Programming language

Javascript

Software requirements

jquery.js (http://www.jquery.com/), third-party plugins (see code).
Makes use of the Yahoo YQL API (http://developer.yahoo.com/yql/)

Screen captures

Place your screen shot here...

Author(s) homepage

http://aleph.mpg.de/F

Download

see code below

Working example

http://aleph.mpg.de/F?func=direct&doc_number=000000323&local_base=rdg01&con_lng=eng

Using the following interfaces

*SFX-API
*Yahoo YQL API

Installation instructions

Make the following third-party scripts available on your Aleph server:

http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/ (jquery.xdomainajax.js)
Change the Yahoo query from "select * from html" to "select * from xml" (SFX response is XML)

http://outwestmedia.com/jquery-plugins/xmldom/ (for IE bug) (jquery.xmldom-1.0.js)

For Jqueries, you will need CSS-Ids in your full view - we use the built-in MARC/MAB-Field plus contents variables in full-999-body:

<span id="$0100">$0200</span>

and direct-head/full-set-head(-nobor):

<table id="vollanzeige" cellspacing=2 border=0 width=100%>

Place the following code into full-set-tail/direct-tail.
You will need to customize the Jquery-Id-Selectors to the headings in col.8 in edit_doc_999 – they are used by Aleph in full view as internal variable $0200. Change "my.sfx.server" to your SFX server url.

<!-- SFX -->
<!-- SFX-API via Jquery/Ajax -->
<!-- jQuery-Plugin xdomainajax (XSS via Yahoo YQL/JSONP-X)  -->
<!-- http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/ -->
<script type="text/javascript" src="/mpg-js/jquery.xdomainajax.js"></script>
<!-- jQuery-Plugin xmlDOM (IE liest XML sonst als String, nicht als DOM!)  -->
<!-- http://outwestmedia.com/jquery-plugins/xmldom/ -->
<script type="text/javascript" src="/mpg-js/jquery.xmldom-1.0.js"></script>
<script type="text/javascript">
// SFX-Vars:
var isJournal = jQuery("#Materialart:contains('ISS')").text(); // ISSBD and ISSUE only, see headings in edit_doc_999
var issn = jQuery("#ISSN").text();
jQuery("#Materialart").parents("tr").remove(); // fully remove tr with material type (only used for getting the var above)

// query only if journal, otherwise do not do anything:
if (isJournal || issn) {

var sid = ""; // fill in your SFX-SID
var ip = ""; // fill in your IP
var titelGesamt = jQuery("span[id='Series title']").text();
var titelKat = jQuery("#Title").text();
if (titelGesamt) {
var title = encodeURIComponent(titelGesamt.replace(/\.&nbsp;/g,"")); // encodeURIComponent: essential f. Jquery
} else if (titelKat) {
var title = encodeURIComponent(titelKat.replace(/\.&nbsp;/g,"")); // encodeURIComponent: essential f. Jquery
} else { var title = "";}

var jahr = document.getElementById("Year");
if (jahr) {
var date = jahr.innerHTML;
} else {
var date = ""; }

var sfxIcon = '<img src="&icon_path/sfx_local.gif" style="border:none"/>';

// comment in, if you find it useful (make sure you have the CSS-Ids defined somewhere in your full view)
//var sfxIMG_getFullTxt = "http://my.sfx.server/sfx_local?sid="+sid+"&genre=journal&title="+title+"&issn="+issn+"&date="+date+"&__service_type=getFullTxt&__response_type=image-large";
//var sfxIMG_getSelectedFullTxt = "http://my.sfx.server/sfx_local?sid="+sid+"&genre=journal&title="+title+"&issn="+issn+"&date="+date+"&__service_type=getSelectedFullTxt&__response_type=image-large";
//jQuery("#sfxgetFullTxt").attr("src", sfxIMG_getFullTxt);
//jQuery("#sfxgetSelectedFullTxt").attr("src", sfxIMG_getSelectedFullTxt);
//jQuery("#sfx_block").attr("style", "display:inline");

jQuery(document).ready(function(){
// 1. query: getFullTxt + IP
        jQuery.ajax({
                type: "GET",
                url: "http://my.sfx.server/sfx_local?sid="+sid+"&genre=journal&title="+title+"&issn="+issn+"&date="+date+"&__service_type=getFullTxt&__response_type=multi_obj_detailed_xml&sfx.ignore_date_threshold=1&req.ip="+ip,
                dataType: "xml",
                success: function(res){
 if ( jQuery.browser.msie ) {  var target_url = jQuery.xmlDOM(res.responseText).find('target_url:first').text(); 
// jQuery-Plugin "xmlDOM", s. /mpg-js/jquery.xmldom-1.0.js
                                var coverage_statement = jQuery.xmlDOM(res.responseText).find('coverage_statement:first').text();
                                // more targets: read the second and third explicitly:
                                var target_url_2 = jQuery.xmlDOM(res.responseText).find('target:eq(1)').find('target_url').text();
                                var coverage_statement_2 = jQuery.xmlDOM(res.responseText).find('target:eq(1)').find('coverage_statement').text();
                                var target_url_3 = jQuery.xmlDOM(res.responseText).find('target:eq(2)').find('target_url').text();
                                var coverage_statement_3 = jQuery.xmlDOM(res.responseText).find('target:eq(2)').find('coverage_statement').text();
} else { // FF + Konsorten
                                var target_url = jQuery(res.responseText).find('target:first target_url').text();
                                var coverage_statement = jQuery(res.responseText).find('target:first coverage_statement').text();
                                // more targets: read the second and third explicitly:
                                var target_url_2 = jQuery(res.responseText).find('target:eq(1)').find('target_url').text();
                                var coverage_statement_2 = jQuery(res.responseText).find('target:eq(1)').find('coverage_statement').text();
                                var target_url_3 = jQuery(res.responseText).find('target:eq(2)').find('target_url').text();
                                var coverage_statement_3 = jQuery(res.responseText).find('target:eq(2)').find('coverage_statement').text();
}
                        // bind to full view page:
                                if (target_url) {
                                // CSS-ID 'vollanzeige' new in in direct/full-set-head
                                jQuery("#vollanzeige tr:last").after('<tr><td class="td1" width="15%"></td><td class="td1" align="left"><a href="'+target_url+'">'+sfxIcon+'</a>&nbsp;'+coverage_statement+'</td></tr>');
                                jQuery("span[id*='Call']").parents("tr").before('<tr><td class="td1" width="15%"></td><td class="td1" align="left"><a href="'+target_url+'">'+sfxIcon+'</a>&nbsp;'+coverage_statement+'</td></tr>');
                                }
                                if (target_url_2) {
                                jQuery("#vollanzeige tr:last").after('<tr><td class="td1" width="15%"></td><td class="td1" align="left"><a href="'+target_url_2+'">'+sfxIcon+'</a>&nbsp;'+coverage_statement_2+'</td></tr>');
                                jQuery("span[id*='Call']").parents("tr").before('<tr><td class="td1" width="15%"></td><td class="td1" align="left"><a href="'+target_url_2+'">'+sfxIcon+'</a>&nbsp;'+coverage_statement_2+'</td></tr>');
                                }
                                if (target_url_3) {
                                jQuery("#vollanzeige tr:last").after('<tr><td class="td1" width="15%"></td><td class="td1" align="left"><a href="'+target_url_3+'">'+sfxIcon+'</a>&nbsp;'+coverage_statement_3+'</td></tr>');
                                jQuery("span[id*='Call']").parents("tr").before('<tr><td class="td1" width="15%"></td><td class="td1" align="left"><a href="'+target_url_3+'">'+sfxIcon+'</a>&nbsp;'+coverage_statement_3+'</td></tr>');
                                }
                             }
                  });
// 2. query: getSelectedFullTxt + IP
        jQuery.ajax({
                type: "GET",
                url: "http://my.sfx.server/sfx_local?sid="+sid+"&genre=journal&title="+title+"&issn="+issn+"&date="+date+"&__service_type=getSelectedFullTxt&__response_type=multi_obj_detailed_xml&sfx.ignore_date_threshold=1&req.ip="+ip,
                success: function(res){
 if ( jQuery.browser.msie ) {  var target_url = jQuery.xmlDOM(res.responseText).find('target_url:first').text(); 
// jQuery-Plugin "xmlDOM", s. /mpg-js/jquery.xmldom-1.0.js
} else { // FF + Konsorten
                                var target_url = jQuery(res.responseText).find('target_url:first').text();
}
                        // bind to full view page:
                                if (target_url) {
                                jQuery("#vollanzeige tr:last").after('<tr><td class="td1" width="15%"></td><td class="td1" align="left"><a href="'+target_url+'">'+sfxIcon+'</a>&nbsp;EZB/Journal Homepage</td></tr>');
                                jQuery("span[id*='Call']").parents("tr").before('<tr><td class="td1" width="15%"></td><td class="td1" align="left"><a href="'+target_url+'">'+sfxIcon+'</a>&nbsp;EZB/Journal Homepage</td></tr>');
                                }
                             }
                  });
// 3. query: getHolding + IP (EZB)
        jQuery.ajax({
                type: "GET",
                url: "http://my.sfx.server/sfx_local?sid="+sid+"&genre=journal&title="+title+"&issn="+issn+"&date="+date+"&__service_type=getHolding&__response_type=multi_obj_detailed_xml&req.ip="+ip,
                success: function(res){
 if ( jQuery.browser.msie ) {
                                var target_url = jQuery.xmlDOM(res.responseText).find('target_url:first').text(); // jQuery-Plugin "xmlDOM", s. /mpg-js/jquery.xmldom-1.0.js
} else { // FF + Konsorten
                                var target_url = jQuery(res.responseText).find('target_url:first').text();
}
                        // bind to full view page:
                                if (target_url) {
                                jQuery("#vollanzeige tr:last").after('<tr><td class="td1" width="15%"></td><td class="td1" align="left"><a href="'+target_url+'">'+sfxIcon+'</a>&nbsp;EZB/Journal Homepage</td></tr>');
                                jQuery("span[id*='Call']").parents("tr").before('<tr><td class="td1" width="15%"></td><td class="td1" align="left"><a href="'+target_url+'">'+sfxIcon+'</a>&nbsp;EZB/Journal Homepage</td></tr>');
                                }
                             }
                  });
           });
} // end if journal

</script>
<!-- SFX END -->

TO DO list

Text...

Known issues

Correct SFX target display works only for a given IP (because it is proxied via Yahoo). If you want to show the availability for the current client's IP, use a proxy script on your Aleph server (without YQL).

If you make a lot of queries, you might need to get an Access Key from Yahoo.
(see also YQL Terms of Service: http://developer.yahoo.com/yql/)

Comments