Anasayfa > Kodlar > Ajaxa giriş; gizli çerçeve yapmak

Ajaxa giriş; gizli çerçeve yapmak

Arkadaşlar bir süredir bu merete feci halde kafayı taktım.Tabi bunun için oturup javascript öğrenmeye başladım.Sonunda ajaxa da başladım anlayacağınız.Bende yeni başladım fakat en iyi öğrenme öğretmektir den yola çıkarak öğrendiğim teknikleri burada vermeyi düşünüyorum.Bu ilk başı beğenriseniz diğerleri gelcek.

----Ajax Nedir---

 

Ajax öncelikle javascript, internet exp. 4.0 ile çerçeve desteklemesi sonucunda yükselişe geçen bir tekniktir.Tekniktir çünkü dil değildir.Kullandığı methodlar :

 

gizli çerçeve tekniği (bizim ki) , dinamik html (dhtml) ve dom, iframes, xmlhttp dir.

 

Ajaxın arkasındaki teknoloji : html / xhtml, css,dom, xml , xslt, xmlhttp, javascripttir.

 

Google map, gmail, facebook, yahoo gibi internet devleri ajaxa yönelmiştir.

 

-----------

 

Öncelikle javascript ve html bilginiz olmalıdır.daha sonra server tarafından yorumlanan bir dilede ihtiyacımız var :).asp/php/asp.net ..Ben php üzerinden göstericem yazının sonunda aspye gerekli yerleri çevirticem.Hizmette sınır yok!

 

Öncelikle index.html yada index.php olarak kaydede bilirsiniz (asp de default.asp olabilir yada index.html)

 

---index---
<title>deneme</title>
<frameset rows="100%,0" style="border: 0px;">
<frame name="goster" src="cek.php" noresize="noresize" />
<frame name="gizle" src="about:blank" noresize="noresize" />
</frameset>
-----------

 

Burda frameset rows 100%,0 yaptık yani ilk çerçeveyi %100 göster ikincisini (0) gösterme.border: 0px yapmamızın sebebi kenarlık istemedik.Framelerde noresize anlamı eğer kullanıcıtarayıcı ile oynarsa hiç bozulma olmayacaktır.

 

---cek.php---

 

<script>
function istekinfo(){
var sid = document.getElementById("aydi").value;
top.frames["gizle"].location = "bilgi.php?id="+sid ;
}
function gosterinfo(sText){
var dividik = document.getElementById("dividik");
dividik.innerHTML = sText;
}
</script>

<p>birşeyler gir canım</p>
<p>aydi: <input type="text" id="aydi" value="" /></p>
<p><input type="button" value="goster anam" onclick="istekinfo()"></p>
<div id="dividik"></div>
--------------------
Burda bir textbox ve button girmiş olduk.texbox (input type="Text")in idsini aydi yaptık.Butona ise onclick te istek info fonksiyonuna döndürdük.

 

istekinfo fonksiyonunda var sid yazarak sid i tanımlamaya başladık.document.getElementById("aydi") .value; ile idsi aydi olanın içindekini çektirdik yani texboxun içine ne yazdıysak onu.Daha sonra

 

top.frames["gizle"] .location dediğimiz yerde 0 yaparak gizlediğimiz frameyi "bilgi.php?id="+bira önce tanımadığımız sid i denkledik.

 

Yani aydi alanına ne yazılırsa gizle çerçevesinden bilgi.php?id=yazılan şeklinde çektireceğiz.gosterinfo dediğimiz fonksiyonda ise;

 

dividik i tanımladık.dividik.innerHTML ye ise sText i yazdırmasını söyledik.

 

----bilgi.php------

 

<?php
$sid = trim($_GET["id"]);
$kullanici="root";
$sifre="";
$host="localhost";
$db="uyeler";

$baglan=@mysql_connect($host, $kullanici, $sifre);
if (!$baglan) {
echo "MySQL bağlantınızda bir sorun var.";
exit;
}
@mysql_select_db("$db");
$sql = mysql_query("Select * From uyeler where id=".$sid);
$gor = mysql_fetch_array($sql);
?>
<script>
window.onload = function (){
var divgoster = document.getElementById("divgoster");
top.frames["goster"].gosterinfo(divgoster.innerHTML);
}
</script><div id="divgoster"><?php echo $gor['nick']; ?></div>
---------------

 

ilk alanlar bağlantı için.sid i get ile çektiğimiz id ye tanımladık.Trim yazmamızın sebebi boşlukları engellemek.Şimdi ; php kısımları anlatmaya gerek var mı bilemiyorum bildiğimiz sorgu çekiyoruz.İd ile sorgu.window.onload derken yani sayfa yüklendiğinde şu komutları yapıcaz;

 

var divgoster = document.getElementById("divgoster") ;

 

ile <div id="divgoster "></div> arasındakileri yani php ile yazdığımız echo $gor['nick'] komutunu ekrana yazdırdık

 

gosterdeki çerçeveye ise divgoster.inner.HTML yi aktardık. Deneyin olacaktır.Bende tam olarak bilmiyorum fakat anladığım bunlar

 

-----------Asp cilerin yapması gerekenler -------------

 

indexteki <frame name="goster" src="cek.php" noresize="noresize" /> cek.php yerine cek.asp yapacaklar.

 

cek.php de "bilgi.php?id yerine bilgi.asp?id yaparak aynen geçirsinler.

 

bilgi.php de <?php ve ?> komutlarını arasındakilerle birlikte silip şunu yapcaklar

 

set uye = veritabanıbağlantısı.execute ("Select * From uyeler where id=" & trim(request.querystring("id")))

 

Burda veritabanıbağlantısı ni dbnin yolunu gösterdiğiniz değişkenle değiştirirsiniz.Daha sonr div id=divgoster deki <?php echo vs.. yerine <%=uye("nick")%>  yazarsanız olacaktır.

 

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

 

Tekrar belirteyim ki ajaxta uzman değilim.Öğrendiklerimi paylaşıyorum.Bir yerde yanlışım hatam varsa bende öğrenicem, sizde ajax konusuna griş yapacaksınız çünkü adam gibi giriş dökümanı yoktu (yukardaki şekilde) fakat kitapta yazıyordu.

 

İkinci olarak sql inj vs.. yeme olanı %100 dür :) güvenliksizdir.Get ile çektiğiniz id yi aspde isnumeric , phpde  is_numeric le yapabilirsiniz.Bunun yerine armaa yaptığımızı düşünürsek (sql komutlarında like kullanıp nickten bir döngü ile)o zaman replacefonksyonuna ihtiyacımız olacaktır.Yani !'^%^+ gibi karakterleri filtrelememiz lazım.Bununla ilgilide bir sürüdöküman var :)

 

Ayrıca bu tamamen ajaxa giriştir :).Yani kutucuğa 1 yazdımı butona basmadan gelmesini istediğiniz scriptler varsa üzgünüm ben sadece girişten başlıyorum.C/p mantığı ile değil ajaxı öğreterek...

 

son olarak eklemem gerekirse bu get isteği idir.Eğer beğenilirse post isteğini yazıcam.Daha sonra xmlhttp isteklerine (XHR yani XmlHttpRequest) e geçeriz.ORdan sonra iş zevkli hale dönüşücek :)

 

Reklamlar
Kategoriler:Kodlar Etiketler:, , , , ,
  1. 26/01/2013, 22:44

    Güzel ve sağlıklı bir anlatım olmuş, hem asp hem php üzerinde uygulanabileceği şekilde anlatmışsınız. Zahmetiniz için teşekkür ederim.

    Beğen

  1. No trackbacks yet.

Bir Yanıt Bırakın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: