Ketahui lebih lanjut tentang fungsi dan ciri Ajax-tutorial js-php.cn

Ketahui lebih lanjut tentang fungsi dan ciri Ajax

PHPz

Lepaskan： 2024-01-30 10:54:06

asal

463 orang telah melayarinya

Ketahui lebih lanjut tentang fungsi dan ciri Ajax

Pemahaman mendalam tentang Ajax: Gambaran keseluruhan fungsi, contoh kod khusus diperlukan

Pengenalan:

Dalam era Internet hari ini, pengguna mempunyai keperluan yang semakin tinggi untuk halaman web, berharap halaman itu boleh bertindak balas dalam masa nyata dan berinteraksi dengan pelayan. Untuk memenuhi permintaan ini, Ajax (JavaScript Asynchronous dan XML) digunakan secara meluas dalam pembangunan Web kerana ciri-ciri tak segeraknya. Artikel ini akan menyelidiki keupayaan Ajax dan memberikan contoh kod khusus.

1. Konsep dan prinsip asas Ajax

Ajax ialah teknologi yang berkomunikasi secara tidak segerak dengan pelayan tanpa menyegarkan keseluruhan halaman. Ia dilaksanakan terutamanya berdasarkan prinsip teras berikut:

Gunakan objek XMLHttpRequest untuk bertukar data dengan pelayan di latar belakang, yang bermaksud bahagian halaman boleh dikemas kini tanpa memuat semula halaman.
Gunakan JavaScript dan DOM untuk merealisasikan paparan dinamik halaman dan menjadikan data yang dikembalikan oleh pelayan ke halaman dalam masa nyata.
Gunakan keupayaan permintaan tak segerak untuk merealisasikan interaksi data dengan pelayan, membolehkan pengguna berinteraksi dengan pelayan melalui penyerahan borang, carian, dsb.

2. Fungsi utama Ajax

Pemuatan data tak segerak

Ajax boleh memuatkan data dengan menghantar permintaan tak segerak ke pelayan dan memaparkannya pada halaman dalam masa nyata tanpa menyegarkan keseluruhan halaman. Ini boleh meningkatkan kelajuan pemuatan halaman dari segi pengalaman pengguna dan mengurangkan beban pada pelayan.

Kemas kini kandungan halaman secara dinamik

Melalui Ajax, anda boleh mencapai penyegaran separa halaman dan menjadikan data yang dikembalikan oleh pelayan ke halaman dalam masa nyata. Dengan cara ini, pengguna boleh mendapatkan kandungan terkini tanpa memuat semula halaman, meningkatkan pengalaman interaktif.

Penyerahan borang dan pengesahan

Penyerahan borang tak segerak boleh dilaksanakan melalui Ajax tanpa menyegarkan keseluruhan halaman, supaya pengguna boleh menghantar data ke pelayan untuk pengesahan melalui Ajax selepas memasukkan data dalam borang, dapatkan keputusan pengesahan dan memaparkannya kepada pengguna dalam masa nyata.

Carian masa nyata

Ajax boleh menghantar permintaan ke pelayan dalam masa nyata semasa pengguna memasukkan kata kunci, dan mengemas kini senarai hasil carian dalam masa nyata berdasarkan hasil yang dikembalikan oleh pelayan, membolehkan pengguna mendapatkan yang diperlukan maklumat dengan lebih cepat semasa proses carian.

3. Contoh Kod

Berikut ialah contoh kod mudah untuk menunjukkan penggunaan asas Ajax. Dalam contoh ini, kami memperoleh hasil carian daripada pelayan melalui Ajax berdasarkan kata kunci yang dimasukkan oleh pengguna, dan memaparkannya pada halaman dalam masa nyata.

Bahagian HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax搜索示例</title>
</head>
<body>
    <input type="text" id="keyword" placeholder="请输入关键字">
    <ul id="result"></ul>

    <script src="ajax.js"></script>
</body>
</html>

Salin selepas log masuk

Bahagian JavaScript:

// ajax.js
document.getElementById("keyword").addEventListener("input", function () {
    var keyword = this.value;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "search.php?keyword=" + keyword, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
            var result = JSON.parse(xhr.responseText);
            var list = document.getElementById("result");
            list.innerHTML = "";
            result.forEach(function (item) {
                var li = document.createElement("li");
                li.textContent = item;
                list.appendChild(li);
            });
        }
    };
    xhr.send();
});

Salin selepas log masuk

Bahagian PHP (search.php):

<?php
$keyword = $_GET["keyword"];
$result = array("结果1", "结果2", "结果3");
echo json_encode($result);
?>

Salin selepas log masuk

Dalam contoh ini, apabila pengguna memasukkan kata kunci pada halaman, kod JavaScript menghantar permintaan kepada pelayan melalui Ajax , Dan memberikan hasil yang dikembalikan oleh pelayan kepada elemen ul pada halaman dalam masa nyata.

Kesimpulan:

Melalui pengenalan artikel ini, kita dapat memahami kepentingan Ajax dalam pembangunan Web dan fungsi utamanya. Dengan menggunakan teknologi Ajax dengan betul, kami boleh mencapai kemas kini halaman masa nyata, interaksi data tak segerak dan meningkatkan pengalaman pengguna. Saya harap contoh kod dalam artikel ini dapat membantu anda memahami dan menggunakan Ajax dengan lebih baik.

Atas ialah kandungan terperinci Ketahui lebih lanjut tentang fungsi dan ciri Ajax. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!