Ikhtisar fungsi praktikal Ajax
Dalam pembangunan web moden, Ajax (JavaScript Asynchronous dan XML) telah menjadi alat yang sangat biasa digunakan. Dengan menggunakan Ajax, kami boleh mencapai interaksi data tanpa memuat semula halaman, meningkatkan pengalaman pengguna dan mengurangkan beban pelayan. Artikel ini akan memberikan gambaran keseluruhan beberapa fungsi praktikal Ajax, dengan contoh kod khusus.
1. Hantar borang tanpa menyegarkan
Salah satu fungsi paling asas menggunakan Ajax ialah menyerahkan borang tanpa menyegarkan. Penyerahan borang HTML tradisional menyebabkan keseluruhan halaman dimuat semula, tetapi menggunakan Ajax membolehkan anda menyerahkan borang dan menerima respons pelayan tanpa memuat semula halaman.
Berikut ialah contoh pelaksanaan mudah:
Dalam kod di atas, apabila butang hantar diklik, fungsisubmitForm()
akan dipanggil. Fungsi ini mendapatkan data borang melalui objekFormData
dan menggunakan objekXMLHttpRequest
untuk menghantar permintaan POST ke pelayan. Apabila pelayan mengembalikan respons, kami boleh mengendalikan respons pelayan dalam acaraxhr.onreadystatechange
.submitForm()
函数会被调用。该函数通过FormData
对象获取表单的数据,并使用XMLHttpRequest
对象发送POST请求到服务器。当服务器返回响应时,我们可以在xhr.onreadystatechange
事件中处理服务器的响应。
二、动态加载数据
通过Ajax,我们可以在不刷新整个页面的情况下动态加载数据。这在创建交互性强的网页应用程序时非常有用。
以下代码展示了如何使用Ajax从服务器端动态加载数据并展示在页面上:
在上面的代码中,我们使用 三、实时搜索 Ajax还可以用于实现实时搜索功能。用户在搜索框中输入关键词时,页面会立即向服务器发送请求并加载相应的搜索结果,从而实现实时展示搜索结果的效果。 以下是一个基本的实时搜索示例代码: 在上面的代码中,当用户在搜索框中输入关键词时, Atas ialah kandungan terperinci Pengenalan kepada fungsi dan kegunaan Ajax. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!XMLHttpRequest
对象发送GET请求到服务器,获取名为data.json
的数据。当服务器返回响应时,我们使用JSON.parse()
解析响应的文本,并将数据展示在名为dataContainer
的
search()
函数会被调用。该函数通过获取输入框的值,并将其作为参数发送到服务器进行搜索。当服务器返回搜索结果时,我们将结果展示在名为searchResults
的XMLHttpRequest
untuk menghantar permintaan GET ke pelayan dan dapatkan data bernama Data
data.json
. Apabila pelayan mengembalikan respons, kami menggunakan
JSON.parse()
untuk menghuraikan teks respons dan memaparkan data dalam
dataContainer
code> elemen. 3. Carian masa nyataAjax juga boleh digunakan untuk melaksanakan fungsi carian masa nyata. Apabila pengguna memasukkan kata kunci dalam kotak carian, halaman akan segera menghantar permintaan kepada pelayan dan memuatkan hasil carian yang sepadan, dengan itu mencapai kesan memaparkan hasil carian dalam masa nyata. Berikut ialah kod contoh carian masa nyata asas: rrreeeDalam kod di atas, apabila pengguna memasukkan kata kunci dalam kotak carian, fungsisearch()
akan dipanggil. Fungsi ini mencari dengan mendapatkan nilai kotak input dan menghantarnya ke pelayan sebagai parameter. Apabila pelayan mengembalikan hasil carian, kami memaparkan hasilnya dalam elemen
bernamasearchResults
. KesimpulanArtikel ini memperkenalkan tiga fungsi biasa Ajax: menyerahkan borang tanpa menyegarkan, memuatkan data secara dinamik dan carian masa nyata. Melalui contoh kod praktikal, kami menunjukkan cara menggunakan Ajax untuk melaksanakan fungsi ini pada halaman. Sudah tentu, ini hanyalah puncak gunung ais fungsi Ajax yang mempunyai banyak ciri dan kegunaan lain yang berkuasa. Saya harap artikel ini dapat memberi anda sedikit inspirasi tentang penggunaan Ajax dan memainkan peranan dalam projek pembangunan web anda.