├── README
├── ajaxcontent.html
├── waiting-for-godot.php
├── simple-ajax.js
├── reusable-ajax.js
├── using-proxy.js
├── allowing-link-following.js
├── code.js
├── styles.css
├── proxy.php
├── simple-ajax.html
├── using-proxy.html
├── using-yql.html
├── reusable-ajax.html
├── using-yql.js
├── allowing-link-following.html
├── error-handling.html
├── index.html
├── error-handling.js
└── load-external.js


/README:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/ajaxcontent.html:
--------------------------------------------------------------------------------
1 | <p>This is some demo content requested by Ajax. I am an awesome coder, me.</p>


--------------------------------------------------------------------------------
/waiting-for-godot.php:
--------------------------------------------------------------------------------
1 | <?php
2 |   sleep(10);
3 |   echo "I waited ten seconds for this?";
4 | ?>


--------------------------------------------------------------------------------
/simple-ajax.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function(){
2 |   $('.ajaxtrigger').click(function(){
3 |     $('#target').load('ajaxcontent.html');
4 |   });
5 | });


--------------------------------------------------------------------------------
/reusable-ajax.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function(){
2 |   $('.ajaxtrigger').click(function(){
3 |     $('#target').load($(this).attr('href'));
4 |     return false;
5 |   });
6 | });


--------------------------------------------------------------------------------
/using-proxy.js:
--------------------------------------------------------------------------------
 1 | $(document).ready(function(){
 2 |   $('.ajaxtrigger').click(function(){
 3 |     var url = $(this).attr('href');
 4 |     if(url.match('^http')){
 5 |       url = 'proxy.php?url=' + url;
 6 |     }
 7 |     $('#target').load(url);
 8 |     return false;
 9 |   });
10 | });


--------------------------------------------------------------------------------
/allowing-link-following.js:
--------------------------------------------------------------------------------
 1 | $(document).ready(function(){
 2 |   $('.ajaxtrigger').click(function(){
 3 |     var url = $(this).attr('href');
 4 |     if(url.match('^http')){
 5 |       return true;
 6 |     } else {
 7 |       $('#target').load(url);
 8 |       return false;
 9 |     }
10 |   });
11 | });


