AJAX kullanarak javascript ile web servis çağırabiliyoruz.Bu bize form submit yapıp bütün fieldlardaki değerli sunucuya gönderip geri almamız yerine sadece bir html bileşeninin event ‘i ile işlem yamamızı ve diğer bileşenlerin değerleri değişmeden kalmasına olanak sağlıyor.
Burada json nesene dönen restful bir web servisten gelen değerlerin jsf inputtext bileşenlerine atanmasını sağlayan javascript kodunu görüyoruz.
Öncelikle bir html button nesnesinin onclik event’i oluştuğunda çağrılacak javascript fonksiyonunu belirliyoruz.
Daha sonra script tagları içerisinde javascript fonksyonumuzu yazıyoruz.
Bu fonksyon bir tane XmlHttpRequest(bu pek çok tarayıcıda bulunan bri nesnedir) oluşturup bu request’in onreadystatechange eventine bir fonksiyon ataması yapıyor. Bu fonksyion readyState 4 ise ve status 200 ise (yani başarılı bir şekilde XmlHttpRequest’e cevap geldiyse callback fonksiyonu çağırıyor.
Tarayıcının XmlHttpRequest nesnesi ile web servis adresi open ile çağrılır ve send yapılır.
Suncuudnan cevap geldiğinde callback fonksiyonu (myFunction) çağrılır. Bu fonskyon gelen cevabu JSON nesnesi olarak parse eder. Gelen sonucun jsf bileşnelerine atamasını yapar.
<button type=”button” id=”buttonAdSoyadGetir” onclick=”loadDoc(‘webservisadres’, myFunction)”>Ad Soyad Getir</button>
<script>
function loadDoc(url, cFunction) {
console.log(“loadDoc”);
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
console.log(“xxhttp shate changed”);
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
console.log(document.getElementById(“form1:Id”).value);
xhttp.open(“GET”, url+”?param=”+document.getElementById(“form1:Id”).value, true);
xhttp.send();
}
//callback function
function myFunction(xhttp) {
console.log(“callback”);
var data = JSON.parse(xhttp.responseText);
document.getElementById(“form1:Name”).value =data[“name”];
document.getElementById(“form1:Surname”).value =data[“surname”];
}
</script>