Cross Domain AJAX Requests to Zoho Creator

I have been implementing a zoho creator database for a client of mine.

Why Zoho?

I selected it for this client because they have limited funds and hence a limited budget for software development.

I was able to pull together a solution that implements a large amount of functionality very quickly for them, albeit with the tradeoff of limited customisation. The costs of maintaining the system was also a consideration, and zoho appealed because any developer could easily see how the system was built and modify it. Many things can be changed by someone with intermediate IT skills.

It has got to the point however, that we need to push it a little further. So, I intend to build a number of little satellite utilities that utilize the Zoho API.

ZOHO does not support CORS

Unfortunately, Zoho does not support CORS at the time of writing so it is not possible to make an ajax request directly to the zoho creator api.

I could roll a simple proxy server to handle my requests to the Zoho API, but this is another thing to maintain and for a client with limited ongoing budget not ideal.

So, I put together a solution for calling the ZOHO Creator backend directly from client side javascript.

A Solution to calling creator from the browser

I have put together a simple echo demo at github.

The source is available there too.

https://github.com/sudsy/xdmZoho

This demo application sends the string in the text box to a zoho creator application and returns it back to the browser. The Zoho creator application is available for copying too:

https://creator.zoho.com/bensudbury/xdmzoho

This proof of concept is enough to show that a page could be written to support any operations on the Zoho database as required.

So how did I do it?

Well, it's certainly not straightforward, but I was determined to get some javascript happening with my ZOHO application and I'm happy to say I did it.

I found the following forum post which led me on a bit of a wild goose chase trying to find a way to get access to the api.

This page hinted to me that there is no problem executing code on the server, just finding out what the response was.

So, the first step was to call an iframe with the url of the xdmEcho application as linked above. The problem with this is that the same origin security policy prevents me from getting the results back from that iframe.

To resolve this problem, I get the page on the zoho server to display another iframe which loads a page on the original server. This page is then permitted to make contact with the original page and return the results.

It's easier to understand if you follow the code but essentially the flow is as follows:

  1. Browser makes request to yourdomain.com/index.html.
  2. yourdomain.com/index.html creates an iframe with the target zoho creator page as it's source url.
  3. Zoho Creator page loads outputting an iframe with yourdomain.com/callback.html as it's source url.
  4. Javascript in yourdomain.com/callback.html calls javascript in the original yourdomain.com/index.html with the results of the call.

I built a function to handle the complexities of this which is available at https://github.com/sudsy/xdmZoho . It has some additional features such as timeout handling and parallel request handling.

Let me know by twitter it you found this useful.