View Sidebar
jQuery ve AJAX

jQuery ve AJAX

Aralık 2, 2012 13:447 yorum

Web standartlarının gelişmesiyle birlikte yeni teknolojiler ortaya çıkıyor ve birleşiyor. Ajax ve jQuery kombinasyonu bu birleşimlerin en güzel örneklerinden biridir.

Ajax ile yeni tanıştığımız dönemlerde, Ajax denen bu yöntemi kullanmak deneyimli yazılımcılar için bile zor olabiliyordu. Basit bir form ile veri göndermek için bile, onlarca satır kod yazmak gerekiyordu. Üstüne üstlük, yazdığınız bu kodun tüm tarayıcılarda sorun şekilde çalışacağının garantisi de yoktu. Yani her tarayıcı için farklı kodlar yazmak, bunları her seferinde tüm tarayıcılar için test etmek bizler için zorunlu bir hal almıştı.

Günümüzde, işte tam bu noktada, jQuery denen nimet, yani teknolojik adıyla “kütüphane” imdadımıza yetişiyor. Çok kısa kodlar ile, tüm tarayıcılarda sorunsuz çalışan Ajax istekleri yapabiliyoruz.

Bu makalemi 4 ana başlık altında ele alacağım.

  • Ajax İstekleri
  • Ajax Olayları
  • Yardımcı Fonksiyonlar
  • Kısaltılmış Metotlar

Ajax İstekleri

jQuery.ajax()

