Cross Domain Scripting with AJAX, Again

I've wrote about how to overcome the cross-domain issue using Apache mod_rewrite. But that'll only work if you have administrator priviledge on your hosting server, most of us don't. So instead of tweaking the server we must tweak the code. Thus, JSON shows up.

JSON(JavaScript Object Notation) is just a way to structure object data.. in a way that is easily interpreted, primarily with Javascript. Some examples from wikipedia:
Javascript

bork({"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}});

and with different format:
XML :

<menu id="file" value="File">
  <popup>
    <menuitem value="New" onclick="CreateNewDoc()" />
    <menuitem value="Open" onclick="OpenDoc()" />
    <menuitem value="Close" onclick="CloseDoc()" />
  </popup>
</menu> 

Aha, so just like xML, JSON is just data representation part of things, but if XML can't handle cross-domain scripting, how can JSON ?

It's because the J letter on JSON, JSON is JavaScript. And we all(well, maybe not all) know that you can reference REMOTE Javascript source inside the <script> tag. So theoritically, if you create a dynamic script tag that references to a script on another domain, that script is executed imediately!. And if the remote script contains JSON, your cross-domain scripting problems days are over!. Yay.

For an even easier way, you can use a js file at Dan Theurer's blog for the dynamic adding of scripts elements.

And here's how you use it.

First, a server side file that creates the JSON outputs, named bork.php

<?php
 echo 'bork({"Image": { "Width":500, "Height":250, "Title":"Giant Cow", 
         "Thumbnail":{"Url":"http://someurl.com/image/1234", 
         "Height": 75, "Width": 150}}});';
?>

And the html file ,bork.html

<html>
<head>
<title>JSON test</title>
<script src="jsr_class.js" type="text/javascript"></script>
<script>
function appendScript(){
 var json=new JSONscriptRequest('http://myotherdomain.com/bork.php?');
 json.buildScriptTag();
 json.addscriptTag();
}

function bork(data){
 var txt='';
 if(data==null)
  alert('error occured');
 else{
  txt='Image Title: '+data.Image.Title+'
';
  txt+='Width: '+data.Image.Width+'
';
  txt+='Height: '+data.Image.Height+'
';
  txt+='Thumbnail Data: '+data.Image.Thumbnail.Url;
  txt+='('+data.Image.Thumbnail.Width+' x '+data.Image.Thumbnail.Height +')
';
 }
 document.getElementById('bork').innerHTML=txt;
}
</script>
</head>
<body>
<div id="bork"></div>
<a href="#" onClick="appendScript();return false;">Get Bork</a>
</body>
</html>

Hope this helps.

Apache Setting On XMLHttpRequest Cross-Domain Issue

You may all know that XMLHttpRequest does not work automatically across domain. Which means that when you load a page, you can't make a request to a domain that is different from that page's domain. So your script on myserverhere.com can't request object to myserverthere.com, for example.

But there's always a cure for everything, and here we have the solution on Apache's mod_rewrite, this is a module that uses a rule-based rewriting engine, we usually used it to make a clean URL, to rewrite requested URLs on the fly, it's basically a regex parser.

Cross domain request happens if you have a code like this on myserverhere.com

var XMLHttp = getXMLHttp();
XMLHttp.open("POST", "http://myserverthere.com/something.php?value="+somevalue);

We run this script on myserverhere.com, but we make a post request to myserverthere.com. The domain mismatch is the cause of the problem.

IE and Mozilla-based browser have different way of handling this cross-domain requests. In IE, you can do cross-domain request, but you have to change browser's default security. While Mozilla, they have this signed-script. You must enable the UniversalBrowser privileges depending on the different domains involved in the cross-domain request. Therefore, there are no simple browser-based solution for this problem.

Fortunately, mod_rewrite has solution for this, with its RewriteRule directive. Here are the quick steps:

1. Configure your apache with proxy enabled
./configure --enable-proxy
2. Enable RewriteEngine at httpd.conf
RewriteEngine On
3. Add this rule:
RewriteRule ^/something.php$ http://myserverthere.com/something.php [P] The [P] indicates pass-through proxy.

With that, instead of sending request to http://myserverthere.com/something.php you can use /something.php URL in the javascript code, like this:

var XMLHttp = getXMLHttp();
XMLHttp.open("POST", "/something.php?value="+somevalue);

There is one problem though. You HAVE to have access to your Apache configuration. If you're a programmer that doesn't have access to Apache, you'll have to tell your webserver administrator about this hack.

Hope this helps.