Ajax ile JQuery Kullanımı- Using JQuery with Ajax

-Jquery Kullanimi-

Jquery javascript kodlarının daha kolay ve daha az komut yazarak kullanımı sağlayan cerceve sistemidir.

Bu adresten bedava indirebilirsiniz. -> http://jquery.com

Detaylı dokumanlara ulasmak icin -> http://docs.jquery.com/

Kullanmak icin jquery.js dosyasını cagırmak yeterlidir.


-----------------------------------------------------------------
-------------------------------------------------------------------------
----------------------------------------------------------------------------------

--Ornek olarak bir div icindeki yazıyı değiştirelim

<div id="Alan"> Ici boş </div>



<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript">
$("#Alan").html="Şimdi Dolmus bulunmakta";

</script>


------------------------------------------------------------------
-------------------------------------------------------------------------
----------------------------------------------------------------------------------


Query, script.aculo.us gibi tamamen bir efekt kütüphanesi olmamasına rağmen yine de sık kullanılan efektleri sunuyor. Örneğin fadeOut efekti sayesinde bir nesnenin
görünürlüğünü yavaş yavaş azaltırken, show efekti sayesinde daha önceden gizlenmiş bir nesneyi görünür kılabiliyorsunuz.
En önemlisi de bu efektleri kullanmak çok basittir.

--Alttaki örnek kodda, “hide” efektini kullanarak “myDiv” isimli nesneyi yavaşça gizlemiş oluyoruz.

<div id="myDiv"> sdjskdjsfdsfsd </div>

<script type="text/javascript1">

$("#myDiv").hide("slow");

</script>

------------------------------------------------------------------
-------------------------------------------------------------------------
----------------------------------------------------------------------------------

-- Ajax nedir nasıl kullanılır?

Ajax internet sayfalarında sayfaları yeniden yüklemeye gerek kalmadan ve yeni sayfalara yönlenmeden içeriklerin değişmesini sağlayan tekniğin adıdır.
Mesela chat uygulamarı, otomatik metin tamamlayıcı, verileri sayfayı değiştirmeden kaydetme vs. gibi uygulamalar yapabiliriz.
Bunu kullanmak icin JQuery kütüphanesini kullanabiliriz

-- Nasıl yazıyoruz


//head alanı arasına kütüphaneyi cagırıyoruz. Bu kütüphaneyi dahil ettik projemize artık kullanabiliriz.
<script type="text/javascript " src="jquery.js"> </script>

// jquery de ajax kullanmak icin bir cok alternatifimiz var. Bunlardan en kullanıslıları $.get, $.post, $.ajax fonksiyonları diyebiliriz.
// Bu fonksiyonlar php ile bağlantılıdır.

// Bir tane div olusturalım , id parametresine cevap yazıp bırakıyoruz istersek class ile de yapabiliriz fakat ben id kullanacagım
// form kullanmamıza gerek yok , direk bu sekilde ajax ile birlikte kullanabiliriz.

<div id="cevap"></div>
<input type="text" name="metin" /> <br>
<input type="button" value="gonder" onclick="uygula()" /> <br>

// Simdi jquery ve ajax kodlarını yazacagımız script alanına geciyoruz

<script type="text/javascript">
function uygula()
{
var metin=$('input[name="metin"]').val();
$.get('ajax.php',{yazi:metin},function(gelenCevap){
$("#cevap").html(gelenCevap);

});
}
</script>

 Biz burada ilk olarak inputlardan name parametresi metin olanı secip javascriptte metin değişkenine atadık. sonrasında $get fonksiyonu ile ilk parametrede hangi sayfadan
veri alacagımızı belirttik, yani ajax.php dedik sonra o sayfaya 2.parametrede yazi adında bir GET parametresi gondereceğimizi ve değerinde metin kutusundaki yazılı değerin
olmasını istedik.  Bu durumda eğer biz metin kutusuna selam yazarsak, javascript ajax.php?yazi=selam olarak php sayfamıza girmiş olacagız ve çıkan sonucu olusturdugumuz
div'in icine yazacak.

-> Ajax.php sayfasına geldik

        <?php
              $yazi=$_GET["yazi"];

       echo $yazi;
        ?>














--------------------------------------------------------------------------
----------------------------------------------------------------------------------
----------------------------------------------------------------------------------------


--Simdi bir textareadan  JQuery ve Ajax kullanarak post almayı yapalım.

//textarea alanımız

<textarea name="mesaj"></textarea>

// JQuery kodumuz

<script type="text/javascript">



function()
{
// Textarea'daki değeri alalım
var mesaj=$("textarea[name=]").val();

$.ajax({

type:"POST", //->   islemin nasıl yapılacagını belirtiyoruz yalnız dikkat edin arada bosluk kalmasın
url:"chat.php", // -> posttan gelen değerleri alacagım sayfa chat.php olsun
data:{"tip":"gonder","mesaj":mesaj},  // -> post alırken $_POST icine ilk degerleri yazıyor , ikinci değerler post sonucunda gelen değerimiz olucak

success: function(sonuc){  // eğer islem basarılı ise bunları yap diyoruz

 //Yapmak istedigimiz kodlar olcak burada. mesela sonucu kontrol edelim

            alert(sonuc);
 }

     })

}
</script>

// chat.php sayfamızdaki kodlarımı

// Bu sekilde post yaparak değerlerimizi alıyoruz

$tip=strip_tags($_POST["tip"]);
$mesaj=iconv("UTF-8","ISO-8859-9",strip_tags(trim($_POST["mesaj"])));

// Burada strip tags ve trim fonksiyonları textarea'ya  girilen yazıdaki boslukları alıyor ve bosmu kontrol ediyor

// bu sekilde değiskenlerimizi yapmak istedigimiz program akısında kullanabiliriz.



--------------------------------------------------------------------
-------------------------------------------------------------------------
----------------------------------------------------------------------------------