--------------------------------------------------------------------------------
/code.js:
--------------------------------------------------------------------------------
 1 | $(document).ready(function(){
 2 |   var url = $('script').last().attr('src');
 3 |   $.get(url,
 4 |     function(code){
 5 |       console.log(code);
 6 |       code=code.replace(/&/mg,'&#38;');
 7 |       code=code.replace(/</mg,'&#60;');
 8 |       code=code.replace(/>/mg,'&#62;');
 9 |       code=code.replace(/\"/mg,'&#34;');
10 |       code=code.replace(/\t/g,'  ');
11 |       code=code.replace(/\r?\n/g,'<br>');
12 |       code=code.replace(/<br><br>/g,'<br>');
13 |       code=code.replace(/ /g,'&nbsp;');
14 |       $('#code').html('<pre><code>'+code+'</code></pre>');
15 |     }
16 |   );
17 | });


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |   margin:0;
 3 |   padding:0;
 4 | }
 5 | body{border:2em solid #fff;font-family:futura,verdana,sans-serif;}
 6 | a{color:#369}
 7 | ul{margin:1em}
 8 | h1{font-size:25px;color:#036;}
 9 | h2{font-size:18px;margin:10px 0;color:#69c;}
10 | #target,#code{
11 | border:1px solid #999;
12 | background:#eee;
13 | padding:1em;
14 | -moz-border-radius:5px;
15 | border-radius:5px;
16 | -webkit-border-radius:5px;
17 | }
18 | #target{
19 |   overflow:auto;
20 |   max-height:200px;
21 | }
22 | #ft{font-size:12px;text-align:right;}
23 | .ajaxtrigger span{font-weight:bold;color:#000}
24 | .ajaxtrigger span.error{color:#c00}
25 | 


--------------------------------------------------------------------------------
/proxy.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | $url = $_GET['url'];
 3 | $allowedurls = array(
 4 |   'http://developer.yahoo.com',
 5 |   'http://icant.co.uk'
 6 | );
 7 | if(in_array($url,$allowedurls)){
 8 |   $ch = curl_init(); 
 9 |   curl_setopt($ch, CURLOPT_URL, $url); 
10 |   curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
11 |   $output = curl_exec($ch); 
12 |   curl_close($ch);
13 |   $content = preg_replace('/.*<body[^>]*>/msi','',$output);
14 |   $content = preg_replace('/<\/body>.*/msi','',$content);
15 |   $content = preg_replace('/<?\/body[^>]*>/msi','',$content);
16 |   $content = preg_replace('/[\r|\n]+/msi','',$content);
17 |   $content = preg_replace('/<--[\S\s]*?-->/msi','',$content);
18 |   $content = preg_replace('/<noscript[^>]*>[\S\s]*?<\/noscript>/msi',
19 |                           '',$content);
20 |   $content = preg_replace('/<script[^>]*>[\S\s]*?<\/script>/msi',
21 |                           '',$content);
22 |   $content = preg_replace('/<script.*\/>/msi','',$content);
23 |   echo $content;
24 | } else {
25 |   echo 'Error: URL not allowed to load here.';
26 | }
27 | ?>


--------------------------------------------------------------------------------
/simple-ajax.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 |  "http://www.w3.org/TR/html4/strict.dtd">
 3 | <html>
 4 | <head>
 5 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 6 |   <title>Ajax with jQuery - obtrusive and bad</title>
 7 |   <link rel="stylesheet" href="styles.css" type="text/css">
 8 | </head>
 9 | <body>
10 | <div id="doc" class="yui-t7">
11 |   <div id="hd" role="banner"><h1>Ajax with jQuery - obtrusive and bad</h1></div>
12 |   <div id="bd" role="main">
13 |     <h2>Demo</h2>
14 |     <ul>
15 |       <li><a href="#" class="ajaxtrigger">Load Ajax Content</a></li>
16 |     </ul>
17 |     <div id="target"></div>
18 |     <h2>Source Code</h2>
19 |     <div id="code"></div>
20 |     <ul id="nav"><li><a href="reusable-ajax.html">Next: make it reusable</a></li></ul>
21 |   </div>
22 |   <div id="ft" role="contentinfo"><p>Written by <a href="http://wait-till-i.com/index.php">Christian Heilmann</a>.</p></div>
23 | </div>
24 | <script src="http://code.jquery.com/jquery-latest.pack.js"></script>
25 | <script src="code.js"></script>
26 | <script src="simple-ajax.js"></script>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/using-proxy.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 |  "http://www.w3.org/TR/html4/strict.dtd">
 3 | <html>
 4 | <head>
 5 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 6 |   <title>Ajax with jQuery - using a proxy</title>
 7 |   <link rel="stylesheet" href="styles.css" type="text/css">
 8 | </head>
 9 | <body>
10 | <div id="doc" class="yui-t7">
11 |   <div id="hd" role="banner"><h1>Ajax with jQuery - using a proxy</h1></div>
12 |   <div id="bd" role="main">
13 |     <h2>Demo</h2>
14 |     <ul>
15 |       <li><a href="ajaxcontent.html" class="ajaxtrigger">Load Ajax Content</a></li>
16 |       <li><a href="http://developer.yahoo.com" class="ajaxtrigger">Get developer.yahoo.com</a></li>
17 |     </ul>
18 |     <div id="target"></div>
19 |     <h2>Source Code</h2>
20 |     <div id="code"></div>
21 |     <ul id="nav"><li><a href="using-yql.html">Next: using YQL and JSON</a></li></ul>
22 |   </div>
23 |   <div id="ft" role="contentinfo"><p>Written by <a href="http://wait-till-i.com/index.php">Christian Heilmann</a>.</p></div>
24 | </div>
25 | <script src="http://code.jquery.com/jquery-latest.pack.js"></script>
26 | <script src="code.js"></script>
27 | <script src="using-proxy.js"></script>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/using-yql.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 |  "http://www.w3.org/TR/html4/strict.dtd">
 3 | <html>
 4 | <head>
 5 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 6 |   <title>Ajax with jQuery - using YQL</title>
 7 |   <link rel="stylesheet" href="styles.css" type="text/css">
 8 | </head>
 9 | <body>
10 | <div id="doc" class="yui-t7">
11 |   <div id="hd" role="banner"><h1>Ajax with jQuery - using YQL</h1></div>
12 |   <div id="bd" role="main">
13 |     <h2>Demo</h2>
14 |     <ul>
15 |       <li><a href="ajaxcontent.html" class="ajaxtrigger">Load Ajax Content</a></li>
16 |       <li><a href="http://developer.yahoo.com" class="ajaxtrigger">Get developer.yahoo.com</a></li>
17 |     </ul>
18 |     <div id="target"></div>
19 |     <h2>Source Code</h2>
20 |     <div id="code"></div>
21 |     <ul id="nav"><li><a href="error-handling.html">Adding error handling and effects</a></li></ul>
22 |   </div>
23 |   <div id="ft" role="contentinfo"><p>Written by <a href="http://wait-till-i.com/index.php">Christian Heilmann</a>.</p></div>
24 | </div>
25 | <script src="http://code.jquery.com/jquery-latest.pack.js"></script>
26 | <script src="code.js"></script>
27 | <script src="using-yql.js"></script>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/reusable-ajax.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 |  "http://www.w3.org/TR/html4/strict.dtd">
 3 | <html>
 4 | <head>
 5 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 6 |   <title>Ajax with jQuery - less obtrusive</title>
 7 |   <link rel="stylesheet" href="styles.css" type="text/css">
 8 | </head>
 9 | <body>
10 | <div id="doc" class="yui-t7">
11 |   <div id="hd" role="banner"><h1>Ajax with jQuery - less obtrusive</h1></div>
12 |   <div id="bd" role="main">
13 |     <h2>Demo</h2>
14 |     <ul>
15 |       <li><a href="ajaxcontent.html" class="ajaxtrigger">Load Ajax Content</a></li>
16 |       <li><a href="http://developer.yahoo.com" class="ajaxtrigger">Get developer.yahoo.com (this will not do anything!)</a></li>
17 |     </ul>
18 |     <div id="target"></div>
19 |     <h2>Source Code</h2>
20 |     <div id="code"></div>
21 |     <ul id="nav"><li><a href="allowing-link-following.html">Next: allow external links to be followed</a></li></ul>
22 |   </div>
23 |   <div id="ft" role="contentinfo"><p>Written by <a href="http://wait-till-i.com/index.php">Christian Heilmann</a>.</p></div>
24 | </div>
25 | <script src="http://code.jquery.com/jquery-latest.pack.js"></script>
26 | <script src="code.js"></script>
27 | <script src="reusable-ajax.js"></script>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/using-yql.js:
--------------------------------------------------------------------------------
 1 | $(document).ready(function(){
 2 |   var container = $('#target');
 3 |   $('.ajaxtrigger').click(function(){
 4 |     doAjax($(this).attr('href'));
 5 |     return false;
 6 |   });
 7 |   function doAjax(url){
 8 |     if(url.match('^http')){
 9 |       $.getJSON("http://query.yahooapis.com/v1/public/yql?"+
10 |                 "q=select%20*%20from%20html%20where%20url%3D%22"+
11 |                 encodeURIComponent(url)+
12 |                 "%22&format=xml'&callback=?",
13 |         function(data){
14 |           if(data.results[0]){
15 |             var data = filterData(data.results[0]);
16 |             container.html(data);
17 |           } else {
18 |             var errormsg = '<p>Error: could not load the page.</p>';
19 |             container.html(errormsg);
20 |           }
21 |         }
22 |       );
23 |     } else {
24 |       $('#target').load(url);
25 |     }
26 |   }
27 |   function filterData(data){
28 |     data = data.replace(/<?\/body[^>]*>/g,'');
29 |     data = data.replace(/[\r|\n]+/g,'');
30 |     data = data.replace(/<--[\S\s]*?-->/g,'');
31 |     data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g,'');
32 |     data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g,'');
33 |     data = data.replace(/<script.*\/>/,'');
34 |     return data;
35 |   }
36 | });
37 | 
38 | 
39 | 


--------------------------------------------------------------------------------
/allowing-link-following.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 |  "http://www.w3.org/TR/html4/strict.dtd">
 3 | <html>
 4 | <head>
 5 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 6 |   <title>Ajax with jQuery - falling back to link following</title>
 7 |   <link rel="stylesheet" href="styles.css" type="text/css">
 8 | </head>
 9 | <body>
10 | <div id="doc" class="yui-t7">
11 |   <div id="hd" role="banner"><h1>Ajax with jQuery - falling back to link following</h1></div>
12 |   <div id="bd" role="main">
13 |     <h2>Demo</h2>
14 |     <ul>
15 |       <li><a href="ajaxcontent.html" class="ajaxtrigger">Load Ajax Content</a></li>
16 |       <li><a href="http://developer.yahoo.com" class="ajaxtrigger">Get developer.yahoo.com (this will not do an ajax call but redirect)</a></li>
17 |     </ul>
18 |     <div id="target"></div>
19 |     <h2>Source Code</h2>
20 |     <div id="code"></div>
21 |     <ul id="nav"><li><a href="using-proxy.html">Next: using a PHP proxy</a></li></ul>
22 |   </div>
23 |   <div id="ft" role="contentinfo"><p>Written by <a href="http://wait-till-i.com/index.php">Christian Heilmann</a>.</p></div>
24 | </div>
25 | <script src="http://code.jquery.com/jquery-latest.pack.js"></script>
26 | <script src="code.js"></script>
27 | <script src="allowing-link-following.js"></script>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/error-handling.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 |  "http://www.w3.org/TR/html4/strict.dtd">
 3 | <html>
 4 | <head>
 5 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 6 |   <title>Ajax with jQuery - adding error handling</title>
 7 |   <link rel="stylesheet" href="styles.css" type="text/css">
 8 | </head>
 9 | <body>
10 | <div id="doc" class="yui-t7">
11 |   <div id="hd" role="banner"><h1>Ajax with jQuery - adding error handling</h1></div>
12 |   <div id="bd" role="main">
13 |     <h2>Demo</h2>
14 |     <ul>
15 |       <li><a href="ajaxcontent.html" class="ajaxtrigger">Load Ajax Content</a></li>
16 |       <li><a href="http://developer.yaho.com" class="ajaxtrigger">see developer.yahoo.com</a></li>
17 |       <li><a href="borked" class="ajaxtrigger">this is a broken link</a></li>
18 |       <li><a href="http://borked" class="ajaxtrigger">this is an external broken link</a></li>
19 |       <li><a href="waiting-for-godot.php" class="ajaxtrigger">this times out</a></li>
20 |     </ul>
21 |     <div id="target"></div>
22 |     <h2>Source Code</h2>
23 |     <div id="code"></div>
24 |     <ul id="nav"><li><a href="index.html">back home</a></li></ul>
25 |   </div>
26 |   <div id="ft" role="contentinfo"><p>Written by <a href="http://wait-till-i.com/index.php">Christian Heilmann</a>.</p></div>
27 | </div>
28 | <script src="http://code.jquery.com/jquery-latest.pack.js"></script>
29 | <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
30 | <script src="code.js"></script>
31 | <script src="error-handling.js"></script>
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 |  "http://www.w3.org/TR/html4/strict.dtd">
 3 | <html>
 4 | <head>
 5 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 6 |   <title>Loading external content with Ajax using jQuery and YQL</title>
 7 |   <link rel="stylesheet" href="styles.css" type="text/css">
 8 | </head>
 9 | <body>
10 | <div id="doc" class="yui-t7">
11 |   <div id="hd" role="banner"><h1>Loading external content with Ajax using jQuery and YQL</h1></div>
12 |   <div id="bd" role="main">
13 |     <p>These are the demonstration files for the <a href="http://www.wait-till-i.com/2010/01/10/loading-external-content-with-ajax-using-jquery-and-yql/">blog post at wait-till-i.com</a>.</p>
14 |     <p>Go and read there!</p>
15 |     <h2>Demos</h2>
16 |     <ul>
17 |       <li><a href="simple-ajax.html">Very simple Ajax (obtrusive)</a></li>
18 |       <li><a href="reusable-ajax.html">Reusable Ajax (bit better)</a></li>
19 |       <li><a href="allowing-link-following.html">Allowing for external links to be followed</a></li>
20 |       <li><a href="using-proxy.html">Using a proxy</a></li>
21 |       <li><a href="using-yql.html">Using YQL</a></li>
22 |       <li><a href="error-handling.html">Adding error handling and usability enhancements.</a></li>
23 |     </ul>
24 |     <p>You can <a href="http://github.com/codepo8/crossdomain-ajax-with-jquery-and-yql">download all these files on GitHub</a>.</p>
25 |   </div>
26 |   <div id="ft" role="contentinfo"><p>Written by <a href="http://wait-till-i.com/index.php">Christian Heilmann</a>.</p></div>
27 | </div>
28 | <script src="http://code.jquery.com/jquery-latest.pack.js"></script>
29 | <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
30 | <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.highlight.js"></script>
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/error-handling.js:
--------------------------------------------------------------------------------
 1 | $(document).ready(function(){
 2 |   var container = $('#target');
 3 |   container.attr('tabIndex','-1');
 4 |   $('.ajaxtrigger').click(function(){
 5 |     var trigger = $(this);
 6 |     var url = trigger.attr('href');
 7 |     if(!trigger.hasClass('loaded')){
 8 |       trigger.append('<span></span>');
 9 |       trigger.addClass('loaded');
10 |       var msg = trigger.find('span').last();
11 |     } else {
12 |       var msg = trigger.find('span').last();
13 |     }
14 |     doAjax(url,msg,container);
15 |     return false;
16 |   });
17 |   
18 |   function doAjax(url,msg,container){
19 |     // if the URL starts with http
20 |     if(url.match('^http')){
21 |       // assemble the YQL call
22 |       msg.removeClass('error');
23 |       msg.html(' (loading...)');
24 |       $.getJSON("http://query.yahooapis.com/v1/public/yql?"+
25 |                 "q=select%20*%20from%20html%20where%20url%3D%22"+
26 |                 encodeURIComponent(url)+
27 |                 "%22&format=xml'&callback=?",
28 |         function(data){
29 |           if(data.results[0]){
30 |             var data = filterData(data.results[0]);
31 |             msg.html(' (ready.)');
32 |             container.
33 |               html(data).
34 |                 focus().
35 |                   effect("highlight",{},1000);
36 |           } else {
37 |             msg.html(' (error!)');
38 |             msg.addClass('error');
39 |             var errormsg = '<p>Error: could not load the page.</p>';
40 |             container.
41 |               html(errormsg).
42 |                 focus().
43 |                   effect('highlight',{color:'#c00'},1000);
44 |           }
45 |         }
46 |       );
47 |     } else {
48 |       $.ajax({
49 |         url: url,
50 |         timeout:5000,
51 |         success: function(data){
52 |           msg.html(' (ready.)');
53 |           container.
54 |             html(data).
55 |               focus().
56 |                 effect("highlight",{},1000);
57 |         },
58 |         error: function(req,error){
59 |           msg.html(' (error!)');
60 |           msg.addClass('error');
61 |           if(error === 'error'){error = req.statusText;}
62 |           var errormsg = 'There was a communication error: '+error;
63 |             container.
64 |               html(errormsg).
65 |                 focus().
66 |                   effect('highlight',{color:'#c00'},1000);
67 |         },
68 |         beforeSend: function(data){
69 |           msg.removeClass('error');
70 |           msg.html(' (loading...)');
71 |         }
72 |       });
73 |     }
74 |   }
75 |   function filterData(data){
76 |     // filter all the nasties out
77 |     // no body tags
78 |     data = data.replace(/<?\/body[^>]*>/g,'');
79 |     // no linebreaks
80 |     data = data.replace(/[\r|\n]+/g,'');
81 |     // no comments
82 |     data = data.replace(/<--[\S\s]*?-->/g,'');
83 |     // no noscript blocks
84 |     data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g,'');
85 |     // no script blocks
86 |     data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g,'');
87 |     // no self closing scripts
88 |     data = data.replace(/<script.*\/>/,'');
89 |     // [... add as needed ...]
90 |     return data;
91 |   }
92 | });
93 | 
94 | 
95 | 


