9
AJAX-2

sunu (Ajax-2)

Embed Size (px)

Citation preview

Page 1: sunu (Ajax-2)

AJAX-2

Page 2: sunu (Ajax-2)

AJAX ÖRNEKLERİ KAYNAK KOD AÇIKLAMALARI JAVA SCRIPTLER SERVLETLER

İŞLENECEK KONULAR

Page 3: sunu (Ajax-2)

AJAX ÖRNEKLERİ

Google Maps Gmail Google Pages Mint Google Suggest ZK Demo

Page 4: sunu (Ajax-2)

KAYNAK KOD AÇIKLAMALARI

XMLHttpRequest nesnesinin oluşturulması

Sayfa yenilenmeksizin sunucuya bağlanıp senkron ya da asenkron iletişime izin veren tam olarak Ajax’ın iskeletini oluşturan nesnedir. İki türlü oluşturulabilir.

1- xmlRequest=new XMLHttpRequest. Bu nesne internet Explorer 7 ve üzeri, firefox, chrome, safari ve opera gibi tarayıcılar tarafından desteklenmektedir.

2- xmlRequest=new ActiveXObject("Microsoft.XMLHTTP").Bu ise Internet Explorer’ın eski sürümleri için kullanılmaktadır. Performans söz konusu olduğunda Microsoft.XMLHTTP2 de kullanılabilir.

Page 5: sunu (Ajax-2)

ÖRNEK

var xmlRequest=false;

function init(){

if (window.XMLHttpRequest){

xmlRequest=new XMLHttpRequest();

}

else if(window.ActiveXObject){

xmlRequest=new ActiveXObject("Microsoft.XMLHTTP");

}

}

Page 6: sunu (Ajax-2)

KAYNAK KOD AÇIKLAMALARI

Ajax’ın işleyişinin örnek metotla gösterimi

Başlangıçta init fonksiyonu çağrılarak tarayıcı versiyonuna göre uygun XMLHttpRequest kullanımı için oluşturulmuştur. Asenkron iletişimde bulunacak sayfa url değişkenine alınmıştır. Bu sayfa Edit olunacak kitabin bilgilerini veri tabanından çekip kullanıcının değişiklik yapabileceği bir forma aktarmaktadır.

Page 7: sunu (Ajax-2)

KAYNAK KOD AÇIKLAMALARI

var URL="EditOperator?bookID="+bookID; //adres oluşturuldu

xmlRequest.onreadystatechange=editAjaxResponse; // burada asenkron iletişimde servletde cevap dönünce karşılayacak metot belirlenir.

xmlRequest.open("GET",URL,true); //servlete gönderilir

xmlRequest.send(null);

xmlRequest.readyState==4)&&(xmlRequest.status==200 //sayfadan cevap geldi hiçbir sorun yok anlamına gelir.

Page 8: sunu (Ajax-2)

JAVA SCRIPTLER

function editAjax(bookID){

init();

showPage();

var URL="EditOperator?bookID="+bookID;

xmlRequest.onreadystatechange=editAjaxResponse;

xmlRequest.open("GET",URL,true);

xmlRequest.send(null);

}

Page 9: sunu (Ajax-2)

SERVLETLER

package shop;

import java.io.IOException;

import java.util.Collection;

import javax.faces.context.FacesContext;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;