Olay PHP'den ziyade AJAX yeteneğinize bakıyor. Örneğin jQuery ile ajax kullanacaksanız, $.ajax ya da $.post gibi bir metot ile arkaplanda bir php dosyasına veri gönderip dönen sonuçları, sayfada istediğiniz bir noktaya işleyeceksiniz. Genel mantık budur ancak biz yine de örnek verdiğiniz siteden yola çıkalım ve neler yapmışlar bir bakalım:
Ajax post gönderilen adres :
http://www.infurn.com/files/xajax/product.php
Gönderilen parametreler: xjxfun=get_variation_dropdown_x&xjxr=1367226056362 &xjxargs[]=4683&xjxargs[]=94&xjxargs[]=1&xjxargs[]=319
Gelen cevabı alacaksınız ve parse edip istediğiniz bir noktaya yerleştireceksiniz:
<?xml version="1.0" encoding="utf-8" ?><xjx><cmd n="as" t="v94" p="innerHTML"><![CDATA[<div style="clear:both"></div>
<script type="text/javascript">
var stored_var = "";
var in_product_id = '';
function do_var_selection(value , from_select) {
var split_values = value.split("~");
$('.angles').fadeOut();
$('#no_pic').fadeOut(1);
//$('#galery_stage_no_pics').fadeOut(1);
$('#material_prev'+split_values[5]+' img').attr('src','/images/micro/'+split_values[4]+'/--/--.jpg'); ///media.php?ID='+split_values[4]+'&folder=micro
$('#variations #v'+split_values[5]+' img').removeClass('active');
$('#prev_image'+split_values[5]+'_'+split_values[4]).addClass('active');
$('#vnm'+split_values[5]).html(split_values[1]);
$('#zoom').fadeOut(1);
if(split_values[3] != "")
{
document.getElementById('galery_large_media_id').value = split_values[2];
$('#zoom').fadeIn(1);
$('#large_image').attr("onclick","xajax_dsp_form('show_media_lightbox', document.getElementById('galery_large_media_id').value );");
}
else
{
$('#large_image').attr('onclick','');
}
if(split_values[2] != "" && 0 < 2)
{
/*
infotext = 0;
document.getElementById('large_image').src = '/media.php?ID='+split_values[2]+'&folder=standard';
infotext ++;
new_images = '';
for(i=10; i < 15; i++)
{
if(split_values[i] > 0)
{
new_images += '<div onClick="document.getElementById(\'galery_large_media_id\').value = '+split_values[i]+'; document.getElementById(\'large_image\').src=\'/media.php?ID='+split_values[i]+'&folder=standard\';document.getElementById(\'galery_stage\').style.display=\'block\'" class="angles brighter" id="thumb'+split_values[i]+'"><center><img src="/media.php?ID='+split_values[i]+'&folder=thumb" height="64" style="height:64px" class="cursor" title="" alt=""></center></div>';
$('#zoom').fadeIn(1);
infotext ++;
}
}
$('#galery_stage_micros div').prepend(new_images);
if(infotext == 0)
{
//$('#galery_stage_no_pics').fadeIn();
}
*/
}
else
{
//document.getElementById('large_image').src = '/files/css/888/a/no_picture.png';
document.getElementById('large_image').src = '/images/standard/'+default_image+'/--/--.jpg'; //'/media.php?ID='+default_image+'&folder=standard'
$('#retina').css("background-image", "url('/images/large/"+default_image+"/--/--.jpg')"); //'/media.php?ID="+default_image+"&folder=large'
//$('#no_pic').fadeIn();
//$('#galery_stage_no_pics').fadeIn();
}
//xajax_get_variation_dropdown_x('4683|'+split_values[0],'94|');
document.getElementById('selected'+split_values[5]).innerHTML = split_values[1];
//document.getElementById('varselect94').value='';
$('#makro'+split_values[5]).attr('src','/images/standard/'+split_values[4]+'/--/--.jpg'); //'/media.php?ID='+split_values[4]+'&folder=standard'
if(from_select != "true")
{
$('#selected_sub'+split_values[5]).val(stored_var);
}
xajax_get_variation_dropdown_x(split_values[8]+split_values[0], split_values[7]+split_values[6],null,in_product_id,true);
}
var activearea = 'spacerarea';
var leftpos = 0;
moveright = 0;
var act_var_img = false;
function highlight_var_img(id)
{
if(act_var_img != false)
{
document.getElementById('thumb'+act_var_img).className = 'gal_inactive';
}
document.getElementById('thumb'+id).className = 'gal_active';
act_var_img = id;
}
function slide_right(count,slideid)
{
if( leftpos < (58*count-280)*-1)
{
clearInterval(moveright);
document.getElementById('img_slide_right_1').src='/files/css/020/a/spacer.gif';
}
else
{
leftpos -=2;
document.getElementById('innerslide'+slideid).style.marginLeft = leftpos+'px';
document.getElementById('img_slide_left_1').src='/files/css/020/a/skip-left-1.gif';
//document.getElementById('innerslide').style.left = leftpos+'px';
}
}
function slide_left(slideid)
{
if( leftpos == 0)
{
clearInterval(moveright);
document.getElementById('img_slide_left_1').src='/files/css/020/a/spacer.gif';
}
else
{
leftpos +=2;
document.getElementById('innerslide'+slideid).style.marginLeft = leftpos+'px';
document.getElementById('img_slide_right_1').src='/files/css/020/a/skip-right-1.gif';
}
}
function start_slide(direction, count, slideid)
{
if(direction =='right')
{
moveright = setInterval("slide_right("+count+","+slideid+")",10);
}
else
{
moveleft = setInterval("slide_left("+slideid+")",10);
}
}
</script>
<div style="clear:both"></div>
<img onmouseover="show_mat_detail('45550')"
rel="4683|347 gliech "
onmouseout="hide_mat_detail()" title="" src="http://cdn3.infurn.com/images/micro/45550/cdn_45550.jpg" class="cursor
active
"
width="25" height="25"
id="prev_image94_45550"
onclick="do_var_selection('347~Black~~~45550~94~23~94|~4683|~0~~~~~','true')"/>
<img onmouseover="show_mat_detail('46624')"
rel="4683|350 gliech "
onmouseout="hide_mat_detail()" title="" src="http://cdn3.infurn.com/images/micro/46624/cdn_46624.jpg" class="cursor
"
width="25" height="25"
id="prev_image94_46624"
onclick="do_var_selection('350~Cognac~~~46624~94~23~94|~4683|~0~~~~~','true')"/>
<img onmouseover="show_mat_detail('45558')"
rel="4683|351 gliech "
onmouseout="hide_mat_detail()" title="" src="http://cdn2.infurn.com/images/micro/45558/cdn_45558.jpg" class="cursor
"
width="25" height="25"
id="prev_image94_45558"
onclick="do_var_selection('351~yellow~~~45558~94~23~94|~4683|~0~~~~~','true')"/>
<img onmouseover="show_mat_detail('45557')"
rel="4683|352 gliech "
onmouseout="hide_mat_detail()" title="" src="http://cdn4.infurn.com/images/micro/45557/cdn_45557.jpg" class="cursor
"
width="25" height="25"
id="prev_image94_45557"
onclick="do_var_selection('352~White~~~45557~94~23~94|~4683|~0~~~~~','true')"/>
<img onmouseover="show_mat_detail('45554')"
rel="4683|353 gliech "
onmouseout="hide_mat_detail()" title="" src="http://cdn3.infurn.com/images/micro/45554/cdn_45554.jpg" class="cursor
"
width="25" height="25"
id="prev_image94_45554"
onclick="do_var_selection('353~Cream~~~45554~94~23~94|~4683|~0~~~~~','true')"/>
<img onmouseover="show_mat_detail('45555')"
rel="4683|354 gliech "
onmouseout="hide_mat_detail()" title="" src="http://cdn3.infurn.com/images/micro/45555/cdn_45555.jpg" class="cursor
"
width="25" height="25"
id="prev_image94_45555"
onclick="do_var_selection('354~Red~~~45555~94~23~94|~4683|~0~~~~~','true')"/>
<img onmouseover="show_mat_detail('45553')"
rel="4683|356 gliech "
onmouseout="hide_mat_detail()" title="" src="http://cdn3.infurn.com/images/micro/45553/cdn_45553.jpg" class="cursor
"
width="25" height="25"
id="prev_image94_45553"
onclick="do_var_selection('356~Coffee-brown~~~45553~94~23~94|~4683|~0~29191~29192~29193~29194~29195','true')"/>
<img onmouseover="show_mat_detail('45552')"
rel="4683|385 gliech "
onmouseout="hide_mat_detail()" title="" src="http://cdn1.infurn.com/images/micro/45552/cdn_45552.jpg" class="cursor
"
width="25" height="25"
id="prev_image94_45552"
onclick="do_var_selection('385~Camel~~~45552~94~23~94|~4683|~0~~~~~','true')"/>
<div style="clear:both"></div>
<span id="nm94" class="nm">You selected: <span id="vnm94">Black</span></span>
<script type="text/javascript">
stored_var = '347~Black~~~45550~94~23~94|~4683|~0~~~~~`Array.13';
//xajax_get_variation_dropdown_x('4683|347', '94|23');
//do_var_selection(stored_var);
</script>
<div style="float:right; display:none;">
<div id="material_canvas94" style="width:710px;overflow:hidden;height:480px; position:absolute; left:50%; margin-left:-365px; top:-800px; background:#9f9f9f; padding:10px">
<div style="height:480px; background:#000000">
<div id="selected94" style="padding:10px; text-align:center;color:#FFFFFF">Camel</div>
<div style="width:500px; height:250px; border:1px solid #9f9f9f; margin:10px 100px; overflow:hidden; background:#FFFFFF"><center><img id="makro94" src="http://cdn1.infurn.com/images/original/45550/cdn_45550.jpg" rel="0" height="250"/></center></div>
<div style="width:350px; float:left"><a onclick="$('#material_canvas94').css('top','-800px'); $('#confirmdiv').remove()" class="abort">Cancel</a></div>
<div style="width:350px; float:right"><a onclick="do_var_selection(stored_var);$('#material_canvas94').css('top','-800px'); $('#confirmdiv').remove()" class="apply">Apply</a></div>
<div style="clear:both"></div>
<div id="slider" style="margin:20px 10px 10px 10px; height:120px; overflow-y:auto" class="">
<div style=" " id="innerslide4683">
<div class="div_50"><div onMouseOver=""
onMouseOut=""
onClick="$('#makro94').attr('src','http://cdn1.infurn.com/images/orginal/45550/cdn_45550.jpg');document.getElementById('selected94').innerHTML='Black';stored_var = '347~Black~~~45550~94~23~94|~4683|~0~~~~~';$('#addressbook_message').fadeOut(1);"
class="gal_inactive" id="thumb347">
<img id="img347" src="http://cdn3.infurn.com/images/thumb/45550/cdn_45550.jpg" height="50" width="50" class="cursor" title="Black" alt="Black"></div></div>
<div class="div_50"><div onMouseOver=""
onMouseOut=""
onClick="$('#makro94').attr('src','http://cdn4.infurn.com/images/orginal/46624/cdn_46624.jpg');document.getElementById('selected94').innerHTML='Cognac';stored_var = '350~Cognac~~~46624~94~23~94|~4683|~0~~~~~';$('#addressbook_message').fadeOut(1);"
class="gal_inactive" id="thumb350">
<img id="img350" src="http://cdn4.infurn.com/images/thumb/46624/cdn_46624.jpg" height="50" width="50" class="cursor" title="Cognac" alt="Cognac"></div></div>
<div class="div_50"><div onMouseOver=""
onMouseOut=""
onClick="$('#makro94').attr('src','http://cdn4.infurn.com/images/orginal/45558/cdn_45558.jpg');document.getElementById('selected94').innerHTML='yellow';stored_var = '351~yellow~~~45558~94~23~94|~4683|~0~~~~~';$('#addressbook_message').fadeOut(1);"
class="gal_inactive" id="thumb351">
<img id="img351" src="http://cdn1.infurn.com/images/thumb/45558/cdn_45558.jpg" height="50" width="50" class="cursor" title="yellow" alt="yellow"></div></div>
<div class="div_50"><div onMouseOver=""
onMouseOut=""
onClick="$('#makro94').attr('src','http://cdn1.infurn.com/images/orginal/45557/cdn_45557.jpg');document.getElementById('selected94').innerHTML='White';stored_var = '352~White~~~45557~94~23~94|~4683|~0~~~~~';$('#addressbook_message').fadeOut(1);"
class="gal_inactive" id="thumb352">
<img id="img352" src="http://cdn4.infurn.com/images/thumb/45557/cdn_45557.jpg" height="50" width="50" class="cursor" title="White" alt="White"></div></div>
<div class="div_50"><div onMouseOver=""
onMouseOut=""
onClick="$('#makro94').attr('src','http://cdn2.infurn.com/images/orginal/45554/cdn_45554.jpg');document.getElementById('selected94').innerHTML='Cream';stored_var = '353~Cream~~~45554~94~23~94|~4683|~0~~~~~';$('#addressbook_message').fadeOut(1);"
class="gal_inactive" id="thumb353">
<img id="img353" src="http://cdn1.infurn.com/images/thumb/45554/cdn_45554.jpg" height="50" width="50" class="cursor" title="Cream" alt="Cream"></div></div>
<div class="div_50"><div onMouseOver=""
onMouseOut=""
onClick="$('#makro94').attr('src','http://cdn4.infurn.com/images/orginal/45555/cdn_45555.jpg');document.getElementById('selected94').innerHTML='Red';stored_var = '354~Red~~~45555~94~23~94|~4683|~0~~~~~';$('#addressbook_message').fadeOut(1);"
class="gal_inactive" id="thumb354">
<img id="img354" src="http://cdn3.infurn.com/images/thumb/45555/cdn_45555.jpg" height="50" width="50" class="cursor" title="Red" alt="Red"></div></div>
<div class="div_50"><div onMouseOver=""
onMouseOut=""
onClick="$('#makro94').attr('src','http://cdn3.infurn.com/images/orginal/45553/cdn_45553.jpg');document.getElementById('selected94').innerHTML='Coffee-brown';stored_var = '356~Coffee-brown~~~45553~94~23~94|~4683|~0~29191~29192~29193~29194~29195';$('#addressbook_message').fadeOut(1);"
class="gal_inactive" id="thumb356">
<img id="img356" src="http://cdn1.infurn.com/images/thumb/45553/cdn_45553.jpg" height="50" width="50" class="cursor" title="Coffee-brown" alt="Coffee-brown"></div></div>
<div class="div_50"><div onMouseOver=""
onMouseOut=""
onClick="$('#makro94').attr('src','http://cdn1.infurn.com/images/orginal/45552/cdn_45552.jpg');document.getElementById('selected94').innerHTML='Camel';stored_var = '385~Camel~~~45552~94~23~94|~4683|~0~~~~~';$('#addressbook_message').fadeOut(1);"
class="gal_inactive" id="thumb385">
<img id="img385" src="http://cdn3.infurn.com/images/thumb/45552/cdn_45552.jpg" height="50" width="50" class="cursor" title="Camel" alt="Camel"></div></div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both; height:10px;"></div>
<div id="v94|23"></div><div style="clear:both"></div>]]></cmd><cmd n="js">document.getElementById('option').selected='true'</cmd><cmd n="js">$('.line2').fadeIn()</cmd><cmd n="as" t="strikeprice" p="innerHTML"><![CDATA[£1,219.00]]></cmd><cmd n="as" t="campdiffprice" p="innerHTML"><![CDATA[£969]]></cmd><cmd n="as" t="savep" p="innerHTML">0.03%</cmd><cmd n="js">document.getElementById('discont').src = '/files/css/008/a/percent/_84_org.png'</cmd><cmd n="js"><![CDATA[document.getElementById('large_image').src = '/media.php?ID='+default_image+'&folder=standard']]></cmd><cmd n="js"><![CDATA[$('#retina').css('background-image', 'url("/media.php?ID=default_image&folder=large")')]]></cmd><cmd n="js">$('#sgn_img').html('')</cmd><cmd n="js">$('#no_pic').fadeIn(1)</cmd><cmd n="js">$('#galery_stage_no_pics').fadeIn(1)</cmd><cmd n="js">$('#galery_stage_micros #var_imgs').html('')</cmd><cmd n="js">$('#all_imgs div').fadeIn(1)</cmd><cmd n="js">$('#all_imgs img').fadeIn(1)</cmd><cmd n="js">$('#all_imgs').fadeIn(1)</cmd><cmd n="js">$('#galery_stage_micros').fadeIn(1)</cmd><cmd n="js">$('#var_imgs').html('')</cmd><cmd n="as" t="price" p="innerHTML"><![CDATA[£969]]></cmd><cmd n="as" t="campprice" p="innerHTML"><![CDATA[£969]]></cmd><cmd n="js">$('#navision_id').val('**230319AB04EZ09****')</cmd></xjx>