Mari kita bicara tentang Ajax di jQuery dan menjelaskan metode utamanya secara detail

Penulis：Eve Cole Waktu Pembaruan：2022-07-28 14:57:21

Artikel ini akan membawa Anda mempelajari Ajax di jQuery, membahas kelebihan dan kekurangan Ajax, dan memberi Anda pemahaman mendalam tentang metode utama Ajax. Saya harap ini dapat membantu Anda!

Kata Pengantar

Artikel ini merujuk dan mengutip "Sharp JQuery" untuk memberikan penjelasan rinci tentang jQuery-Ajax dan metode utamanya.

1. Kelebihan dan Kekurangan Ajax

1. Kelebihan Ajax

a. Tidak memerlukan plug-in browser apa pun <br/>Tidak memerlukan plug-in browser apa pun dan dapat didukung oleh sebagian besar browser browser Jalankan saja.

b.Pengalaman pengguna yang luar biasa.
Keuntungan terbesarnya adalah data dapat diperbarui tanpa menyegarkan seluruh halaman, yang memungkinkan aplikasi Web merespons operasi pengguna dengan cepat.

c.Meningkatkan kinerja program Web Dibandingkan dengan mode tradisional, perbedaan terbesar dalam kinerja mode Ajax adalah cara transmisi data. Dalam mode tradisional, pengiriman data diwujudkan melalui formulir (dari), dan data yang diperoleh adalah memperoleh konten seluruh halaman dengan menyegarkan halaman web sepenuhnya. Mode Ajax hanya mengirimkan data yang perlu dikirimkan ke server melalui objek XMLHttpRequest, yaitu dikirim sesuai permintaan. .

d.Mengurangi beban server dan broadband
Prinsip kerja Ajax setara dengan menambahkan lapisan perantara antara pengguna dan server, yang menyinkronkan operasi pengguna dan respons server. Ini menciptakan mesin Ajax pada klien dan mentransfer beberapa pekerjaan yang dibebani oleh server dengan cara tradisional klien. , yang memfasilitasi pemrosesan sumber daya klien dan mengurangi beban pada server dan broadband.

2. Kekurangan Ajax

a. Dukungan browser tidak memadai untuk objek XMLHttpRequest
Salah satu kekurangan Ajax pertama berasal dari browser. Hanya IE5.0 dan versi yang lebih baru yang mendukung objek XMLHttpRequest (kebanyakan klien pada tahap ini adalah IE6 atau lebih tinggi). Biasanya di berbagai browser, programmer harus mengeluarkan banyak tenaga coding untuk memperhitungkan perbedaan antar browser, sehingga aplikasi Aajx bisa lebih kompatibel dengan berbagai browser.

b.Hancurkan fungsi normal tombol maju dan mundur browser <br/>Di Ajax, fungsi tombol maju dan mundur tidak akan valid. Meskipun metode tertentu (menambahkan titik jangkar) dapat digunakan untuk memungkinkan pengguna menggunakan tombol maju dan tombol kembali, Namun dibandingkan dengan cara tradisional, ini jauh lebih merepotkan. Bagi pengguna, mereka sering menghadapi situasi ini, ketika mereka mengklik tombol untuk memicu interaksi Ajax, mereka merasa tidak ingin melakukannya. dan kemudian mereka biasanya mengklik tombol kembali, hasil yang paling tidak diinginkan terjadi. Browser kembali ke halaman sebelumnya, dan konten yang diperoleh melalui interaksi Ajax hilang sama sekali.

c. Kurangnya dukungan untuk mesin pencari Biasanya mesin pencari menggunakan crawler untuk mencari dan mengatur miliaran data besar di Internet. Namun, crawler belum dapat memahami kode JavaScript aneh tersebut dan oleh karena itu Perubahan konten halaman yang disebabkan oleh Ajax membuat situs menggunakan Ajax pada posisi yang kurang menguntungkan dibandingkan dengan situs tradisional dalam promosi jaringan.

d.Kurangnya alat pengembangan dan debugging
JavaScript adalah bagian penting dari Ajax. Saat ini, karena kurangnya alat pengembangan dan debugging JavaScript yang baik, banyak pengembang web yang takut dengan JavaScript. Hal ini membuat penulisan kode Ajax semakin sulit Dia takut menggunakan alat visual dan menulis kode sendiri, yang telah mempengaruhi penerapan Ajax sampai batas tertentu.

