Yahoo! Connetcion Manager ile php sayfalardan GET yöntemiyle verilerin döndürülmesi örneği.
Örnek Kod:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Yahoo Connection Manager - GET Örneği</title>
<script type="text/javascript" src="yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="yui/build/event/event.js"></script>
<script type="text/javascript" src="yui/build/connection/connection.js"></script>
<script type="text/javascript">
//< ![CDATA[
function requestMusteriInfo(){
var id = document.getElementById("musteriId").value;
var oCallback = {
success: function (oResponse) {
musteriBilgileriniGoster(oResponse.responseText);
},
failure: function (oResponse) {
musteriBilgileriniGoster("Bir hata meydana geldi: " + oResponse.statusText);
}
};
YAHOO.util.Connect.asyncRequest("GET","testpage.php?id=" + id, oCallback);
}
function musteriBilgileriniGoster(sText){
var musteriBilgileri = document.getElementById("musteriBilgileri");
musteriBilgileri.innerHTML = sText;
}
//]]>
</script>
</head>
<body>
<p>Bilgi elde etmek için ID numarası girin:</p>
<p>Müşteri ID'si: <input type="text" id="musteriId" value="" /></p>
<p><input type="button" value="Müşteri Bilgilerini Al" onClick="requestMusteriInfo()" /></p>
<div id="musteriBilgileri"></div>
</body>
</html>
Bu örneğimizde yui kütühane paketini aynı klasöre koymanız yada include edilen kütüphanelerin bulunduğu yerler gösterilmelidir.
Bu satırda görüldüğü gibi müşteri ID numarası testpage.php dosyasına id değişkeninde gönderiliyor ve sonuç musteriBilgileri isimli katmana(div) geri döndürülüyor.
Bu işlemi yaparken sayfanın refresh edilmediğine dikkat ettiniz mi. Ajax kullanımının arkasında yatan kullanım nedeni bu.
Örmeğmğz GET yöntemiyle ve yui(Yahoo! Connection Manager) kütüphanei yarımıyla kolayca yapılmıştır.
Bir sonraki örneğimizde işlemin POST ile nasıl yapıldığını göreceğiz.
