Recent Blog Posts

Blog Posts » AJAX »

Connecting to AJAX using a proxy server

With AJAX not allowing Cross domain connections, developers are finding other methods to push the limits of what is and is not possible using AJAX.

There is no issue calling AJAX to fetch data from our local database but if we try to connect to one of our other domains to get that information we quickly learn that AJAX has some limitations.

Enter the Proxy Server! Well in this case it is our server that will act as the proxy. 

For example if you wanted to call Yahoo Web Services API and ask them what the Weather was like in Beverly Hills the URL might look something like this:

http://xml.weather.yahoo.com/forecastrss?p=90210

Now if you try and call it with AJAX you will get an error. So we now have to place a proxy between the Application and the Remote Server.

On your server you will need to setup a PHP script to work as the proxy. The PHP code will only do one thing, read the file requested.

To keep it organized you can call the url as a query string in your data url like so:

proxyserver.php?data_url=http://xml.weather.yahoo.com/forecastrss?p=90210

and in the PHP file:

readfile($_REQUEST[data_url]);

One line of code is all your proxy server needs to be. I would of course add some conditions so that all requests come from your domain or use some sort of security key checking, etc.

Cross Domain Security and AJAX

With AJAX slowly but surely replacing high end Flash Applications one thing remains true with both Platforms - Cross Domain Security Issues!

Flash had this annoying habit of limiting your data connections to the same domain. Not just the same domain but specific to address. For example:

www.sleekinteractive.com is not the same as sleekinteractive.com. Calling a Flash LoadVars or AJAX call from one to the other will result in errors (Cross Domain Security) in place by all browsers and Adobe Flash Player to limit calls to the same domain.

So how do you get around this?

Well the 1st thing is to force the address to redirect to address with www. (You can force the other way as well but for this example I will be forcing to www.sleekinteractive.com).

in your .htaccess file put in the following rules for Apache:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^mydomain.com$ [NC]
RewriteRule ^(.*)$ http://www.mydomain.com/$1 [R=301,L]

That should force any entries into the website to a www. path.

Next thing is to check that your basepath in your web application is doing the same (using the www. in path)

That should take care of all local connections and allow you to use absolute url requests anywhere inside your web application.

AJAX and Ecommerce, a Match Made in Heaven

More and more clients are investing in usability and AJAX to up their Ecommerce game.

Traditional shopping cart experiences require much longer to get a customer checked out. How many times have you started to purchase a product and stopped because the process was a few steps too long or you had enough waiting for the pages to load? AJAX can minimize data load and streamline your User Interface pushing your sales up in return and leaving your customers with a great impression. After all repeat business is the best kind of business.

Impulse Shopping? Well you can only do so much in a virtual atmosphere but there is a lot of ways to use AJAX to present options and products to customers that are far more interactive that simply suggesting a product. Drag and drop shopping is a good example of Impulse shopping online.

How long is this going to take?

You may find it easier to code it from scratch rather than fixing a dead horse but it is possible to convert an existing cart to AJAX if you have code that is pretty fresh. So let's break down the key components:

• UI calling AJAX requests
• PHP scripting to receive AJAX calls and present different data or set cookies based on requests sent
• Client side scripting of any Callback functions required, depending on how intricate you want to get.

Pretty simple to start off with. Basically it is just a matter of changing any form actions to AJAX calls. It can be time consuming changing forms to AJAX sends so I would have Javascript change handlers onload. This takes care of browser compatability issues as well.