Bagaimana untuk memuat semula secara tidak segerak dalam jquery

Dalam pembangunan web, teknologi muat semula tak segerak sering digunakan untuk melaksanakan beberapa fungsi khas, seperti muat semula separa, kemas kini masa nyata, dsb. Teknologi teras untuk mencapai penyegaran tak segerak ialah teknologi Ajax. Sebagai salah satu perpustakaan JavaScript yang paling popular, jQuery merangkum fungsi Ajax yang sangat berkuasa dan mudah digunakan. Dalam artikel ini, kami akan melihat secara mendalam tentang cara melaksanakan penyegaran tak segerak menggunakan jQuery.

1. Prinsip muat semula asynchronous jQuery

Dalam permintaan segerak tradisional, pelanggan menghantar permintaan kepada pelayan dan kemudian menunggu pelayan membalas. Dalam permintaan tak segerak, pelanggan tidak perlu menunggu pelayan membalas selepas menghantar permintaan, tetapi terus melaksanakan kod berikutnya. Apabila pelayan bertindak balas, pemprosesan yang berkaitan dilakukan berdasarkan hasil tindak balas. Dengan cara ini, penyegaran separa tapak web boleh dicapai dan trafik rangkaian dan pembaziran sumber yang tidak perlu yang disebabkan oleh muat semula halaman boleh dielakkan.

Pemuatan semula tak segerak jQuery bergantung pada teknologi Ajax:

1. Pelanggan menghantar permintaan tak segerak ke pelayan dan menggunakan objek XMLHttpRequest untuk membuat objek XMLHttpRequest untuk menghantar permintaan tak segerak.

2. Sebelum menghantar permintaan, pelanggan perlu mengkonfigurasi permintaan, termasuk jenis permintaan, URL yang diminta, parameter permintaan, dsb.

3. Pelanggan menghantar permintaan kepada pelayan dan mendaftarkan fungsi panggil balik. Selepas pelayan memproses permintaan, ia mengembalikan hasil respons kepada klien. Pelanggan melaksanakan fungsi panggil balik yang sepadan berdasarkan hasil tindak balas.

4. Pelanggan melakukan operasi yang sepadan berdasarkan respons pelayan, seperti mengemas kini bahagian halaman web.

2. Pelaksanaan penyegaran tak segerak jQuery

Terdapat dua kaedah utama penyegaran tak segerak jQuery: kaedah $.ajax() dan $.get(), dengan $.get() ialah $ . Versi ringkas ajax(), sesuai untuk senario di mana hanya URL dan data dihantar dalam permintaan. Berikut akan memperkenalkan cara menggunakan kedua-dua kaedah ini masing-masing.

1. Gunakan kaedah $.ajax() untuk melaksanakan penyegaran tak segerak

Kaedah $.ajax() ialah salah satu kaedah yang paling biasa digunakan dalam jQuery untuk menghantar permintaan tak segerak. Ia menggunakan Janji untuk membuat permintaan tak segerak lebih mudah untuk diurus. Penggunaan asas kaedah $.ajax() adalah seperti berikut:

$.ajax({

type: 'POST',  //请求类型
url: 'http://www.example.com/api',  //请求的URL地址
data: {username: '张三', password: '123456'},  //请求的参数
success: function(data){  //回调函数，处理服务器响应结果
    // 服务器响应成功后执行的代码
},
error: function(xhr, type){  //回调函数，处理服务器响应错误
    // 服务器响应失败后执行的代码
}

});

Kod di atas mula-mula dihantar menggunakan Kaedah $.ajax() Permintaan POST telah dibuat, alamat URL yang diminta ialah http://www.example.com/api, dan parameter permintaan ialah {nama pengguna: 'Zhang San', kata laluan: '123456'}. Apabila pelayan bertindak balas dengan jayanya, jQuery akan melaksanakan fungsi panggil balik kejayaan dan menghantar data respons sebagai parameter kepada fungsi panggil balik. Jika pelayan bertindak balas dengan ralat, jQuery akan melaksanakan fungsi panggil balik ralat dan lulus objek XMLHttpRequest dan jenis ralat sebagai parameter kepada fungsi panggil balik.

2. Gunakan kaedah $.get() untuk melaksanakan penyegaran tak segerak

Kaedah $.get() ialah versi ringkas kaedah $.ajax(), sesuai untuk lulus sahaja senario URL dan Data. Penggunaan asas kaedah $.get() adalah seperti berikut:

$.get('http://www.example.com/api', {nama pengguna: 'Zhang San', kata laluan: ' 123456'}, function(data){

// 处理服务器响应结果

})

Kod di atas mula-mula menggunakan kaedah $.get() untuk menghantar permintaan GET ke http://www.example alamat .com/api dan Hantar parameter {nama pengguna: 'Zhang San', kata laluan: '123456'} ke pelayan. Apabila pelayan bertindak balas dengan jayanya, jQuery akan melaksanakan fungsi panggil balik dan menghantar hasil respons sebagai parameter kepada fungsi tersebut.

3. Contoh jQuery yang melaksanakan penyegaran tak segerak

Di bawah ini kita akan menggunakan contoh untuk menggambarkan secara khusus cara menggunakan jQuery untuk melaksanakan penyegaran tak segerak. Dalam contoh ini, kami akan menggunakan kaedah $.get() untuk mendapatkan masa semasa daripada pelayan dan mengemas kininya kepada DIV yang ditentukan pada halaman web. Kod khusus adalah seperti berikut:

Kod HTML:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<meta charset="UTF-8">
<title>jQuery异步刷新实例</title>

< ;/head> ;
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>当前时间：</h1>
<div id="time"></div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="refresh.js"></script>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Kod JavaScript (refresh.js):

function refreshTime () {

$.get('http://www.example.com/get_time', function(data) {
    $('#time').text(data.time);
});

}

setInterval(refreshTime, 1000);

Kod di atas mula-mula mentakrifkan fungsi refreshTime(), yang menggunakan $.get () kaedah Hantar permintaan GET ke http://www.example.com/get_time dan kemas kini medan masa dalam hasil respons kepada DIV dengan masa ID. Kemudian gunakan kaedah setInterval() untuk melaksanakan fungsi refreshTime() setiap 1 saat.

Dengan cara ini, apabila pengguna melawat halaman web, masa pada halaman akan sentiasa dikemas kini dalam masa nyata tanpa memuatkan semula keseluruhan halaman. Pengalaman sedemikian akan menjadi lebih lancar dan lebih mudah diterima oleh pengguna.

Ringkasan

Artikel ini memperincikan cara menggunakan jQuery untuk melaksanakan teknologi muat semula tak segerak. Mula-mula, prinsip muat semula tak segerak jQuery diterangkan, dan kemudian dua kaedah muat semula tak segerak utama diperkenalkan: kaedah $.ajax() dan $.get(). Akhir sekali, contoh khusus menunjukkan cara menggunakan teknologi penyegaran tak segerak untuk mencapai pengemaskinian masa nyata halaman web. Saya harap artikel ini dapat membantu anda menguasai teknologi penyegaran tak segerak jQuery dengan lebih baik dan meningkatkan kecekapan pembangunan web.

Atas ialah kandungan terperinci Bagaimana untuk memuat semula secara tidak segerak dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!