Fahami cara Ajax berfungsi dan cara menggunakannya: Analisis antara muka

Analisis antara muka Ajax: Untuk memahami prinsip kerja dan penggunaannya, contoh kod khusus diperlukan

Pengenalan:
Dalam pembangunan web, Ajax (JavaScript Asynchronous dan XML) ialah teknologi biasa, yang boleh digunakan tanpa memuat semula Dalam kes keseluruhan halaman, kandungan halaman dikemas kini secara dinamik melalui pertukaran data tak segerak dengan pelayan. Artikel ini akan memperkenalkan cara Ajax berfungsi dan cara menggunakannya serta memberikan contoh kod khusus.

1. Cara Ajax berfungsi
1.1 Objek XMLHttpRequest:
Inti Ajax ialah objek XMLHttpRequest, iaitu objek berkuasa yang disediakan oleh penyemak imbas untuk interaksi data dengan pelayan di latar belakang.
Cara untuk mencipta objek XMLHttpRequest adalah seperti berikut:

var xhr = new XMLHttpRequest();

1.2 Hantar permintaan:
Melalui kaedah open() dan send() objek XMLHttpRequest, anda boleh menghantar permintaan ke pelayan dan mendapatkan data yang dikembalikan oleh pelayan.

xhr.open('GET', 'api/data', true);  // 发送一个GET请求
xhr.send();

1.3 Memproses respons pelayan:
Apabila pelayan mengembalikan data, peristiwa onreadystatechange objek XMLHttpRequest akan dicetuskan. Kami boleh mendengar acara ini dan mendapatkan data yang dikembalikan oleh pelayan melalui atribut responseText atau responseXML bagi objek XMLHttpRequest.

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = xhr.responseText;
        // 处理服务器返回的数据
    }
};

2 Kaedah menggunakan Ajax
2.1 Hantar permintaan GET:
Apabila menghantar permintaan GET, anda boleh menambahkan parameter permintaan ke hujung URL, atau anda boleh membina rentetan pertanyaan melalui objek URLSearchParams.

var xhr = new XMLHttpRequest();
var url = 'api/data?param1=value1&param2=value2';  // 请求URL
xhr.open('GET', url, true);
xhr.send();

2.2 Hantar permintaan POST:
Apabila menghantar permintaan POST, anda perlu menetapkan Jenis Kandungan pengepala permintaan dan menghantar parameter permintaan dalam bentuk rentetan.

var xhr = new XMLHttpRequest();
var url = 'api/data';  // 请求URL
var params = 'param1=value1&param2=value2';  // 请求参数
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(params);

2.3 Memproses data JSON yang dikembalikan oleh pelayan:
Apabila pelayan mengembalikan data JSON, kami boleh menghuraikan rentetan JSON yang dikembalikan ke dalam objek JavaScript melalui kaedah JSON.parse() dan kemudian mengendalikannya.

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        // 处理服务器返回的JSON数据
    }
};

2.4 Memproses data XML yang dikembalikan oleh pelayan:
Apabila pelayan mengembalikan data XML, kita boleh mendapatkan objek dokumen XML melalui atribut responseXML objek XMLHttpRequest, dan kemudian memprosesnya menggunakan operasi DOM.

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var xml = xhr.responseXML;
        // 处理服务器返回的XML数据
    }
};

3. Contoh Kod
Berikut ialah contoh permintaan Ajax yang lengkap, yang menghantar permintaan GET dan memproses data JSON yang dikembalikan oleh pelayan:

var xhr = new XMLHttpRequest();
var url = 'api/data';  // 请求URL
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        // 处理服务器返回的JSON数据
        console.log(response);
    }
};
xhr.send();

Kesimpulan:
Melalui pengenalan di atas, kami memahami cara Ajax berfungsi dan bagaimana untuk menggunakannya, pertukaran data tak segerak boleh dilakukan dengan pelayan melalui objek XMLHttpRequest. Ajax boleh digunakan untuk mengemas kini kandungan halaman secara dinamik tanpa memuatkan semula keseluruhan halaman, meningkatkan pengalaman pengguna. Melalui contoh kod khusus, kami dapat memahami dan mengamalkan teknologi Ajax dengan lebih baik.

Atas ialah kandungan terperinci Fahami cara Ajax berfungsi dan cara menggunakannya: Analisis antara muka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!