2. Instal lingkungan Web---AppServ

Metode Ajax perlu berinteraksi dengan server Web, sehingga memerlukan lingkungan AppServe.

Alamat unduhan: https://www.appserv.org/en/download/Installation

: Tekan tombol Berikutnya pada satu mesin secara terus-menerus dan masukkan informasi umum seperti alamat situs web, alamat email, kata sandi, dll. Port default adalah 80.

Masukkan "http://localhost:80" di browser, dan antarmuka berikut akan muncul, menunjukkan bahwa instalasi berhasil.

Penggunaan: Salin program tertulis ke folder AppServwww yang diinstal, lalu masukkan "http://loaclhost:80/program file name" di bilah alamat untuk mengaksesnya.

3. Fungsi operasi jQuery Ajax

Perpustakaan jQuery memiliki rangkaian lengkap yang kompatibel dengan Ajax. Fungsi dan metode di dalamnya memungkinkan kita memuat data dari server tanpa menyegarkan browser.

https://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

Pada gambar di atas,

. A J A X () Metodenya adalah J Q kamu e R kamu Metode tingkat terendah di 2 lapisan adalah . aku Hai A D (),

$Metode A ja x () adalah metode level terendah dalam j Q u e ry, dan level kedua adalah lo a d (), get () dan $

. P Hai S T () Metode, hal. 3 lapisan adalah

$Metode .post (), lapisan ketiga adalah metode .getScript () dan$ $.getJSON().

1. Metode $.ajax()

sebelumnya telah menerbitkan artikel "Penjelasan detail metode jquery ajax-ajax()".

Untuk detailnya, silakan klik: https://juejin.cn/post/7019188063704350756

2. Load() Metode

ini berbeda dengan metode lainnya. Metode yang paling sederhana dan paling umum digunakan, dapat memuat kode HTML jarak jauh dan memasukkannya ke dalam DOM.

Memuat

struktur

(url, [data], [panggilan balik])

parameter

Aplikasi

1) Memuat dokumen HTML

Pertama, buat file HTML (test.html) yang dimuat dengan metode load() dan ditambahkan ke halaman. Kode HTMLnya adalah sebagai berikut:

<!DOCTYPE html>
<html>
<kepala>
	<meta charset="utf-8">
	<title>Tes</title>
</kepala>
<tubuh>
	<div>
		<p>halo dunia!</p>
		<ul>
			<li>C</li>
			<li>C#</li>
			<li>C++</li>
			<li>Jawa</li>
			<li>.Net</li>
			<li>JSP</li>
			<li>ASP</li>
			<li>PHP</li>
			<li>Piton</li>
			<li>ios</li>
			<li>Android</li>
			<li>Javascript</li>
			<li>CSS</li>
			<li>HTML</li>
			<li>XML</li>
			<li>VUE</li>
			<li>Bereaksi</li>
			<li>Sudut</li>
			<li>SQL</li>
		</ul>
	</div>
</tubuh>
</html>

Kemudian buat halaman kosong baru (main.html), termasuk tombol yang memicu event Ajax, dan id "content"

yang digunakan untuk menampilkan konten HTML yang ditambahkan (test.html).

<!DOCTYPEhtml>
<html>
<kepala>
	<meta charset="utf-8">
	<skrip src="jquery/jquery-2.1.1.js"></skrip>
	<judul>utama</judul>
</kepala>
<tubuh>
	<!-- memuat() metode -->
	<button id="btn1">Klik untuk memuat</button>
	<h1>Konten yang dimuat:</h1>
	<div id="konten1"></div>
</tubuh>
</html>

Selanjutnya tulis kode jQuery. Setelah DOM dimuat, panggil metode load dengan mengklik tombol untuk memuat konten di test.html ke dalam elemen dengan id "konten". Kodenya adalah sebagai berikut:

<script type="text/javascript">
	$(fungsi(){
		// memuat(url) metode $("#btn1").klik(fungsi(){
    		$("#content1").load("test.html")//Muat konten test.html ke halaman saat ini ketika diklik })
	})
</script>

Sebelum memuat

hasil yang sedang berjalan

