Taigi AJAX AJAX AJAX, tai, ką mes darome plačiai šių dienų. Tai taupo laiką, prideda dinamikos ir suteikia jums naudojant programinės įrangos rūšies jaustis jaustis. Yra esate daug būdų naudoti AJAX su daugeliu bibliotekų. Bet, kaip matote šioje svetainėje yra JQuery, mes pažvelgti į pagrindinių ir galbūt kai kurių pažangių AJAX papročius.
Ką turime?
JQuery biblioteka (žinoma)
Maža PHP scenarijų
Leiskite pradėjo kalbėti. Be JQuery, iš esmės yra 6 tipų būdas tai padaryti AJAX operacijas. Tai yra
- $. Ajax (pasirinktinai)
- $. Gauti (URL, duomenų atsakymui)
- $. GetJSON (URL, duomenų atsakymui)
- $. GetScript (URL atsakymui)
- apkrova (url, duomenų atsakymui)
- $. Pranešimas (URL, duomenų atsakymui,
Be skaičiumi 1, visi kiti metodai, naudoti $. Ajax viduje. Taigi, tai reiškia, kad $. Ajax () yra mūsų motina funkcija jQuery AJAX operacijas. Pažvelkime, kaip $. Ajax () atrodo
$. Ajax ({
, tipas: POST "
, nuoroda: "some.php"
, duomenys: "name = Petro ir vieta = NY"
( msg ) { sėkmė: funkcija (msg) {
+ msg ) ; alert ("Serveris atsako" + msg);
}
}); |
Tai gana ji. Tipo parametras laikosi "GET arba POST", kuris reiškia, kad galite siųsti AJAX requestion kaip POST arba GET (norėčiau, POST visada). Parametrų poilsio yra gana savaime suprantama, jei jums pažvelgti kodas išvaizdą dar kartą.
Dabar mes ketiname padaryti nedidelę AJAX scenarijų, kuris skaito hipersaitus žymes nuorodą (<a>) ir įkelia prašymą dėl kai kurių div elementais dokumente.
Pirmiausia mes gauti normalų HTML PHP dokumentą, kuris atrodys taip
<DOCTYPE html PUBLIC! "- / / 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 nuoroda testas </ 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> |
Pridėkime keletą nuorodų į dokumentą. Siekiant geriau meniu natūra išvaizdą naudosime ul> LI ir nuoroda. Tai atrodys taip
ul id="nav">
<li> <a class="ajax_link" rel="div1" href="response.php?user=john"> Krovinių Div 1 </ a> </ li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Krovinių Div 2 </ a> </ li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Krovinių Div 3 </ a> </ li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Krovinių Div 4 </> </ li>
</ Ul> |
Kaip matote mes turime įdėti nuorodas į elementų sąrašą viduje netvarkingai sąrašą objektu. Atidžiau pažvelgti <a> savybių. Mes turime href, klasę ir rel atributas, kuris atrodo nieko kitokį nei įprasta nuorodą. Jei matote, davėme rel atributas kai div pavadinimų būtent div1, div2 .. pan. Tai reiškia, kad mes norime, kad href atsakas turi būti pakrautas į tas DIV. Kaip tai padaryti? Pridėkime tuos DIV-ų pirmas
<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> |
Ir realioji dalis dabar - davėme nuorodos klasės "ajax_link". Mes tik dinamiškai pridėti AJAX veiksmus tik nuorodos turintys klasės pavadinti "ajax_link". Po velnių, mes ne visi puslapio nuorodos, kad Ajax veiksmus, mes?
Taigi, nuo dokumento apkrovos mes norime tai padaryti.
. ready ( function ( ) { $ (Document). Paruošta (function () {
) . click ( function ( ) { $ ("A.ajax_link). Spustelėkite (function () {
this ) ; $ Current_link = $ (tai);
$. Ajax ({
, tipas: "paštas",
( "href" ) , URL:. $ current_link attr ("href"),
( e ) { sėkmė: funkcija (e) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (". #" + $ Current_link attr ("Rel")) HTML (e);
}
});
; return false;
});
}); |
Leiskite man paaiškinti scenarijų šiek tiek. Document.ready įvykis yra įvykis, kuris suveikia esant puslapio užkrovimo. Ir tada mes priskiriame tam tikrą kodų rūšiuoti įvykio Click iš šių nuorodų, kurie klasės "ajax_link". Tokiu būdu $ current_link = $ (tai); leidžia turėti dabartinė nuoroda daiktas prieinama per skambinimo funkcijas. Ir mes turime
$ ("#" + $ Current_link.attr ("Rel")). Html (e)
o tai reiškia, $ ("div_id") HTML (server_response) ir mes turime nustatyti url para apie $ Ajax funkcija dinamiškai su URL:. $. current_link.attr ("href"). Taigi, dabar visi tie reiškia "Visos šios nuorodos turintys klasė" ajax_link "- Pridėti aptarnavimo įvykio Click - tada vykdyti ir AJAX prašymas atsižvelgiant nuorodos href poperty ir įkelti atsaką į div kurio tapatybės atitinka" rel "atributas susieti ". Ir grįžti klaidinga apsaugo nuorodą darbą, kaip įprasta nuorodą 
Norite matyti ieškinį? Štai jis eina.
Ir jūs galite atsisiųsti šaltinį , taip pat.
Kitame skyriuje tai mažai samouczku mes naudosite tą patį, bet su šiek tiek komfortą.
Taikant lengviau metodą
Viskas lieka beveik tas pats. Mes tiesiog pakeisti AJAX metodas čia. Taigi vietoj raštu visą $. AJAX bloką galime pasiekti tą patį taip.
. ready ( function ( ) { $ (Document). Paruošta (function () {
) . click ( function ( ) { $ ("A.ajax_link). Spustelėkite (function () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (". #" + $ (This) attr ("Rel")) apkrova ($ (tai) attr ("href").);
; return false;
});
}); |
Tai daug mažiau sudėtinga dabar, tiesa? Apkrovos metodas įkelia AJAX turinį per elemento jis pridedamas prie. Jei $ ("# somediv_id). Apkrova (" mypage.php "), tai bandysiu įkelti mypage.php 'ai turinį į jį. Gana paprasta, ar ne? Bet aš siūlau jums priprasti prie pagrindinio metodo (parodytas pirmoje dalyje).
Į zip failas yra kitas failas, vadinamas ajax2.php kuris rodo šį methos kuri turi tą patį rezultatą.
Taigi, AJAX yra ne taip sunku, kaip tai skamba, tiesa? Kai tampate labai laisvai su AJAX operacijų, jums sukurti magiją.
Ačiū, kad skaitote BTW.
Naujausi komentarai