Więc AJAX AJAX i AJAX, że to, co robimy w znacznym stopniu te dni. To oszczędza czas, zwiększa dynamikę i daje poczuć stosując rodzaj aplikacji oprogramowania czuć. Są tam wiele sposobów wykorzystania technologii AJAX z wielu bibliotek. Ale, jak widać, ta strona jest dla jQuery, przyjrzymy się podstawowych, a może niektórych zastosowań zaawansowanych technologii AJAX.
Czego nam potrzeba?
biblioteka jQuery (oczywiście)
Mały skrypt php
Załóżmy, zaczął mówić. W jQuery, są w zasadzie 6 rodzaje metody do zrobienia operacji AJAX. Są to
- $. Ajax (opcji)
- $. Get (url, data, callback)
- $. GetJSON (url, data, callback)
- $. GetScript (url, callback)
- load (url, data, callback)
- $. Post (url, data, callback,
Niezależnie od liczby 1, wszystkie inne metody użyć $. Ajax wewnętrznie. To znaczy, $. Ajax () jest nasza funkcja matka dla jQuery operacji AJAX. Przyjrzyjmy się, jak $. Ajax () wygląda
$. Ajax ({
, type: "POST",
, url: "some.php",
, Dane: "name = Peter & location = NY",
( msg ) { success: function (msg) {
+ msg ) ; alert ("Odpowiedź serwera" + msg);
}
}); |
To całkiem to. Parametr type przyjmuje "GET" lub "POST", który oznacza, że można wysłać requestion AJAX jako POST lub GET (wolałbym POST zawsze). Pozostałe parametry są dość wymowne, jeśli spojrzeć na kod ponownie.
Teraz mamy zamiar zrobić mały skrypt AJAX, który czyta link znaczników hiperłączy (Ra) i ładuje wniosek na niektórych elementów div w dokumencie.
Najpierw weźmiemy normalny html dokumentu php, który będzie wyglądał tak
<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> łącze testowe Ajax </ 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> |
Teraz możemy dodać kilka linków do dokumentu. Dla lepszego rodzaju menu wygląd użyjemy ul> Li i link. To będzie wyglądać tak
<ul id="nav">
<li> <a class="ajax_link" rel="div1" href="response.php?user=john"> ładowania w Div 1 </ a> </ li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> ładowania w Div 2 </ a> </ li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> ładowania w Div 3 </ a> </ li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> ładowania w Div 4 </ a> </ li>
</ Ul> |
Jak widać mamy umieścić linki w elementów listy wewnątrz obiektu nieuporządkowanej listy. Przyjrzyj się na metkę <a> właściwości. Mamy href, klasa i atrybut rel który wygląda nic innego niż zwykły link. Jeśli widzisz, daliśmy atrybut rel niektórych nazw div mianowicie Div1, div2 .. itd.. Oznacza to, że chcemy, aby odpowiedź href być załadowany do tych div. Jak to zrobić? Dodajmy te div pierwszy
<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> |
I część rzeczywista teraz - mamy podane linki do klasy "ajax_link". Będziemy tylko dynamicznie dodawać ajax działania jedynie linki o nazwę klasy o nazwie "ajax_link". Cholera, nie wszystkie linki na stronie i mieć ajax działania, prawda?
Tak więc, od obciążenia dokument, że możemy to zrobić.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Click (function () {
this ) ; $ Current_link = $ (this);
$. Ajax ({
, Typ: "posterunek",
( "href" ) , url: $. current_link attr ("href"),
( e ) { success: function (e) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e);
}
});
; return false;
});
}); |
Pozwól mi wyjaśnić skrypt trochę. Document.ready impreza jest wydarzeniem, które jest wyzwalane po stronie obciążenia. A potem mamy przypisując jakieś kody na wybranym przypadku linków, które posiadają klasę "ajax_link". Rozwiązanie to $ current_link = $ (this); pozwala mieć bieżący obiekt Informacje dostępne w funkcji zwrotnej. I mamy
$ ("#" + $ Current_link.attr ("rel")). Html (e)
co oznacza, $ ("div_id") html (server_response) i postawiliśmy param URL $ funkcji ajax dynamicznie URL:.. $ current_link.attr ("href"). Więc teraz wszystkie te środki "Wszystkie te linki, które mają klasę" ajax_link "- Dodawanie obsługi zdarzeń click - następnie wykonać i żądanie AJAX biorąc linki href poperty i załadować odpowiedź do div, którego id odpowiada" rel "atrybut LINK ". A return false zapobiega pracę linku jak normalny związek 
Chcesz zobaczyć jej działanie? Tutaj to idzie.
I można pobrać źródła , jak również.
W następnej części tego małego tutorialu będziemy używać to samo, ale z odrobiną komfortu.
Stosowanie łatwiejszy sposób
Wszystko pozostaje prawie taka sama. Musimy tylko zmienić metodę ajax tutaj. Więc zamiast pisać cały $. Bloku ajax możemy osiągnąć to samo z następujących czynności.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Click (function () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (This) attr ("rel")) load ($ (this) attr ("href").)
; return false;
});
}); |
To dużo mniej skomplikowane, prawda? Metoda load ładuje ajax treści w elemencie to jest dołączony. Jeśli $ ("# somediv_id"). Load ("mypage.php"), będziesz starał się załadować zawartość mypage.php jest w nim. Całkiem proste, prawda? Ale radzę się przyzwyczaić do głównej metody (pokazane w pierwszej części).
W pliku zip jest inny plik o nazwie ajax2.php co pokazuje ten Methos, który ma ten sam wynik.
Więc, AJAX nie jest tak trudne, jak się wydaje, prawda? Kiedy stajesz się bardzo płynnie z operacji AJAX, można stworzyć magię.
Dzięki za czytanie btw.
Najnowsze komentarze