Asenkron olarak, yani sayfanın yüklenmesinden bağımsız olarak HTTP Ajax istekleri yollamak için kullanacağımız temel metottur. Yapacağımız isteğin türüne göre, bir çok ayarı bulunmaktadır. Bunlardan kısaca bahsetmek gerekirse:

  • accepts: Server’a gönderdiğimiz rica başlığında (request header) gönderilen hangi tipte veri istediğimizi belirttiğimiz ayardır. Kullanılması gerekiyorsa, $.ajaxSetup() metodunda kullanılması öneriliyor. Atanacak değer daha önce ele aldığım jQuery ve veri tipleri konusunda bahsettiğim veri tiplerinden biri olabilir.
  • async: Varsayılan olarak, true değeri atanmış olan bu ayara, senkron istekler yapmak istiyorsak, false değeri atanmalıdır. Cross-domain ve dataType: “jsonp” olarak ayarlanmış istekler, senkron ricaları desteklemez. Unutmayın, senkron ricaları, kullanıcının tarayıcısını belirli bir süre kullanılmaz, işlem yapamaz hale getirebilir.
  • beforeSend(jqXHR, settings): Yine jQuery ve veri tipleri konusunda bahsettiğim, jqXHR nesnesini modifiye etmek için kullanılır.
  • cache: Varsayılan olarak true değeri atanmıştır. Eğer false değeri atanırsa, tarayıcı rica edilen sayfaların önbellekten yüklenmemesi için zorlanır ve query string kısmına “_=[TIMESTAMP]” değeri eklenir.
  • complete(jqXHR, textStatus): Rica tamamlandığında ve error, success geri dönüş fonksiyonları işletildikten sonra, çalışacak geri dönüş fonksiyonudur. textStatus değeri durumu kategorize etmek için kullanılır. Alabileceği değerler şunlardır: (“success”, “notmodified”, “error”, “timeout”, “abort”, “parsererror”)
  • contents: JQuery’nin dönen cevabı nasıl ayrıştıracağını belirmek için kullanılan bir string/düzenli ifadeler ikilisidir.
  • contentType: Varsayılan olarak bir çok durum için uygun olan ‘application/x-www-form-urlencoded; charset=UTF-8’ tanımlanmıştır. Eğer karakter seti tanımlaması yapmaz iseniz, jQuery server’ın kendi karakter setini kullanacaktır ve buna göre server tarafında uygun ayrıştırmayı yapmanız gerekmektedir.
  • context: Varsayılan olarak context yani bağlam, çağrımız ($.ajaxSettings veya $.ajax) tarafından kullanılan ayarları temsil eden nesnedir.
  • converters: Varsayılan olarak {“* text”: window.String, “text html”: true, “text json”: jQuery.parseJSON, “text xml”: jQuery.parseXML} değerleri atanmıştır. dataType -> dataType dönüştürücüsü. Her bir dönüştürücünün değeri, cevaptan dönen değeri dönüştüren bir fonksiyondur.
  • crossDomain: Aynı alan adı üzerinde JSONP gibi crossDomain ricası oluşturmak istiyorsanız, bu değer false yapın. Bu server taraflı yönlendirmeye olanak sağlayacaktır.
  • data: Server’a gönderilecek veriyi tanımlamak için kullanılır.
  • dataFilter(data, type): XMLHttpRequest nesnesinden dönen ham veriyi filtrelemek için kullanılır.
  • dataType: Varsayılan olarak, yani bu değeri boş bırakırsak, kendisi veri tipini (xml, json, script, html) belirleyebilir. Dönecek olan değer kesin ve tek tip ise, bu değerlerden herhangi birini tanımlayabiliriz.
  • error(jqXHR, textStatus, errorThrown): Eğer istek başarısız olursa çalışacak fonksiyondur.
  • global: Global bir Ajax olay işleyicisi tetikliyor olalım. Bu değer bu true olacaktır. ajaxStart veya ajaxStop gibi global olay işleyicilerinin tetiklemelerinden korunmak için false olarak ayarlayın.
  • headers: Ajax ricasıyla birlikte yollanacak anahtar/değer ikililerinin olduğu yapıdır. Bu ayar beforeSend fonksiyonu çağrılmadan önce ayarlanmalıdır. Aksi taktirde ayarladığımız header değerlerinin üzerine yazılabilir.
  • ifModified: Ricadan sonra yapılan cevabı, sadece bir önceki cevaptan farklı ise kabul etmek için kullanılır. Varsayılan değeri false’tur.
  • isLocal: Bulunan ortamı “local” (mesela the filesystem) gibi algılanmasına izin verir sağlar.
  • jsonp: Geri dönüş fonksiyonunu jsonp ricası olarak override eder. Query string’teki “callback=?” alanı yerine “onJSONPLoad=?” servera geçilir.
  • jsonpCallback: JSONP ricası için geri dönüş fonksiyonunu jQuery’nin random ve tekil olarak verdiği isimden farklı olarak isimlendirmek için kullanılır.
  • mimeType: XHR mime type’a override etmek için kullanılır.
  • username: HTTP erişim kontrolü için kullanılacak olan kullanıcı adını tanımlar.
  • password: HTTP erişim kontrolü için kullanılacak olan şifreyi tanımlar.
  • processData: Varsayılan olarak nesne olarak gönderilen veriyi query string ifadeye dönüştürür.
  • scriptCharset: Sadece “jsonp” veya “script” veri tipleri ve “GET” için çalışacaktır. Karakter setini tanımlamaya zorlar.
  • statusCode: İşlem sonucunda oluşan işlem durum kodunu tanımlar. Aşağıdaki örnekte istek yapılan sayfa bulunamaz yani 404 hata kodu alınırsa ekrana “sayfa bulunamadı” uyarısı veriyoruz.
    $.ajax({
      statusCode: {
        404: function() {
          alert("sayfa bulunamadı");
        }
      }
    });
    
  • success(data, textStatus, jqXHR): İşlem başarı ile tamamlanırsa çağrılacak fonksiyonu tanımlamak için kullanılıyor.
  • timeout: Mili saniye cinsinden istek için olan zaman aşımı süresini belirler.
  • traditional: Geleneksel parametre serileştirme kullanmak istiyorsanız bu değeri true olarak ayarlayın. Parametre serilerştirme hakkında aşağıda jQuery.Param() başlığına göz atabilirsiniz. Daha detaylı bilgi isterseniz jQuery Dökümantasyonuna bakabilirsiniz -> Parametre serileştirme nedir?
  • type: Varsayılan değer GET’tir. POST veya GET olarak ayarlamak için kullanılır. Diğer HTTP metotları olan PUT ve DELETE’de burada kullanılabilir ancak onlar tüm tarayıcılar tarafından desteklenmemektedir.
  • url: İsteğin gönderileceği URL’yi belirler.
  • xhr: Varsayılan değer: ActiveXObject (IE), başka tarayıcılarda XMLHttpRequest. Yaratılan XMLHttpRequest nesnesi için geri dönüş fonksiyonudur.
  • xhrFields: XHR nesnesinin içinde ayarlanan fieldName-fieldValue şeklindeki ikililerdir. Örnek vermek gerekirse, çapraz alan adı kullanımlarında withCredentials değerini true olarak ayarlayabilirsiniz.
    $.ajax({
       url: capraz_alanadi_urlsi,
       xhrFields: {
          withCredentials: true
       }
    });
    