Setelah memuat:

2) Filter dokumen HTML yang dimuat.

Contoh di atas adalah memuat semua konten di test.html ke dalam elemen dengan id "konten" di main.html pemilih) yang ingin dicapai.

Catatan: Ada spasi antara url dan pemilih.

Misalnya untuk memuat konten tag p saja di test.html, maka kodenya adalah sebagai berikut:

<script type="text/javascript">
    $(fungsi(){
	// memuat(url, pemilih) filter $("#btn1").klik(fungsi(){
    	    $("#content1").load("test.html p")
   	})
    })
</script>

Jalankan hasilnya

3) Mode transfer

Mode transfer metode load() secara otomatis ditentukan berdasarkan data parameter. Jika tidak ada parameter yang diteruskan, metode GET digunakan; jika tidak, maka secara otomatis dikonversi ke metode POST.

// metode load(url,fn), tanpa transfer parameter, metode GET $("#btn1").click(function(){
    $("#content1").load("test.html", function(){
    	// kode
    })
})

// metode load(url,fn), ada parameter yang harus diteruskan, metode POST $("#btn1").click(function(){
    $("#content1").load("test.html", {nama: "peiqi", usia: "18"}, function(){
    	// kode
    })
})

4) Parameter panggilan balik

Untuk operasi yang harus dilanjutkan setelah pemuatan selesai, metode load() menyediakan fungsi panggilan balik (panggilan balik). Fungsi ini memiliki 3 parameter, yang mewakili "permintaan mengembalikan konten" dan "status permintaan". objek", kodenya adalah sebagai berikut:

$("#content1").load("test.html p", function(responseText, textStates, XMLHttpRequest) {
   //responseText: Konten dikembalikan oleh permintaan //textStates: Status permintaan: kesalahan sukses batas waktu tidak diubah 4 jenis //XMLHttpRequest: objek XMLHttpRequest})

; selama permintaan selesai (lengkap), fungsi panggilan balik (panggilan balik) akan dipicu.

3.

. G e T () metode dan

$Metode .get () dan metode .post ($ )

load() biasanya memperoleh file data statis dari server web. Jika Anda perlu meneruskan beberapa parameter ke halaman di server, Anda dapat menggunakan

. G e T () metode dan

$Metode .get () dan metode .post ()$ (atau metode $.ajax()).

Melihat:

. G e T () metode dan

$Metode .get () dan metode .post ($ ) adalah fungsi global di jQuery.

1) Metode $.get()

Metode $.get() menggunakan metode GET untuk membuat permintaan asinkron.

Struktur

parameter

$.get(url, [data], [callback], [type])

Aplikasi

di bawah ini adalah potongan kode HTML untuk halaman komentar, yang memperkenalkan penggunaan metode $.get(). Kodenya adalah sebagai berikut:

<!-- metode $.get() dan $.post() -->
<h3>Komentar</h3>
<p>Nama:<input type="text" name="" id="name"></p>
<p>Konten:<textarea id="content2"></textarea></p>
<button id="btn2">Tinggalkan pesan</button>
<div id="msg"></div>

Halaman yang dihasilkan oleh kode ini seperti yang ditunjukkan pada gambar:

Setelah mengisi nama dan konten Anda, Anda dapat mengirimkan komentar Anda.

a.Pertama, Anda perlu menentukan alamat URL yang diminta.

$("#btn2").klik(fungsi(){
    $.get("test.php", parameter data, fungsi panggilan balik)
})

b. Sebelum mengirimkan, teruskan nilai nama dan konten ke latar belakang sebagai data parameter.

$("#btn2").klik(fungsi(){
    $.get("test.php", {"username":$("#name").val(), "content":$("#content2").val()}, fungsi panggilan balik)
})

c. Jika server menerima data yang dikirimkan dan berhasil mengembalikan, data yang dikembalikan dapat ditampilkan pada halaman melalui fungsi panggilan balik.

Fungsi panggilan balik dari metode $.get() hanya memiliki dua parameter

function(){
  //data: Konten yang dikembalikan dapat berupa dokumen XML, file json, fragmen XHML, dll. //textStatus: Status permintaan: error sukses batas waktu tidak diubah 4 jenis}

d. Parameter data mewakili konten yang dikembalikan oleh permintaan, dan textStatus parameter mewakili status permintaan. Dan fungsi panggilan balik hanya dapat dipanggil ketika data berhasil (load() dipanggil terlepas dari keberhasilan atau kegagalan).

// $.get() metode$("#btn2").klik(fungsi(){
    $.get("test.php", {"username":$("#name").val(),"content":$("#content2").val()}, function(data,textStatus) {
    	if(textStatus=="sukses"){ //sukses
    		// kode
    		$(data).appendTo("#pesan")
    	}
    },
    "html")//ketik
})

