hoffmanc/health.js

## health.js
// YQL serves JSONP (with a callback) so all we have to do
// is create a script element with the right 'src':
function YQLQuery(query, callback) {
    this.query = query;
    this.callback = callback || function(){};
    this.fetch = function() {

        if (!this.query || !this.callback) {
            throw new Error('YQLQuery.fetch(): Parameters may be undefined');
        }

        var scriptEl = document.createElement('script'),
            uid = 'yql' + +new Date(),
            encodedQuery = encodeURIComponent(this.query.toLowerCase()),
            instance = this;

        YQLQuery[uid] = function(json) {
            instance.callback(json);
            delete YQLQuery[uid];
            document.body.removeChild(scriptEl);
        };

        scriptEl.src = 'http://query.yahooapis.com/v1/public/yql?q='
                     + encodedQuery + '&format=json&callback=YQLQuery.' + uid;
        document.body.appendChild(scriptEl);

    };
}

var oTable;

$(function() {
  function InitializeTable(url){
    oTable = $("table#results").dataTable({
      "sAjaxSource": url,
      "fnServerData": function(url, aoData, fnSuccess){
        new YQLQuery("select * from html where url = '" +
          url + "'", function(data){
            fnSuccess(data.query.results.item);
          }).fetch();
      }
    });
  }
  InitializeTable("http://tinyurl.com/394tgvg");
});

## index.html
<html>
  <head>
    <title>Datatables Representation of Health Data from jameyer.com</title>
    <script src='jquery.js' type='text/javascript'></script>
    <script src='jquery.dataTables.min.js' type='text/javascript'></script>
    <script src='health.js' type='text/javascript'></script>
  </head>
  <body>
    <table id='results'>
      <thead>
      <tr>
          <th>population</th>
          <th>county</th>
      </tr>
      </thead>
      <tbody><tbody>
    </table>
  </body>
</html>

## yql-xss.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Ajax with jQuery - using YQL</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script src="yql-xss.js"></script>
</head>
<body>
<div id="doc" class="yui-t7">
  <div id="hd" role="banner"><h1>Ajax with jQuery - using YQL</h1></div>
  <div id="bd" role="main">
    <h2>Demo</h2>
    <ul>
      <li><a href="ajaxcontent.html" class="ajaxtrigger">Load Ajax Content</a></li>
      <li><a href="http://health.jameyer.com/health.py/json?pyql=population%2Ccounty%40state%3D%27Illinois%27" class="ajaxtrigger">Get select * from html where url = 'http://health.jameyer.com/health.py/json?pyql=population%2Ccounty%40state%3D%27Illinois%27'</a></li>
    </ul>
    <div id="target"></div>
    <h2>Source Code</h2>
    <div id="code"></div>
    <ul id="nav"><li><a href="error-handling.html">Adding error handling and effects</a></li></ul>
  </div>
  <div id="ft" role="contentinfo"><p>Written by <a href="http://wait-till-i.com/index.php">Christian Heilmann</a>.</p></div>
</div>
</body>
</html>

