nextwebgen.com

The Next Generation Web Now

Cross Domain XMLHttpRequests using an IFrame Proxy with Dojo

Filed under: Web 2.0 News, Front Page, Programming, Dojo — Chris Cornutt at 8:12 am on Wednesday, August 2, 2006

On the Dojo Toolkit blog today, there’s a pointer to information about the library’s latest built-in ability - making cross-domain requets using an iFrame proxy.

As of today, the Dojo codebase can do cross domain XMLHttpRequests (XHR) using an iframe proxy. Note that this is not using Flash or a server side proxy — it is pure JavaScript and HTML. A set of iframes (one local, one cross-domain) are used to serialize the XHR information using URL fragment identifiers.

They link to more information about this new feature, including the background of why it was added, the technologies behind it, security considerations and a bit of code to show you how it’s done.

Cross Domain XHR with Dojo

Filed under: Web 2.0 News, Front Page, Dojo — Dion Almaer at 10:53 am on Tuesday, August 1, 2006

The Dojo Toolkit can now do cross domain XHR using an iframe proxy.

There is detailed documentation here thanks to James Burke.

Example

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. dojo.require("dojo.io.*");
  3. dojo.require("dojo.io.XhrIframeProxy");
  4.  
  5. dojo.io.bind({
  6.     iframeProxyUrl: "http://some.domain.com/path/to/xip_server.html",
  7.     url: "http:/some.domain.com/path/to/api",
  8.     load: function(type, data, evt, kwArgs){
  9.         /* do stuff with the result here */
  10.     }
  11. });
  12.  

Creating an Ajax Login Page with Dojo/Zend Framework

Filed under: Web 2.0 News, Front Page, Programming, PHP, Dojo — Chris Cornutt at 8:14 am on Monday, July 31, 2006

Alexander Netkachev shows, in this new post on his site, how to create an Ajax-based login page with the help of the Dojo library and a new offering from Zend - the Zend Framework. The Zend Framework is a MVC-based framework written in PHP.

A few days ago I understood the right usage of the framework. Frankly speaking, it does not help with creating Web forms—it has no high-level complex components like TDataGrid in PRADO or even Repeater in ASP.NET. And what I understood is that it is not Zend Framework’s business how developers are creating their forms and here is a reason for this: modern pages are created with a lot of JavaScript and, I believe, are created with client-side components, not server-side.

He set this mission before himself - to create a lightweight Ajax form combining Dojo and the Zend Framework in the easiest way possible.

He assumes you already have both libraries installed (both relatively simple to get working) and gets straight to the code. First off is the creation of the view for the login form itself, the place where the Dojo toolkit is included and the Javascript functionality lives - as well as the simple login form. Next up is the controller for the PHP side, with three actions - a default action, one to perform the login, and the other to show a success message. Finally, there’s the Dojo javascript to make the request to the backend and the PHP script to validate if the username and password are correct.

Ajax File uploads to Amazon S3

Filed under: Web 2.0 News, Front Page, Articles, Ruby, Dojo — Dion Almaer at 10:05 am on Friday, July 21, 2006

Raphael Bauduin has written about his experience converting a Rails remote form into a dojo.io.bind call that enables him to upload a file:

File uploads are finally deployed! You can now specify in MyOwnDB that a detail of your entity is of the type “file”. This will let you attach a file to an entry, and subsequently replace or delete it. This required some changes in the application, more specifically in the way the forms are submitted back to the server.

For a file upload to work fine, you have to send it with the enctype attribute set to “multipart/form-data”. But that’s not all! You cannot just serialize the form in javascript like you can do with other input types because you cannot access the file from Javascript. The reason for this is security.

Luckily, the Dojo javascript toolkit has a workaround that works amazingly well, and is really easy to put in place. Dojo is facilitating all XMLHttprequest thanks to its dojo.io.bind method, which I discovered thanks to an article correctly title “Introduction to dojo.io.bind“. This article shows that dojo.io.bind can be used to send simple GET or POST request, but also to submit forms. At first, I thought it didn’t support file uploads (as stated in the document), but it does amazingly well. And, best of all, it is cross browser.

How does it work?

Dojo transparently creates an IFRAME, and submits the form through that IFRAME. That way, the browser itself is submitting the file. This has the side effect that you loose some functionality compared to XMLHttpRequests, like illustrated by the last remarks above.
I’m really happy with the result and the simplicity of the code. It allowed me to not touch any code outside of the form submission, and treat all form in the same way. When I started coding this, Dojo was the only solution I found, but Yahoo!’s YUI lib has gained the same functionality with its connection manager, taking the same approach of creating an IFRAME.