e.Hasil operasi

2) Metode $.post()

memiliki struktur dan penggunaan yang sama dengan metode $.get(), namun tetap terdapat perbedaan sebagai berikut:

a. Metode GET akan meneruskan parameter setelah URL dan data akan dijelajahi Server menyimpannya dalam cache, sedangkan metode POST dikirim ke server sebagai konten entitas pesan HTTP (yaitu, dibungkus dalam badan permintaan). metode DAPATKAN.

b. Metode GET memiliki batasan ukuran pada data yang dikirimkan (biasanya tidak lebih besar dari 2KB), sedangkan metode POST secara teori tidak memiliki batasan ukuran.

c.Data yang ditransfer dengan metode GET dan metode POST diperoleh secara berbeda di sisi server. Pada PHP, data dalam mode GET dapat $diperoleh dengan "_GET[]", sedangkan data dalam mode POST dapat diperoleh dengan "$ _POST[]". Kedua metode tersebut dapat diperoleh dengan menggunakan "$_REQUEST[]".

d.Kecepatan transmisi metode GET lebih tinggi dibandingkan metode POST.

Karena semua data yang dikirimkan dengan metode POST dan GET dapat diperoleh melalui $_REQUEST[], selama fungsi jQuery diubah, program dapat dialihkan antara permintaan GET dan permintaan POST. Kodenya adalah sebagai berikut:

// $. post() metode $("#btn2").klik(fungsi(){
	$.post("test.php", {"nama pengguna":$("#nama").val(),"content":$("#content2").val()}, function(data,textStatus) {
    	if(textStatus=="sukses"){ //sukses
    		// kode
    		$(data).appendTo("#pesan")
    	}
    },
    "html")//ketik
})

Selain itu, ketika metode load() diteruskan dengan parameter, metode POST akan digunakan untuk mengirim permintaan. Oleh karena itu, Anda juga dapat menggunakan metode load() untuk menyelesaikan fungsi yang sama. Kodenya adalah sebagai berikut:

$("#btn2").click(function(){.
	$("#msg").load("test.php", {
    	"nama pengguna":$("#nama").val(),
        "konten":$("#konten2").val()
    });
})

. G e T S C R Saya P T () metode dan

$Metode .getScript () dan metode .getJson () 1) Metode $ .getScript$

(

)

Terkadang, sama sekali tidak diperlukan untuk mendapatkan semua file JavaScript yang diperlukan saat halaman pertama kali dimuat. Meskipun Anda dapat secara dinamis membuat

$(document.createElement("script")).attr("src", "test.js").appendTo("head");
//Atau $("<script type='text/javascript' src='test.js' />").appendTo("head");

Namun metode ini tidak ideal. jQuery menyediakan metode $.getScript() untuk memuat file js secara langsung, yang sederhana dan nyaman seperti memuat fragmen HTML, dan tidak memerlukan pemrosesan file JavaScript, karena file JavaScript akan dieksekusi secara otomatis.

Struktur

$.getScript( url , fn ); 
 //url: alamat permintaan //fn:

aplikasi fungsi panggilan balik <br/>Buat file nowDate.js untuk mendapatkan tanggal sekarang. Kodenya adalah sebagai berikut:

function getNowDate(){
    var tanggal = Tanggal baru
    tanggal kembali;
}

Ketika tombol "Dapatkan Waktu Saat Ini" diklik, waktu dan tanggal terkini akan ditampilkan. Kodenya adalah sebagai berikut:

//Kode HTML <!-- metode $.getScript() -->
<button id="btn3">Klik untuk mengetahui waktu</button>
<div id="pesan1"></div> 
    
