Tag Archives: load

jQuery Across Domain AJAX Content Loads CodeUnit 16 FEB 2010

While working with jQuery and performing AJAX-driven gets and general content loading, have you ever come across your scripts throwing the following error?

permission denied: jquery xhr.open(type, s.url, s.async);

I annoyingly came across this error for the first time a couple of weeks back and after tracing the error all the way back to the main jQuery library file and reading a bit about the thrown error message in particular, I learned something that makes complete and utter sense:

In order to execute better security, Javascript does not allow for AJAX queries to be directed at a different domain from the one on which the AJAX call was originally made.

Makes complete sense, particularly when you think about all those baddies out there, but horribly inconvenient when you do in fact need to load some data that happens to sit on a different data server to the one you actually use as your main web portal.

So is there a fix to this problem that allows cross domain AJAX loading?

The simple answer is yes – as long as you aren’t averse to essentially creating a mini proxy on your own webserver.

Basically what you do to get around the no cross domain querying rule is to create a script that physically grabs the information from the external domain, to which you then point your AJAX load – in other words your display script is talking to your proxy script (which is perfectly legal), and which is in turn talking to the remote domain – in other words the perfect data chain.

To see what I’m trying to describe in action, take a look at the following:

proxy.php contents:

$diginetcontents = file_get_contents('http://diginet.net/modem_info.php?number=' . stripslashes(trim($_GET['to'])));
echo $diginetcontents;

display.php contents:

$.get('proxy.php',{'to':'27828521527'},function(data,textStatus){
$('#panel').text = data;
});

Breaking the above down, what we have done is create a proxy script in proxy.php which simply grabs what is returned from the page on the diginet.net domain, controlling the input by sending along the GET variable it was passed to the file_get_contents function call. The display.php file would be the one that the user is viewing and this initiates the data get from the diginet.net domain by issuing an AJAX get against our proxy script.

It’s an extra step, but now we have the data we couldn’t previously have gotten using pure jQuery with AJAX.

In other words, tutorial done! ;)

(Note, your web server would need something like file_get_contents or fopen which allows for URL parameters to be enabled for this proxy approach to work.)

jQuery: Load Remote Content into Current Page CodeUnit 27 DEC 2009

The well-established javascript library jQuery comes bundled with a neat little function that handles loading remote content directly into the current page’s DOM model, namely the little Ajax load function.

Using load is particularly easy, simply bind it to the element you wish to apply it to and call it with an URL – that simple!

For example:

$('#elementtoupdate').load('texttoload.html');

will replace the elementtoupdate’s HTML content with that contained in the remote texttoload.html page, all done with a single, simple call.

Of course, you can expand upon this behaviour as the load function comes with two additional optional parameters, the first one being data which allows you to turn the ajax request into a POST request, while the second callback function allows you to perform certain actions once the ajax operation has completed, like fading in the new text for example.

Note, that it is important to pass extra random GET variables to your load URL as Internet Explorer caches loaded files which could of course completely mess with your dynamically generated content. Usually attaching something like the current timestamp at the end of the URL works wonders in this case. (e.g. texttoload.html?rand=20091227100515 should do the trick quite nicely).

The latest trick available to the load function is that of being able to pass along a selector in the load function and thus apply only matching elements in the HTML to load to the page being updated’s DOM. For more information on doing this though, check out the related link below which details the official documentation for the load function.

Related Link: http://docs.jquery.com/Ajax/load