jQuery.ajaxSetup()

Ajax ricası yapmadan önceden ayarları yapmamızı sağlar.

$.ajaxSetup({
   url: "/xmlhttp/",
   global: false,
   type: "POST"

 });
 $.ajax({ data: myData });

Ajax ricası yapacağımız URL’yi “/xmlhttp/” olarak ayarladık. Global işleyicileri devre dışı bıraktık ve GET metodu yerine POST metodu kullandık. Daha sonra yer alan Ajax metodu içerisinde, herhangi başka bir ayar yapmak zorunda kalmadan isteğimiz veriyi gönderiyoruz.

jQuery.ajaxPrefilter()

Her bir rica gönderilmeden önce ve bunlar $.ajax() tarafından işlem görmeden önce, özel Ajax seçeneklerini ele alır veya var olan ayarları düzenlemek için kullanılır.

Genel olarak .ajaxPrefilter() kullanımı şuna benzer.

$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
  // options, control originalOptions, store jqXHR, vs...
});
  • options: Ayarları ister
  • originalOptions: Ajax metodu tarafından sağlanan ayarlar. Düzenlenmemiş, ve ajaxSettings tarafından gelen varsayılan ayarlar olmadan.
  • jqXHR: Ricaya bağlı olan XHR nesnesi.

Ajax Olayları

.ajaxComplete()

Ajax isteğimiz tamamlandığı anda olacakları ele alır.

Örnek uygulama -> https://ulviercan.com/teknoblog/wp-content/uploads/myCodeSamples/jQuery_Ajax/ajax_ajaxComplete/

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<fieldset>
    <div id="sonuc"><span style="font-style: italic;"></span></div>
</fieldset>

<script>
    $.ajax({
        url: "https://ulviercan.com/teknoblog/wp-content/uploads/myCodeSamples/jQuery_Ajax/ajax.txt"
        }).done(function( html ) {
        $("#sonuc span").append(html);
    });

    $("#sonuc").ajaxComplete(function(event,request, settings){
        $(this).prepend("Rica tamamlandı. Sonuç: ");
    });
</script>
</body>
</html>

.ajaxComplete() olayı ile sonuç geldikten sonra .prepend() metodu kullanarak sonuç metninin başına “Rica tamamlandı. Sonuç: ” cümlesini ekledik.

.ajaxError()

Ajax isteği bir hata ile sonuçlanırsa bu olay çalışacaktır.

Örnek uygulama -> https://ulviercan.com/teknoblog/wp-content/uploads/myCodeSamples/jQuery_Ajax/ajax_ajaxError/

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<fieldset>
    <div id="sonuc"><span style="font-style: italic;"></span></div>
</fieldset>

<script>
    $.ajax({
        url: "https://ulviercan.com/teknoblog/wp-content/uploads/myCodeSamples/jQuery_Ajax/XxXajaxXx.txt"
        }).done(function( html ) {
        $("#sonuc span").append(html);
    });

    $("#sonuc").ajaxComplete(function(event,request, settings){
        $(this).prepend("Rica tamamlandı. Sonuç: ");
    });

    $("#sonuc").ajaxError(function(event,request, settings){
        $(this).prepend("Hata Oluştu.");
    });
