Emran Hasan's Blog

I still receive a good number of hits to my first (10 jQuery Essentials) and second (jQuery Essentials – Round 2) collection of jQuery plugins. So, I have been thinking about making the next post in the series for quite some time. Time has always been the killer of ideas, along with the fact that not too many plugins found way to my list of favorites.

Now that I have some fresh essentials, this post was inevitable.

18. jQuery UI

This is the official big boss with a number of core interactions (drag, dropping, sorting, selecting, resizing) and few great widgets (accordions, date pickers, dialogs, sliders, tabs) built on top of those. Although its a great collection, I somehow haven’t been able to use it in any real projects yet. It seems small plugins always get a favor than big collections

19. Facebox

This is a cute, little plugin that shows Facebook style dialog boxes using jQuery. It supports nearly all the possible contents you might want to show in a dialog box: image, div, remote pages. It has both automatic behavior and manual invoking. Simple and fun to me.

Read the rest of this article »

AJAX has become the core component of many web applications around us. And its fairly easy to handle AJAX now a days, with the help of various javascript libraries (ex: jQuery, Prototype, Mootools, YUI, etc). But there is one security issue that web browsers impose in doing AJAX calls – they don’t let you do AJAX calls in web servers different than yours. That means, if your script is in www.mydomain.com and you’re trying to do AJAX call to www.anotherdomain.com/get.php, then the browser will through error like: “Error: uncaught exception: Permission denied to call method XMLHttpRequest.open”.

Now, there are a number of solutions to this problem. Instead of explaining them all to you, lemme provide you the simplest one: using a PHP transport file. If you already know the thing and just need the script, download from here.

Others, let’s see an example implementation first.

Example use

   1: xmlHttp.onreadystatechange=function()

   2: {

   3:     if(xmlHttp.readyState==4)

   4:     {

   5:         alert(xmlHttp.responseText);

   6:     }

   7: }

   8:  

   9: xmlHttp.open("GET", 'http://myserver.com/transport.php?action=' + 

  10:                     urlencode('different-server.com/return_call.php') +

  11:                     '&method=get&data1=101&data2=pass', true );

  12:  

  13: xmlHttp.send(null);

Now, lets see how it works:

1. The script makes an AJAX call to the myserver.com/transport.php with a few parameters:
   • action = the target URL you need to fetch, from a different domain
   • method = the HTTP method (post/get)
   • data1, data2 = sample parameters for using as either query-string or POST fields
2. When the request is received by transport.php, it uses cURL to make a call to the page mentioned in action.
3. Based on the method, it either makes a GET request or a POST request. In both cases, it sends the extra parameters that are sent.
4. After the response is received, transport.php echoes it. So, you have what you need!

Download

transport.php Cross-Domain AJAX call transporter. Downloaded: times

Comments and suggestions are most welcomed