I'm still alive ....

Its been a long time since my last post (over 8 months) so I have decided to start using this blog again ... mainly for me to keep records of the little tricks / tips I have learnt or read during my working day.

Im currently working on a project to rewrite a billing system - Im using symfony (PHP Framwork) with JQuery and MySQL.....

I will hopefully post some updates in a few days time ... I have learnt a lot about symfony, JQuery and MySQL over the past few months :-)

JavaScript Sandbox

Just found an excellent site - allows you to enter HTMl, CSS and JavaScript and then show the result - very useful http://jsfiddle.net/ you can even save the page and share as a link

Cross Domain AJAX

The other day I was looking for a simple way of accessing a foreign domain using AJAX - I needed to POST some data to a 3rd Party webservice. JavaScript opens up a few different ways of solving this problem, but most of them require some addition (a file normally) to be placed on the foreign domain web server - this option was not open to me. So I decided to create a simple proxy in PHP - the idea is that I would use JavaScript to POST using AJAX to the PHP script, and then the PHP script would connect to the 3rd party, POST the data and then return the value back to the JavaScript callback. Below is the code I used.

Firstly the PHP proxy script

//open curl connection
$cc = curl_init();
// get url from $_GET
$url = $_GET['url'];
// set the curl url
curl_setopt($cc, CURLOPT_URL, $url);
// set return option
curl_setopt($cc, CURLOPT_RETURNTRANSFER, true);
// set method to POST
curl_setopt($cc, CURLOPT_POST, 1);
 
// loop the $_POST entries and save
foreach ($_POST as $name => $value){
    $data[$name] = $value;
}

// set the post data
curl_setopt($cc, CURLOPT_POSTFIELDS, $data);
 
//execute curl post
$result = curl_exec($cc);
 
//close connection
curl_close($cc);
 
echo $result;

Very simple script - basic cURL setup between lines 01 and 10. The loop at line 13 goes through the POST values sent to the proxy and stores them in a variable for use later in the script. Line 18 sets up the POST data and line 21 sends the request. The cURL connection is then closed and the result is sent back the caller (JavaScript) on line 26.

The JavaScript is equally as simple (below I am using YUI Connection Manager)

// Example POST data
var postData = "name1=value1&name2=value2&name3=value3;

// Handle Success
var handleSuccess = function(o){
  // Handle a success - output to console
  console.log(o.responseText);
}
// Handle Failure
var handleFailure = function(o){
  //handle failure calling URL
  console.log(o.statusText);
}

// Setup callback 
var callback =  {
  success:handleSuccess,
  failure:handleFailure
};
  
// setup the url of the proxy script
// passing the foreign url in as a parameter
var callurl = "/proxy.php&url=http://www.google.co.uk/";
// make the AJAX request
YAHOO.util.Connect.asyncRequest('POST', callurl, callback, postData);

As you can see - very simple - setup the POST data on line 02, setting up the handlers between lines 05 and 19. The final 2 lines (23 and 25) setup the URL to the proxy we created above and the actual AJAX call to the script.

Welcome to devtreats

Welcome to devtreats - a resource for some Web Development Treats. The aim of this blog is to share some of the little treats that I have come across or developed over the years - you may read things that have been done a thousand times or something that you have never thought about. But the idea is to share and record the little re-usable treats.

If you have any ideas or requests for articles then please add some comments to this post or follow me on twitter @manseuk

Thanks
Paul