Forum
Aktif konular
Üyeler
Kurallar
Arama
Ajaxa Giriş - Gizli Çerçeve [Beyaz Tahribat] Ajaxa Giriş - Gizli Çerçeve [Beyaz Tahribat]
-
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 :)
-
harika umarım devamı gelir karrdeşim
-
Soyle bir ekleme yapabilirsin haci.Yaptigin calismalarin calisan halini gosteren bir link ile dokumani destekleyebilirsin.
Eline saglik.
-
hea tamam şeye hsota atmıştımda dur numaric e çeviriyp yapayım :) gösteririm
:).Geliştirrim isterseniz örnekleri editleyip yaptımda.
ayrıca eyw hocalar.Beğenilirse devamı gelir.Çünkü böyle anlatınca bende daha güzel öğreniyorum.
-
güzel olmuş ellerine sağlık.
-
eyw :):):)
acaks süper birşey ya :D google amca gibi olcam acaks ta.
-
elıne saglık zumzukcan :)
-
ARkadaşlar Buda post ile olanı;
--- cek.php--
<script>
function gosterelim(yazdirbaba){
var divstatus = document.getElementById("divstatus");
divstatus.innerHTML = yazdirbaba;
}
</script>
<form action="bilgi.php" method="post" target="gizle">
<p>birşeyler gir canım</p>
<p>aydi: <input type="text" name="aydi" value="" /></p>
<p><input type="submit" value="goster anam" onclick="gosterelim()"></p>
</form>
<div id="divstatus"></div>---/cek.php----
Şimdi burda şunu yaptık form action ile hangi sayfaya göndereceğimizi, method ile yöntemimizi, target dediğimiz ise hedef çerçeveyi bildirdik.Burdaki yazdirbaba altta açıklanacaktır.
---bilgi.php---
<?php
$sid = trim(mysql_real_escape_string($_POST["aydi"]));
$kullanici="root";
$sifre="";
$host="localhost";
$db="nickimiki";
$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 (){
top.frames["goster"].gosterelim("<?php echo $gor['nick']; ?>");
}
</script>---/bilgi.php---
burda ise mysql_real_escape_string ile ' gibi sqlenjeksiyona maruz kalmayı önledik.Scriptlerde ise;
top.frames["goster"].gosterelim deki gosterelim ile fonksiyonubelirledik.İŞte yukardaki yazdirbaba ile ("") içindekileri yani <?php echo $gor['nick']; ?> yu yazdırdık :).
Gizli çerçeve tekniği basittir.
-
hacı, hiç bööle elle kasmana gerek yok.
nasa, apple bile prototype kullanıo,
www.prototypejs.org
hazır yazılmış javascript framework amk.
içinde her halt var.
-
cnr437 bunu yazdı:
-----------------------------hacı, hiç bööle elle kasmana gerek yok.
nasa, apple bile prototype kullanıo,
www.prototypejs.org
hazır yazılmış javascript framework amk.
içinde her halt var.
-----------------------------
yanlış anlama edit
-
eyw zumsukcum saolasın ;)
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla