Ajax Currency on e-commerce portal

It’s long since I last wrote about technology use.

I am not a geek on myself but would like to share about my little idea to retreat currency rate from different country via web service using PHP and plug to javascript compiling with the helping hand of mighty j-Query.

Pre-requisites:
1.) I assumed you mater PHP, I assume you master below all.
2.) I have some syntax error and my code are unstructured, if you’re curiosity could kill a cat, try explore more yourself, ya; I learned that well and until today too.

What you need doing above:
1.) Internet connection of course.
2.) Apache, php with nusoap.dll enabled if I not mistaken the dll name .
3.) javascript jQuery copy no matter what version.
4.) Price list covered by div / span or any wrapper.
5.) a url http://www.webservicex.net/CurrencyConvertor.asmx?wsdl

Steps:
1.) Do your PHP nusoap to post variable to the 5.) url. Or you can just copy my code below:

#name this code get-currency.php
#for a list of currency code refer to this url: http://www.webservicex.net/WCF/ServiceDetails.aspx?SID=18
#thanks to W.Lai for this code contributions
$from = ‘MYR’;$to = ‘USD’;$sUrl = ‘http://www.webservicex.net/CurrencyConvertor.asmx?WSDL’;$client = new SoapClient($sUrl, array(‘trace’ => 1));$a = $client->ConversionRate(array(“FromCurrency” => $from, “ToCurrency” => $to));$johnny = $a->ConversionRateResult;print $johnny;

2.) for example now you can retreat this USD currency rate,  you can write a sample html to retreat like below:
/*partial of your html code like below*/
<div id=”Price1″ rel=”230.00″>230.00</div><div id=”Price3″ rel=”4500.00″>4500.00</div><select id=”currencyBox”><option value=”">Select your currency</option><option value=”USD”/>US Dollar<option value=”CNY”/>Chinese Yuen</select></html>

3.) in your javascript of course you first call jQuery  file, then you configure jQuery  regular expression selector to convert their currency using jQuery base AJAX $.get like below:
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#currencBx’).change(function(){
var val = $this.value;
$(“div[id^=Prce]“).each(function(i){$(this).html(‘<i>Loading ‘+val+’ currency rate..</i>’;});
$.get(‘get-currency.php?from=MYR&to=’+val,{}, function(data, textStatus){if(textStatus==’success’){$(“div[id^=Prce]“).each(function(i){$(this).html(parseFloat(data) * parseFloat($(this).attr(‘rel’)); });}});});});</script>

4.) Done, then when you use the select box and change the value, it will grab the currency from webservicex and compile the new exchange rate to the screen without refershing, just by this simple code.

$sUrl = ‘http://www.webservicex.net/CurrencyConvertor.asmx?WSDL’;

$client = new SoapClient($sUrl, array(‘trace’ => 1));

$a = $client->ConversionRate(array(“FromCurrency” => $from, “ToCurrency” => $to));

$_SESSION['D_CURRENCY'] = $to;

$_SESSION['rate'] = $a->ConversionRateResult;

JSON with padding

Interesting morning as I just sat on a plastic chair watching through the new evolvement of technology at a sunny Sunday.  Today, certainly I yells for javascript alot with a happy cheerful joy as it made web distribution mashup very interesting with AJAX, and further added a new feature (old feature I suppose as I learn very slow, haha(:->) ), namely JSONP.
It works in a way round that we can call data without AJAX in the sense we abide to a common callback protocol  via appending it to the query string.  In the response, the server will provide us with a function wrap inside the callback specified in the query string, making our life easier without AJAX-ing them.

As AJAX has quite an amount of problem on browsers.  I am a javascript beginner who gone through this, IE 6 – 7 brought developer alot of issue with caching (no matter is GET / POST) unless we use a random math number to block the caching mechanism automatically set in those browser platform; that why I hate IE series too, no add on, security hole everywhere, and guess what, the recent browser usage statistic shows us the browser agent usage is now dominated by mozilla, what a good news.

Loading JSONP with query string is a piece of cake using DOM element creation appending to the child as below:

 function load(url) {
   var head = document.getElementsByTagName("head")[0];
   script = document.createElement('script');
   script.id = 'uploadScript';
   script.type = 'text/javascript';
   script.src = url;
   head.appendChild(script); //append the loaded js to the head..
 }

function putMeInsidePhotoFrame(data){
  //do whatever you like doing here..
}

In the event the javascript is loaded, just call it and give a callback name to the query string in the url so the server can wrap them in  a function. Example:

load('http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=public&from=0&to=20&minx=-180&miny=-90&maxx=180&maxy=90&size=medium&callback=putMeInsidePhotoFrame‘);

Assuming the callback is putMeInsidePhotoFrame, once the script is loaded, it will call this function returning the json object into the parameter executing this function

The desired output of panoramio (just a sample, surely panoramio wouldn’t output something like this ya) will be :

putMeInsidePhotoFrame({"johnny":"you are handsome!!"}); //output somesort like this..

Useful as the sense that we can achieve cross site data loading without having to use other tools such as a local proxy(I have not gone through that but surely tells me it will take power of CPU, wahahaha, bastard tech.), or flash (allow via a XML file setup on the domain, pretty complicated as I watch it), or etc. The JSONP drawback is still there as if there’s a dataserver black out, contain  invalid JSON data format, we will see javascript error, unless you handle the parameter properly.

Have a nice day.
Sourced from: http://ajaxpatterns.org/On-Demand_Javascript