AJAX用图像加载XML

I'm new to the world of AJAX, so please forgive my n00bishness. I have an XML document which looks like this:

<juices>
<smoothie id="SY4301">
    <name>Strawberry Yumghurt</name>
    <price currency="GBP">
        <perunit type="wholesale">1.23</perunit>
        <perunit type="RRP">1.89</perunit>
        <percrate>28.50</percrate>
    </price>
    <description>Velvety yoghurt smoothie made with fresh strawberry and rasperries.</description>
    <ingredients>
        <ingredient image="/images/strawberry.jpg" quantity="9">Strawberries</ingredient>
        <ingredient image="/images/Raspberry.jpg" quantity="4">Raspberries</ingredient>
        <ingredient image="/images/yoghurt.jpg"quantity="200ml">Greek Yoghurt</ingredient>
        <ingredient image="/images/honey.jpg" quantity="30ml">Runny Honey</ingredient>
        <ingredient image="/images/milk.jpg"quantity="40ml">Semi-skimmed Milk</ingredient>
    </ingredients>
    <nutrition per="100ml">
        <kcal unit="cal">140</kcal>
        <kjoules unit="KJ">442</kjoules>
        <carbohydrate unit="g">27.9</carbohydrate>
        <protein unit="g">1.4</protein>
        <fat unit="g">8.4</fat>
        <fibre unit="g">2.8</fibre>
    </nutrition>
    <imageloc>http://www5.bbk.ac.uk/~akaufm01/jvfma/Images/Products/morning_kick.jpg</imageloc>
</smoothie>
</juices>

I have an XSL document that is loading everything but the ingredients on page load, but what I want to achieve is that on clicking (link or button, I don't mind which), replace the contents of one of the divs (#description) with a list of the ingredients accompanied by its image, the location of which is stored in the image attribute.

I have looked at some tutorials which suggest using jQuery to achieve this but I haven't had much luck in getting this to work. I know I could also use the XMLHttpRequest function in JS but not sure which method is better.

Any advice would be greatly appreciated!

Thanks, Andy

well first you need to understand what are you doing with the ajax because there different ways to make an ajax called with jquery, let's use the basic attributes

//Handle the ajax in the event click of your button with ID MyButton
$('#MyButton').click(function(){
    $.ajax({
       type: "Type of your http Request could be GEt or Post",
       url: " the url where you obtain that xml",
       data: "ïf you need to pass some data to the url"
       dataType: "in your case should be XML which is the data type that you're going to handle in the success function",
       success: function(data){ 
            //parse your xml which it contains in the var data
            //You could set the data parse in your div with a append or html method
       }'define a function or put a function already defined',
       error: 'define a function in case of error'
    });
});

Here's the doc about an ajax in jquery

Here's you can find the documentation of the method about

And here how you can parse an xml using jquery