## yql-xss.js
$(document).ready(function(){
  var container = $('#target');
  $('.ajaxtrigger').click(function(){
    doAjax($(this).attr('href'));
    return false;
  });
  function doAjax(url){
    if(url.match('^http')){
      $.getJSON("http://query.yahooapis.com/v1/public/yql?"+
                "q=select%20*%20from%20html%20where%20url%3D%22"+
                encodeURIComponent(url)+
                "%22&format=json'&callback=?",
        function(data){
          if(data.results[0]){
            var data = filterData(data.results[0]);
            container.html(data);
          } else {
            var errormsg = '<p>Error: could not load the page.</p>';
            container.html(errormsg);
          }
        }
      );
    } else {
      $('#target').load(url);
    }
  }
  function filterData(data){
    data = data.replace(/<?\/body[^>]*>/g,'');
    data = data.replace(/[\r|\n]+/g,'');
    data = data.replace(/<--[\S\s]*?-->/g,'');
    data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g,'');
    data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g,'');
    data = data.replace(/<script.*\/>/,'');
    return data;
  }
});
	// YQL serves JSONP (with a callback) so all we have to do
	// is create a script element with the right 'src':
	function YQLQuery(query, callback) {
	this.query = query;
	this.callback = callback \|\| function(){};
	this.fetch = function() {

	if (!this.query \|\| !this.callback) {
	throw new Error('YQLQuery.fetch(): Parameters may be undefined');
	}

	var scriptEl = document.createElement('script'),
	uid = 'yql' + +new Date(),
	encodedQuery = encodeURIComponent(this.query.toLowerCase()),
	instance = this;

	YQLQuery[uid] = function(json) {
	instance.callback(json);
	delete YQLQuery[uid];
	document.body.removeChild(scriptEl);
	};

	scriptEl.src = 'http://query.yahooapis.com/v1/public/yql?q='
	+ encodedQuery + '&format=json&callback=YQLQuery.' + uid;
	document.body.appendChild(scriptEl);

	};
	}

	var oTable;

	$(function() {
	function InitializeTable(url){
	oTable = $("table#results").dataTable({
	"sAjaxSource": url,
	"fnServerData": function(url, aoData, fnSuccess){
	new YQLQuery("select * from html where url = '" +
	url + "'", function(data){
	fnSuccess(data.query.results.item);
	}).fetch();
	}
	});
	}
	InitializeTable("http://tinyurl.com/394tgvg");
	});
	<html>
	<head>
	<title>Datatables Representation of Health Data from jameyer.com</title>
	<script src='jquery.js' type='text/javascript'></script>
	<script src='jquery.dataTables.min.js' type='text/javascript'></script>
	<script src='health.js' type='text/javascript'></script>
	</head>
	<body>
	<table id='results'>
	<thead>
	<tr>
	<th>population</th>
	<th>county</th>
	</tr>
	</thead>
	<tbody><tbody>
	</table>
	</body>
	</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Ajax with jQuery - using YQL</title>
	<link rel="stylesheet" href="styles.css" type="text/css">
	<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
	<script src="yql-xss.js"></script>
	</head>
	<body>
	<div id="doc" class="yui-t7">
	<div id="hd" role="banner"><h1>Ajax with jQuery - using YQL</h1></div>
	<div id="bd" role="main">
	<h2>Demo</h2>
	<ul>
	<li><a href="ajaxcontent.html" class="ajaxtrigger">Load Ajax Content</a></li>
	<li><a href="http://health.jameyer.com/health.py/json?pyql=population%2Ccounty%40state%3D%27Illinois%27" class="ajaxtrigger">Get select * from html where url = 'http://health.jameyer.com/health.py/json?pyql=population%2Ccounty%40state%3D%27Illinois%27'</a></li>
	</ul>
	<div id="target"></div>
	<h2>Source Code</h2>
	<div id="code"></div>
	<ul id="nav"><li><a href="error-handling.html">Adding error handling and effects</a></li></ul>
	</div>
	<div id="ft" role="contentinfo"><p>Written by <a href="http://wait-till-i.com/index.php">Christian Heilmann</a>.</p></div>
	</div>
	</body>
	</html>
	$(document).ready(function(){
	var container = $('#target');
	$('.ajaxtrigger').click(function(){
	doAjax($(this).attr('href'));
	return false;
	});
	function doAjax(url){
	if(url.match('^http')){
	$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
	"q=select%20*%20from%20html%20where%20url%3D%22"+
	encodeURIComponent(url)+
	"%22&format=json'&callback=?",
	function(data){
	if(data.results[0]){
	var data = filterData(data.results[0]);
	container.html(data);
	} else {
	var errormsg = '<p>Error: could not load the page.</p>';
	container.html(errormsg);
	}
	}
	);
	} else {
	$('#target').load(url);
	}
	}
	function filterData(data){
	data = data.replace(/<?\/body[^>]*>/g,'');
	data = data.replace(/[\r\|\n]+/g,'');
	data = data.replace(/<--[\S\s]*?-->/g,'');
	data = data.replace(/<noscript[^>]>[\S\s]?<\/noscript>/g,'');
	data = data.replace(/<script[^>]>[\S\s]?<\/script>/g,'');
	data = data.replace(/<script.*\/>/,'');
	return data;
	}
	});