</script>
</body>
</html>

Server’da XxXajaxXx.txt dosyası bulunamadığından dolayı hata oluşuyor. Bunun sonucunda ekrana “Hata Oluştu.” uyarısı veriyoruz. Burada dikkatinizi çekmek istediğim bir nokta var. Ajax ricasının başarılı veya başarısız olması gözetmeksizin .ajaxComplete() olayımız çalışıyor ve ekrana “Rica tamamlandı. Sonuç: ” metnini yazdırıyor.

.ajaxSuccess()

Ajax ricası başarı ile sonuçlanırsa bu olay çalışacaktır.
Örnek uygulama -> https://ulviercan.com/teknoblog/wp-content/uploads/myCodeSamples/jQuery_Ajax/ajax_ajaxSuccess/

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<fieldset>
    <div id="sonuc"><span style="font-style: italic;"></span></div>
</fieldset>

<script>
    $.ajax({
        url: "https://ulviercan.com/teknoblog/wp-content/uploads/myCodeSamples/jQuery_Ajax/ajax.txt"
        }).done(function( html ) {
        $("#sonuc span").append(html);
    });

    $("#sonuc").ajaxComplete(function(event,request, settings){
        $(this).prepend("Rica tamamlandı. Sonuç: ");
    });

    $("#sonuc").ajaxSuccess(function(event,request, settings){
        $(this).prepend("Rica Başarılı.");
    });
</script>
</body>
</html>

Rica, başarı ile sonuçlandığı için ekrana “Rica Başarılı.” yazısını bastırıyoruz. Yine dikkat ettiyseniz .ajaxComplete() olayımız da çalışıyor.

.ajaxSend()

Ajax ricası gönderilmeden önce çalışacak olaydır.
Örnek uygulama -> https://ulviercan.com/teknoblog/wp-content/uploads/myCodeSamples/jQuery_Ajax/ajax_ajaxSend/

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<fieldset>
    <div id="sonuc"><span style="font-style: italic;"></span></div>
</fieldset>

<script>
    $(document).ready(function() {
        $.ajax({
            url: "https://ulviercan.com/teknoblog/wp-content/uploads/myCodeSamples/jQuery_Ajax/ajax.txt"
            }).done(function( html ) {
            $("#sonuc span").append(html);
        });
    });

    $("#sonuc").ajaxComplete(function(event,request, settings){
        $(this).prepend("Rica tamamlandı. Sonuç: ");
    });

    $("#sonuc").ajaxSend(function(event,request, settings){
        $(this).prepend("<li>İstek yapılacak dosya: " + settings.url + "</li>");
    });
</script>
</body>
</html>

İstek yapılmadan önce ekrana, istek yapılacak dosyanın adını yazdırdık. $.ajax() isteğini $(document).ready()’nin içine almamızın sebebi ise döküman tam olarak yüklenmeden isteğin yapılmasını ve dolayısıyla .ajaxSend() olayının sorunsuzca işlenebilmesini sağlamaktır. “Rica tamamlandı. Sonuç: ” örneğimizin en başında gözükmesinin sebebi ise, en son o olayın çalışması ve .prepend() kullanıyor olmamızdır.

.ajaxStart()

Ajax isteği başladığı anda çalışır.
Örnek uygulama -> https://ulviercan.com/teknoblog/wp-content/uploads/myCodeSamples/jQuery_Ajax/ajax_ajaxStart/

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<fieldset>
    <div id="sonuc"><span style="font-style: italic;"></span></div>
</fieldset>

<script>
    $(document).ready(function() {
        $.ajax({
            url: "https://ulviercan.com/teknoblog/wp-content/uploads/myCodeSamples/jQuery_Ajax/ajax.txt"
            }).done(function( html ) {
            $("#sonuc span").append(html);
        });
    });

    $("#sonuc").ajaxComplete(function(event,request, settings){
        $(this).prepend("Rica tamamlandı. Sonuç: ");
    });

    $("#sonuc").ajaxStart(function(event,request, settings){
        $(this).prepend("Başlıyor..");
    });
</script>
</body>
</html>

ajaxStart olayı ile ekrana “Başlıyor..” yazdırdık.

.ajaxStop()

Ajax ricasının sonunda çalışan olaydır.

Örnek uygulama -> https://ulviercan.com/teknoblog/wp-content/uploads/myCodeSamples/jQuery_Ajax/ajax_ajaxStop/

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<fieldset>
    <div id="sonuc"><span style="font-style: italic;"></span></div>
</fieldset>

<script>
    $(document).ready(function() {
        $.ajax({
            url: "https://ulviercan.com/teknoblog/wp-content/uploads/myCodeSamples/jQuery_Ajax/ajax.txt"
            }).done(function( html ) {
            $("#sonuc span").append(html);
        });
    });

    $("#sonuc").ajaxComplete(function(event,request, settings){
        $(this).prepend("Rica tamamlandı. Sonuç: ");
    });

    $("#sonuc").ajaxStop(function(event,request, settings){
        $(this).append("Bitti..");
    });
</script>
</body>
</html>

Ajax ricası bittiği anda ekrana “Bitti..” yazdırıyoruz.

Yardımcı Fonksiyonlar

jQuery.param()

Bir dizi veya nesnenin serileştirilmiş temsilini oluşturur.
Örnek uygulama -> https://jsfiddle.net/icntfan/e8G7C/

<!DOCTYPE html>
<html>
<head>
  <style>div { color:red; }</style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="sonuc"></div>
<script>

    var params = { width:1680, height:1050 };
    var str = jQuery.param(params);
    $("#sonuc").text(str);
</script>

</body>
</html>​

Query string için serileştirilmiş bir antar/değer nesnesi oluşturduk ve ekrana bastırdık.

.serialize()

Form elementlerini Ajax isteği için query string’e uygun bir ifadeye kodlar.
Örnek uygulama -> https://jsfiddle.net/icntfan/nVhjp/