//kode jQuery// $.getScript() metode $("#btn3").klik(function(){
    $.getScript("nowDate.js", function(){
    	var date1 = getNowDate(); //Panggil metode getNowDate() di nowDate.js untuk mendapatkan tanggal var txtHtml= "<div>"+ date1 + "</div>";
    	$("#pesan1").html(txtHtml);
    })
})

Sebelum memuat

hasil yang sedang berjalan

Setelah memuat:

2) metode $.getJSON()

. G e T J S HAI N () Metode yang digunakan untuk memuat J S HAI N mengajukan, dengan

$Metode .getScript () digunakan untuk memuat file JSON dan digunakan dengan cara yang sama seperti metode .getScript ()$ .

Struktur

$.getJSON(url,fn);

//url: alamat permintaan //fn:

aplikasi

fungsi panggilan balik

membuat file test.json baru, kodenya sebagai berikut:

{
    "helen":{
	"jenis kelamin":"wanita",
	"usia":18,
	"berat":"50kg",
	"tinggi":"165cm"
    },
    "petrus":{
	"jenis kelamin":"laki-laki",
	"usia":28,
	"berat":"65kg",
	"tinggi":"185cm"
    }
}

Buat file HTML baru dengan kode berikut:

<!-- metode $.getJSON() -->
<button id="btn4">Klik untuk memuat file JSON</button>
<div id="message2"></div>

Saat Anda mengklik tombol muat, tidak ada efek yang terlihat di halaman. Anda dapat melihatnya di konsol. Kodenya adalah sebagai berikut:

// metode $.getJSON() $("#btn4") .klik(fungsi(){
    $.getJSON("test.json", fungsi(data){
    	console.log(data); //Konsol mengeluarkan data yang dikembalikan})
})

Output konsol seperti yang ditunjukkan pada gambar:

Meskipun fungsi di atas memuat file JSON (test.json), fungsi ini tidak memberi tahu JavaScript cara memproses data yang dikembalikan, sehingga kita dapat memproses data yang dikembalikan dalam fungsi panggilan balik.

Biasanya kita perlu mengulangi data yang kita peroleh. Walaupun kita bisa menggunakan perulangan for tradisional di sini, kita juga bisa meneruskannya

. e A C H (), dapat digunakan untuk melintasi objek dan array,

$.e a c h () dapat digunakan untuk melintasi objek dan array . Fungsi$ .each() mengambil array atau objek sebagai parameter pertama dan fungsi panggilan balik sebagai parameter kedua adalah anggota objek atau subskrip array, bit kedua sesuai dengan variabel atau konten, kodenya adalah sebagai berikut:

// $.getJSON() metode $("#btn4").click(function() {
    $.getJSON("test.json", fungsi(data){
    	console.log(data); //Konsol mengeluarkan data yang dikembalikan //Memproses data yang dikembalikan var txtHtml = "";
    	$.each(data, fungsi(indeks, item){
    	    txtHtml += "<div><h4>"
    		    + indeks + ":</h4><ul><li>jenis kelamin:"
    		    + item["jenis kelamin"] + "</li><li>usia："
    		    + barang["usia"] + "</li><li>berat:"
    		    + barang["berat"] + "</li><li>tinggi:"
    		    + barang["tinggi"] + "</li></div>";
    	    })
    			
    	    $("#pesan2").html(txtHtml);
    })
})

Efeknya seperti terlihat pada gambar:

sebelum memuat:

Setelah memuat:

[Pembelajaran yang disarankan: tutorial video jQuery, video front-end web]

Di atas adalah untuk berbicara tentang Ajax di jQuery dan menjelaskan detail metode utamanya. Untuk lebih lanjut, harap perhatikan artikel terkait lainnya di situs web PHP Cina!

Mari kita bicara tentang Ajax di jQuery dan menjelaskan metode utamanya secara detail

Kata Pengantar

1. Kelebihan dan Kekurangan Ajax

1. Kelebihan Ajax

2. Kekurangan Ajax

2. Instal lingkungan Web---AppServ

3. Fungsi operasi jQuery Ajax

1. Metode $.ajax()

2. Load() Metode

3.

.

G

e

T

(

)

metode dan

Metode .get() dan

Metode .get ( ) dan metode .post ( )

$Metode .get () dan metode .post ($ )