Bu yüzden geniş kapsamlı olarak ne bu gün var AJAX AJAX ve AJAX,. Bu, zaman kazandırır dinamikleri ekler ve bir yazılım uygulaması tür hissediyorum kullanarak bir fikir verir. Birçok kütüphane ile AJAX kullanmak için birçok yol var demektir. Bu site jQuery için gördüğünüz gibi ama, biz temel ya da belki bazı gelişmiş AJAX kullanımları bakacağız.
Size ne gerekiyor?
jQuery kitaplığı (tabii ki)
Küçücük bir php script
En konuşmaya başladı edelim. JQuery, AJAX işlemleri yapmak için yöntem 6 tip temelde vardır. Bunlar;
- $. Ajax (seçenekler)
- $. (Url, veri, geri arama) almak
- $. GetJSON (url, veri, geri arama)
- $. GetScript (url, geri arama)
- yük (url, veri, geri arama)
- $. Sonrası (url, veri, geri arama,
Ayrı numara 1, diğer tüm yöntemleri $ kullanın. Ajax dahili. Böylece. $ Gelir ajax () jQuery AJAX işlemleri için bizim anne fonksiyonudur. En nasıl $ bakalım. Ajax () gibi görünüyor
$. Ajax ({
, tipi: "POST",
, url: "some.php",
, veriler: "name = Peter & location = NY",
( msg ) { başarı: function (msg) {
+ msg ) ; alert ("Sunucu yanıtı" + msg);
}
}); |
Oldukça bu. Tipi parametre alır "GET" ya da (Ben her zaman POST tercih ediyorum) POST olarak AJAX requestion gönderebilir veya GET anlamına gelir "POST". Eğer kodu yeniden bir göz atın eğer parametreleri geri kalanı açıklayıcı oldukça kendinden.
Şimdi köprü etiketleri bağlantı (<a>) okur ve belge bazı div elemanları talebi yükler küçük bir AJAX komut dosyası yapmak için gidiyoruz.
Önce aşağıdaki gibi görünecektir php belgenin normal html almak
<DOCTYPE html KAMU! "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title> Ajax bağlantı testi </ title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jquery-1.2.6.min.js"> </ script>
</ Head>
<body>
</ Body> </ html> |
Şimdi belgeye bazı bağlantılar ekleyelim. Bakmak daha iyi bir menü tür için bir UL> LI ve Link kullanacağız. İşte bu gibi görünecektir
<ul id="nav">
<li> <a class="ajax_link" rel="div1" href="response.php?user=john"> 1.Ligi yükleyin </ a> </ li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Div 2 Yük </ a> </ li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Div 3 Yük </ a> </ li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Div 4 Yük </ a> </ li>
</ Ul> |
Gördüğünüz gibi biz bir sırasız liste nesnenin içinde listenin elemanları bağlantıları koyduk. <a> Etiketinin özelliklerini daha yakından göz atın. Biz href, sınıf ve normal bir bağlantı daha farklı bir şey görünüyor rel nitelik. Eğer görürseniz, bazı div isimler yani div1, div2 için rel özelliği verdik .. vb. Bu biz bu divs içine yüklenecek href tepki istediğiniz anlamına gelir. Bu nasıl yapmalı? Ilk bu divs ekleyelim
<span> DIV -1 </ span>
<div id="div1" class="content_loader"> </ div>
<span> DIV -2 </ span>
<div id="div2" class="content_loader"> </ div>
<span> DIV -3 </ span>
<div id="div3" class="content_loader"> </ div>
<span> DIV -4 </ span>
<div id="div4" class="content_loader"> </ div> |
Ve şimdi gerçek bir parçası - biz bağlantıları bir sınıf "ajax_link" verdik. Biz sadece dinamik ajax eylemleri "ajax_link" adlı bir sınıf adı olan sadece bağlantılar ekleyeceğiz. Cehennem, bir sayfanın tüm bağlantıları ajax etkileri olduğu yok, değil mi?
Yani, belge yük biz bu yapardım.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). (Function () {tıklayın
this ) ; $ Current_link = $ (this);
$. Ajax ({
, tipi: "post",
( "href" ) , url:. $ current_link attr ("href"),
( e ) { başarı: function (e) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e);
}
});
; return false;
});
}); |
Bana senaryoyu biraz açıklayayım. Document.ready etkinlik sayfasına yükte tetiklenen bir olaydır. Ve sonra bir sınıf "ajax_link" olan bağlantıların tıklama olay kodları çeşit atama ediyoruz. Bunu yapmak $ current_link = $ (this); geçerli bağlantı nesnesi geri arama işlevi içinde kullanılabilir olması olmasına izin verir. Ve biz var
$ ("#" + $ Current_link.attr ("rel")). Html (e)
. hangi html (server_response) ("div_id") $ anlamına gelir ve biz url ile dinamik olarak $ ajax fonksiyonunun url param belirledik: $ current_link.attr ("href").. Şimdi tüm bu araçları ajax_link "bir sınıf var Bütün bu bağlantılar" "- bir tıklama olay işleyicisi Ekle - sonra yürütmek ve AJAX isteği bağlantıları href poperty alarak ve kimin kimliği eşleşen bir div içine yanıt yük" bir rel "özelliği "bağlantı. Ve yanlış dönüş normal bir bağlantı gibi bağlantı çalışmaları engeller 
Ister? Bir eylem görmek İşte gidiyor.
Ve olabilir kaynak indirmek de.
Bu küçük öğretici bir sonraki bölümde ama konfor biraz ile aynı şeyi kullanarak olacak.
Daha kolay bir yöntem uygulamak
Her şey hemen hemen aynı kalır. Biz sadece burada ajax yöntemini değiştireceğiz. Bunun yerine bütün $. Ajax blok yazma biz aşağıdaki ile aynı şeyi elde edebilirsiniz.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). (Function () {tıklayın
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (Bu) attr ("rel")) yük ($ (this) attr ("href").);
; return false;
});
}); |
Bu doğru, şimdi çok daha az karmaşık değil mi? Yük yöntemi ona bağlı oluyor öğe içindeki ajax içeriği yükler. $ ("# Somediv_id"). Yük ("mypage.php"), bunun içinde mypage.php 'in içerik yüklemek için çalışacağım eğer. Oldukça basit, değil mi? Ama, ana yöntemi (ilk bölümünde gösterilen) alışmak öneririz.
Zip dosyası adlı başka bir dosya var ajax2.php aynı sonucu bu methos göstermektedir.
Yani, AJAX doğru, göründüğü kadar zor değil mi? AJAX işlemleri ile çok akıcı hale olduğunda, büyülerini yaratacağız.
Btw okuma için teşekkür ederiz.
Son Yorumlar