<!DOCTYPE html>
<html>
<head>
  <style>
  body, select { font-size:12px; }
  form { margin:5px; }
  p { color:red; margin:5px; font-size:14px; }
  b { color:blue; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<form>
    <select name="tek">
      <option>Tek</option>
      <option>Tek2</option>
    </select>

<br />
    <select name="coklu" multiple="multiple">
      <option selected="selected">coklu</option>
      <option>coklu2</option>

      <option selected="selected">coklu3</option>
    </select>
<br/>
    <input type="checkbox" name="check" value="kontrol1" id="ch1"/>

    <label for="ch1">kontrol1</label>

    <input type="checkbox" name="check" value="kontrol2" checked="checked" id="ch2"/>

    <label for="ch2">kontrol2</label>
<br />
    <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>

    <label for="r1">radio1</label>
    <input type="radio" name="radio" value="radio2" id="r2"/>

    <label for="r2">radio2</label>
  </form>
  <p><tt id="results"></tt></p>
<script>
    function showValues() {
      var str = $("form").serialize();
      $("#results").text(str);
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();
</script>

</body>
</html>​

Ajax ricasında gönderilmek üzere formu query string ifadeye dönüştürüyoruz.

.serializeArray()

Form elementlerini dizi haline dönüştürür.
Örnek uygulama -> https://jsfiddle.net/icntfan/tCCPF/

<!DOCTYPE html>
<html>
<head>
  <style>
  body, select { font-size:14px; }
  form { margin:5px; }
  p { color:red; margin:5px; }
  b { color:blue; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><b>Sonuçlar:</b> <span id="sonuclar"></span></p>

  <form>
    <select name="single">
      <option>Single</option>
      <option>Single2</option>

    </select>
    <select name="multiple" multiple="multiple">
      <option selected="selected">Multiple</option>
      <option>Multiple2</option>

      <option selected="selected">Multiple3</option>
    </select><br/>
    <input type="checkbox" name="check" value="check1" id="ch1"/>

    <label for="ch1">check1</label>
    <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>

    <label for="ch2">check2</label>
    <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>

    <label for="r1">radio1</label>
    <input type="radio" name="radio" value="radio2" id="r2"/>

    <label for="r2">radio2</label>
  </form>
<script>

    function showValues() {
      var dizi = $(":input").serializeArray();
      $("#sonuclar").empty();
      jQuery.each(dizi, function(i, dizi){
        $("#sonuclar").append(dizi.value + " ");
      });
    }

    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();
</script>

</body>
</html>​

Formdaki değerleri aldık, iterasyon ile teker teker ekrana bastırdık.

Kısaltılmış Metotlar

jQuery.get()

Bir HTTP GET isteği kullanarak sunucudan veri yükler.

Bir kaç kullanım şekline göz atalım.

Öncelikle Ajax eşleniği şu şekildedir:

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

test.php dosyasını istedik ancak, sonuçları göz ardı ettik.

$.get("test.php");

test.php dosyasını parametre göndererek istedik ancak, sonuçları göz ardı ettik.

$.get("test.php", { isim: "Ulvi", saat: "12:07" } );

test.php dosyasını istedik sonuçları bir uyarı ile ekrana bastırdık.

$.get("test.php", function(data){
alert("Yüklenen veri: " + data);
});

jQuery.post()

Bir HTTP POST isteği kullanarak sunucudan veri yükler.

Bir kaç kullanım şekline göz atalım.

Öncelikle Ajax eşleniği şu şekildedir:

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

test.php dosyasını istedik ancak, sonuçları göz ardı ettik.

$.post("test.php");

test.php dosyasını parametre göndererek istedik ancak, sonuçları göz ardı ettik.

$.post("test.php", { isim: "Ulvi", saat: "12:07" } );

test.php dosyasını istedik sonuçları bir uyarı ile ekrana bastırdık.

$.post("test.php", function(data){
alert("Yüklenen veri: " + data);
});

jQuery.getJSON()

Bir GET HTTP isteği kullanarak sunucudan JSON kodlanmış verileri yükler.
Örnek uygulama -> https://jsfiddle.net/icntfan/RdGzg/

<!DOCTYPE html>
<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="resimler">

</div>
<script>
$.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "istanbul boğaz köprüsü",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#resimler");
      if ( i == 3 ) return false;
    });
  });</script>

</body>
</html>​

Flickr JSONP API kullanarak belirttiğimiz “istanbul boğaz köprüsü” etiketlerine uygun en son yüklenen 4 resmi çekiyoruz.

jQuery.getScript()

Bir GET HTTP isteği kullanarak sunucudan bir JavaScript dosyası yükler ve sonra da bunu çalıştırır.
Örnek uygulama -> https://jsfiddle.net/icntfan/KeW4k/

<!DOCTYPE html>
<html>
<head>
  <style>
.block {
   background-color: blue;
   width: 150px;
   height: 70px;
   margin: 10px;
}</style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<button id="go">&raquo; Çalıştır</button>

<div class="block"></div>

<script>
$.getScript("https://api.jquery.com/scripts/jquery.color.js", function() {
  $("#go").click(function(){
    $(".block").animate( { backgroundColor: "pink" }, 1000)
      .delay(500)
      .animate( { backgroundColor: "blue" }, 1000);
  });
});
</script>

</body>
</html>​

Resmi jQuery renk animasyon eklentisini yüklüyoruz ve çalıştırıyoruz.

.load()

Sunucudan veriyi yükler ve dönen HTML değeri seçilen elemente yerleştirir.
Örnek uygulama -> https://ulviercan.com/teknoblog/wp-content/uploads/myCodeSamples/jQuery_Ajax/ajax_load/

index.html

<!DOCTYPE html>
<html>
<head>
  <style>
 body{ font-size: 12px; font-family: Arial; }
 </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<b>Footer Menüsü:</b>
<ol id="new-nav"></ol>

<script>
  $("#new-nav").load("footer_menu.html");
</script>

</body>
</html>

footer_menu.html

    <div id="jq-footerNavigation">
      <ul>
        <li class="jq-download jq-first"><a href="https://docs.jquery.com/Downloading_jQuery">Download</a></li>
        <li class="jq-documentation"><a href="https://docs.jquery.com">Documentation</a></li>
        <li class="jq-tutorials"><a href="https://docs.jquery.com/Tutorials">Tutorials</a></li>
        <li class="jq-bugTracker"><a href="https://bugs.jquery.com/">Bug Tracker</a></li>
        <li class="jq-discussion jq-last"><a href="https://docs.jquery.com/Discussion">Discussion</a></li>
      </ul>
    </div><!-- /#jq-footerNavigation -->

Uygulama 2 dosyadan oluşmaktadır. İlki ana dosyamız olan index.html diğeri ise veri çekilecek olan dosya yani footer_menu.html. .load() metodu ile footer_menu.html dosyasında bulunan veriyi çekiyoruz.

Faydalanılan kaynaklar:
1-) JQuery documentation -> Ajax | https://api.jquery.com/category/ajax/

7 Yorum

  • mehmet alp

    gerçekten kapsamlı bir yazı, işime yaradı.

    teşekkürler

  • okan er

    Bu güzel calismanizdan dolayi tesekür ederim.
    Konular biraz daha ufkumu acti.

  • Detaylı anlatımlar için teşekkürler, elinize sağlık. İyi çalışmalar.

  • Ali

    Web page’imdeki dinamik bölümleri ajax ile çekiyorum; asp.net mvc de controllerdeki public ActionResult Anasayfa() ilk yüklenen ve sitedeki statik içerik. Ajax ile kullandığım metotlar ise aşağıdakiler;

    YeniBolumler()
    Iletisim()
    DigerOyunlar()

    lâkin bunları get ya da post olarak da çağırsam ajax ile, browser domain tarafında herhangi bir controller ya da index değişimi olmuyor… misal Iletisim() metodunu ajax ile get olarak da çağırsam ….com/Iletisim yazmıyor browser domain kısmında… (ki arkaplanda işlem yapıtığından mantıklı) Ben de bunun ancak bu şekilde gerçekleşebileceğini düşünüyordum ama

    https://www.digitalatelier.ro/ sitesi hem ajax kullanıyor

    hem de sayfasını refresh etmeden dinamik içeriğini

    https://www.digitalatelier.ro/#/work
    https://www.digitalatelier.ro/#/services
    https://www.digitalatelier.ro/#/contact

    linkleri aracılığı ile sağlıyor. Yalnız ben ….com/Iletisim yazarsam browser’da bu sayfam refresh oluyor (kim evet bu da mantıklı :)) bu sefer public ActionResult Anasayfa() ile edindiğim arkaplan, navigasyon gibi tüm static içeriğimi kaybediyor sadece iletisim() metodunun yolladığı içeriği görüntülüyorum.

    Ama https://www.digitalatelier.ro/#/contact yazdığımda hem contact bilgileri hem de https://www.digitalatelier.ro/ sitesinin sağladığı anasayfadaki içerik pekalâ eksiksiz görüntüleniyor. Yani sadece benim sitemde olduğu gibi iletişim bilgileri değil, arkaplan resmi, navigasyon barı gibi static olan içerik de sunuluyor…

    Atladığım mutlaka birşey var. Çünkü yukarıdaki işleyişlerin tümü son derece mantıklı ve akla uygun. Bilmediğim farklı bir metodoloji mi kullanılmaktadır? Bu konuda bir fikriniz var mıdır?

    Saygılarımla,

  • mert

    Gerçekten süper bilgiler teşekkürler

  • volkan

    merhaba sayfa yükleme olayı nasıl yapılıyor acaba css ile yapılan loaderin nasıl kullanabiliriz bunun hakkında bilgil verebilrmisiniz.

Yanıtla volkan