--------------------------------------------------------------------------------
/load-external.js:
--------------------------------------------------------------------------------
 1 | $(document).ready(function(){
 2 |   var container = $('#target');
 3 |   container.attr('tabIndex','-1');
 4 |   $('.ajaxtrigger').click(function(){
 5 |     var trigger = $(this);
 6 |     var url = trigger.attr('href');
 7 |     if(!trigger.hasClass('loaded')){
 8 |       trigger.append('<span></span>');
 9 |       trigger.addClass('loaded');
10 |       var msg = trigger.find('span').last();
11 |     } else {
12 |       var msg = trigger.find('span').last();
13 |     }
14 |     doAjax(url,msg,container);
15 |     return false;
16 |   });
17 |   
18 |   function doAjax(url,msg,container){
19 |     // if the URL starts with http
20 |     if(url.match('^http')){
21 |       // assemble the YQL call
22 |       msg.removeClass('error');
23 |       msg.html(' (loading...)');
24 |       $.getJSON("http://query.yahooapis.com/v1/public/yql?"+
25 |                 "q=select%20*%20from%20html%20where%20url%3D%22"+
26 |                 encodeURIComponent(url)+
27 |                 "%22&format=xml'&callback=?",
28 |         function(data){
29 |           if(data.results[0]){
30 |             var data = filterData(data.results[0]);
31 |             msg.html(' (ready.)');
32 |             container.
33 |               html(data).
34 |                 focus().
35 |                   effect("highlight",{},1000);
36 |           } else {
37 |             msg.html(' (error!)');
38 |             msg.addClass('error');
39 |             var errormsg = '<p>Error: could not load the page.</p>';
40 |             container.
41 |               html(errormsg).
42 |                 focus().
43 |                   effect('highlight',{color:'#c00'},1000);
44 |           }
45 |         }
46 |       );
47 |     } else {
48 |       $.ajax({
49 |         url: url,
50 |         timeout:5000,
51 |         success: function(data){
52 |           msg.html(' (ready.)');
53 |           container.
54 |             html(data).
55 |               focus().
56 |                 effect("highlight",{},1000);
57 |         },
58 |         error: function(req,error){
59 |           msg.html(' (error!)');
60 |           msg.addClass('error');
61 |           if(error === 'error'){error = req.statusText;}
62 |           var errormsg = 'There was a communication error: '+error;
63 |             container.
64 |               html(errormsg).
65 |                 focus().
66 |                   effect('highlight',{color:'#c00'},1000);
67 |         },
68 |         beforeSend: function(data){
69 |           msg.removeClass('error');
70 |           msg.html(' (loading...)');
71 |         }
72 |       });
73 |     }
74 |   }
75 |   function filterData(data){
76 |     // filter all the nasties out
77 |     // no body tags
78 |     data = data.replace(/<?\/body[^>]*>/g,'');
79 |     // no linebreaks
80 |     data = data.replace(/[\r|\n]+/g,'');
81 |     // no comments
82 |     data = data.replace(/<--[\S\s]*?-->/g,'');
83 |     // no noscript blocks
84 |     data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g,'');
85 |     // no script blocks
86 |     data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g,'');
87 |     // no self closing scripts
88 |     data = data.replace(/<script.*\/>/,'');
89 |     // [... add as needed ...]
90 |     return data;
91 |   }
92 | });
93 | 
94 | 
95 | 


--------------------------------------------------------------------------------