Jadi AJAX AJAX dan AJAX, itulah yang kita lakukan secara luas hari ini. Ini menghemat waktu, menambah dinamika dan memberikan nuansa menggunakan jenis perangkat lunak aplikasi dari nuansa. Sudah ada banyak cara untuk menggunakan AJAX dengan banyak perpustakaan. Tapi seperti yang Anda lihat situs ini adalah untuk jQuery, kita akan melihat beberapa penggunaan dasar atau mungkin AJAX maju.
Apa yang kita butuhkan?
jQuery perpustakaan (tentu saja)
Sebuah skrip 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 ibu fungsi kita untuk operasi AJAX jQuery. Mari kita lihat bagaimana $. Ajax () terlihat seperti
$. Ajax ({ , ketik: "POST", , url: "some.php", , data: "name = Peter & lokasi = NY", ( msg ) { sukses: function (msg) { "Server Response " + msg ) ; alert ("Server Response" + msg); } });
Itu cukup itu. Jenis parameter mengambil "GET" atau "POST" yang berarti Anda dapat mengirim requestion AJAX sebagai POST atau GET (saya lebih memilih POST selalu). Sisa dari parameter sendiri cukup jelas jika Anda melihat kembali kode tersebut.
Sekarang kita akan membuat script AJAX 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="SV"> <head> <title> Ajax uji link </ title> <meta content="text/html; http-equiv="Content-Type" charset=iso-8859-1" /> Internet Lahan src="jquery-1.2.6.min.js"> </ script> </ Head> <body> </ Body> </ html>
Sekarang mari kita tambahkan beberapa link ke dokumen. Untuk jenis menu yang lebih baik dari tampilan kita akan menggunakan UL> LI dan Link. Itu akan terlihat seperti ini
<ul id="nav"> <a class="ajax_link" rel="div1" href="response.php?user=john"> Muat di Div 1 </ a> </ li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Muat di Div 2 </ a> </ li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Muat di Div 3 </ a> </ li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Muat di Div 4 </ a> </ li> </ Ul>
Seperti yang Anda lihat kami telah menempatkan link dalam elemen list dalam sebuah objek daftar unordered. Lihatlah lebih dekat pada sifat tag <a> itu. Kami memiliki href, kelas dan atribut rel yang tidak terlihat berbeda dari link yang normal. Jika Anda lihat, kami telah diberi atribut rel untuk beberapa nama div yaitu div1, div2 .. sebagainya. 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 yang nyata sekarang - kami telah memberikan link kelas "ajax_link". Kami hanya akan dinamis menambahkan tindakan ajax hanya link memiliki nama kelas yang disebut "ajax_link". Neraka, kita tidak semua link dari sebuah halaman memiliki tindakan ajax, kan?
Jadi, pada beban dokumen kita melakukan ini.
. ready ( function ( ) { $ (Dokumen) siap (function (). { ) . click ( function ( ) { $ ("A.ajax_link"). Click (function () { this ) ; $ Current_link = $ (this); $. Ajax ({ , ketik: "pos", ( "href" ) , url: $ current_link attr ("href"),. ( e ) { sukses: 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 kami menetapkan beberapa jenis kode pada event klik dari link yang memiliki kelas "ajax_link". Melakukan hal ini $ current_link = $ (this); memungkinkan untuk memiliki objek link saat ini 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 dari fungsi ajax $ dinamis dengan url:.. $ current_link.attr ("href"). Jadi sekarang semua orang berarti "Semua link tersebut yang memiliki kelas" ajax_link "- Tambahkan sebuah event handler klik - kemudian jalankan dan permintaan AJAX mengambil link href poperty dan memuat respon ke div yang sesuai dengan id" rel "atribut dari link ". Dan return false mencegah karya link seperti link normal 
Ingin melihatnya tindakan? Berikut kelanjutannya.
Dan Anda dapat men-download sumber juga.
Pada bagian berikutnya dari tutorial ini sedikit 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 sini. Jadi alih-alih menulis blok $. Seluruh ajax kita dapat mencapai hal yang sama dengan berikut ini.
. ready ( function ( ) { $ (Dokumen) siap (function (). { ) . click ( function ( ) { $ ("A.ajax_link"). Click (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 memuat konten ajax dalam elemen itu melekat. Jika $ ("# somediv_id"). Beban ("mypage.php"), itu akan mencoba untuk memuat konten mypage.php untungnya. 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 ini methos yang memiliki hasil yang sama.
Jadi, AJAX tidak sesulit kedengarannya, bukan? Ketika Anda menjadi sangat fasih dengan operasi AJAX, Anda akan membuat Magics.
Terima kasih untuk membaca btw.
Recent Comments