How to build an interactive Ajax Web Widget?

Question

Hi,

I am looking to create a web widget that can be easily integrated into any website using javascript and posts a form to my server, returns the data and displays the results appropriately. This will all happend in a small area of the host websites screen, like google adsense. I am aware that this is XSS and also the cross domain issues with ajax.

What I need help with is cementing the flow of such a widget. Has anyone done anything like this before?

The general process is: 1. Website embeds javascript - external js 2. Javascript renders a form 3. User submits form with POST data 4. POST data is sent to external server 5. Server responds and updates widget to display tabular data

Is this possible? How could it be achieved? Should I use / avoid using a JS framework such as Prototype / JQUery for this project?

If anyone knows any good tutorial resources for building widgets that would be great.

Any help would be greatly appreciated.

Thanks, Paul

Answer 1

using a library like jQuery is not possible, since you don't know whether the website that uses your widget has the jQUery-library referenced.

If you use an iframe, and show something of your own host, you are able to use a library if I'm not mistaken.

Answer 2

Hi,

Thanks for the iframe options. Makes sense that using a JS framework could conflict with the host website's javascript.

Is there anyway to achieve a javascript widget posting data to another server without the use of iframe or javascript framework?

Answer 3

I think that could be possible, but you'll have to write all the ajaxcode yourself from scratch.

Here's an example of a widget. Ok, it's a silly one, but you can see everything is written from sratch, without a javascriptlibrary.

It's also doesn't do ajaxcall either, but it's just to give you an idea.

http://www.cornify.com/js/cornify.js