Jadi AJAX AJAX dan AJAX, itulah yang kita lakukan secara ekstensif hari ini. Ini menghemat waktu, menambah dinamika dan memberi Anda merasakan menggunakan jenis aplikasi perangkat lunak merasa. Sudah ada banyak cara untuk menggunakan AJAX dengan banyak perpustakaan. Tetapi karena Anda dapat melihat situs ini untuk jQuery, kita akan melihat dasar atau mungkin beberapa penggunaan AJAX maju.
Apa yang Anda kita butuhkan?
jQuery perpustakaan (tentu saja)
Sebuah script php kecil
Mari kita mulai berbicara. Dalam jQuery, pada dasarnya ada 6 jenis metode untuk melakukan operasi AJAX. Ini adalah
- $. Ajax (options)
- $. Mendapatkan (url, data, callback)
- $. GetJSON (url, data, callback)
- $. GetScript (url, callback)
- beban (url, data, callback)
- $. Post (url, data, callback,
Selain nomor 1, semua metode lain menggunakan $. Ajax internal. Jadi itu berarti $. Ajax () adalah fungsi ibu kami untuk operasi AJAX jQuery. Mari kita lihat bagaimana $. Ajax () terlihat seperti
msg ) ; } } ) ; Respon "+ msg);}}); |
Itu cukup itu. Jenis parameter mengambil "GET" atau "POST" yang berarti Anda dapat mengirim AJAX requestion sebagai POST atau GET (saya lebih suka POST selalu). Sisa parameter sendiri cukup jelas jika Anda mengambil melihat kode lagi.
Sekarang kita akan membuat AJAX script kecil yang membaca link tag hyperlink (<a>) dan beban permintaan pada beberapa elemen div dalam dokumen.
Pertama kita mengambil html normal dokumen php yang akan terlihat seperti ini
<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 uji Link </ title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Tambahkan Bisnis src="jquery-1.2.6.min.js"> </ script>
</ Head>
<body>
</ Body> </ html> |
Sekarang mari kita tambahkan beberapa link ke dokumen. Untuk menu jenis yang lebih baik dari tampilan kita akan menggunakan UL> LI dan Link. Itu akan terlihat seperti ini
<ul id="nav">
<li> <a class="ajax_link" rel="div1" href="response.php?user=john"> Beban di Div 1 </ a> </ li>
<li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Beban di Div 2 </ a> </ li>
<li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Beban di Div 3 </ a> </ li>
<li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Beban di Div 4 </ a> </ li>
</ Ul> |
Seperti yang Anda lihat kami telah menempatkan link di dalam elemen daftar unordered daftar objek. Lihatlah lebih dekat pada sifat <a> tag. Kami memiliki href, kelas dan atribut rel yang tampak tidak berbeda dari link yang normal. Jika Anda melihat, kita telah diberi atribut rel untuk beberapa nama div yaitu div1, div2 .. seterusnya. Ini berarti kita ingin respon href yang akan dimuat ke orang divs. Bagaimana melakukan itu? Mari kita tambahkan mereka divs pertama
<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> |
Dan bagian nyata sekarang - kami telah memberikan link kelas "ajax_link". Kami hanya akan secara dinamis menambahkan tindakan ajax link hanya memiliki nama kelas yang disebut "ajax_link". Neraka, kita tidak semua link halaman untuk memiliki tindakan ajax, apakah kita?
Jadi, pada beban dokumen kita akan melakukan hal ini.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Klik (function () {
this ) ; $ Current_link = $ (ini);
$. Ajax ({
, Jenis: "posting",
( "href" ) , url: $ current_link attr ("href"),.
( e ) { success: function (e) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e);
}
});
; return false;
});
}); |
Mari saya jelaskan script sedikit. Acara document.ready adalah peristiwa yang dipicu pada beban halaman. Dan kemudian kita menetapkan semacam kode pada acara klik link yang memiliki kelas "ajax_link". Melakukan hal ini $ current_link = $ (ini); memungkinkan untuk memiliki objek link yang saat ini akan tersedia dalam fungsi callback. Dan kami memiliki
$ ("#" + $ Current_link.attr ("rel")). Html (e)
yang berarti $ ("div_id") html (server_response) dan kami telah mengatur param url fungsi ajax $ dinamis dengan url:.. $ current_link.attr ("href"). Jadi sekarang semua cara "Semua link tersebut yang memiliki kelas" ajax_link "- Tambahkan event handler klik - kemudian jalankan dan permintaan AJAX mengambil link href poperty dan beban respon ke div id yang sesuai dengan" rel "atribut link ". Dan return false mencegah kerja link seperti hubungan yang normal 
Ingin melihat aksi? sini ia pergi.
Dan Anda dapat men-download sumber juga.
Pada bagian berikutnya dari tutorial ini kecil kita akan menggunakan hal yang sama tetapi dengan sedikit kenyamanan.
Menerapkan metode yang lebih mudah
Semuanya tetap hampir sama. Kami hanya akan mengubah metode ajax di sini. Jadi alih-alih menulis seluruh $. Blok ajax kita dapat mencapai hal yang sama dengan berikut ini.
. ready ( function ( ) { $ (Document). Ready (function () {
) . click ( function ( ) { $ ("A.ajax_link"). Klik (function () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (Ini) attr ("rel")) beban ($ (ini) attr ("href").);
; return false;
});
}); |
Ini jauh lebih rumit sekarang, kan? Metode beban load konten ajax dalam elemen itu melekat. Jika $ ("# somediv_id"). Beban ("mypage.php"), itu akan mencoba untuk memuat konten mypage.php 's di dalamnya. Cukup sederhana, ya? Tapi saya sarankan Anda terbiasa dengan metode utama (ditunjukkan dalam bagian pertama).
Dalam file zip ada file lain yang disebut ajax2.php yang menunjukkan methos ini yang memiliki hasil yang sama.
Jadi, AJAX tidak sesulit kedengarannya, kan? Ketika Anda menjadi sangat fasih dengan operasi AJAX, Anda akan membuat Magics.
Terima kasih untuk membaca btw.
Komentar Terbaru