Gunakan fungsi JavaScript untuk melaksanakan permintaan AJAX dan pemerolehan data

Gunakan fungsi JavaScript untuk melaksanakan permintaan AJAX dan pemerolehan data

1 Pengenalan kepada AJAX
AJAX (JavaScript Asynchronous dan XML) ialah teknologi yang digunakan untuk melaksanakan interaksi data tak segerak pada halaman web. Melalui AJAX, kami boleh menghantar permintaan kepada pelayan dan mendapatkan data yang dikembalikan oleh pelayan tanpa menyegarkan keseluruhan halaman. Ini meningkatkan pengalaman pengguna dan menjadikan halaman lebih interaktif dan dinamik.

2. Langkah-langkah pelaksanaan permintaan AJAX

1. Buat objek XMLHttpRequest.
2. Tetapkan kaedah permintaan, URL, sama ada tak segerak, dsb.
3. Daftar fungsi panggil balik untuk mengendalikan data yang dikembalikan oleh pelayan.
4. Hantar permintaan.
5. Proses data yang dikembalikan oleh pelayan.

3. Contoh kod menggunakan fungsi JavaScript untuk melaksanakan permintaan AJAX

1. Buat objek XMLHttpRequest

   function createHttpRequest() {
     if (window.XMLHttpRequest) {
    // 支持现代浏览器
    return new XMLHttpRequest();
     } else if (window.ActiveXObject) {
    // 兼容IE6及更早版本
    return new ActiveXObject("Microsoft.XMLHTTP");
     } else {
    alert("浏览器不支持AJAX！");
    return null;
     }
   }

   Salin selepas log masuk

2. Hantar permintaan GET dan dapatkan data

   function getData(url, callback) {
     var xhr = createHttpRequest();
     if (xhr) {
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        callback(xhr.responseText);
      }
    };
    xhr.send();
     }
   }

   Salin selepas log masuk

function postData(url, data, callback) {
  var xhr = createHttpRequest();
  if (xhr) {
 xhr.open("POST", url, true);
 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 xhr.onreadystatechange = function() {
   if (xhr.readyState == 4 && xhr.status == 200) {
     callback(xhr.responseText);
   }
 };
 xhr.send(data);
  }
}

Salin selepas log masuk
3. tamatkan data

   var url = "http://example.com/api/getData";
   getData(url, function(response) {
     // 在这里处理获取到的数据
     console.log(response);
   });

   Salin selepas log masuk

Empat contoh penggunaan

Katakan kita mempunyai antara muka API bahagian belakang yang boleh mengembalikan sekeping data dalam format JSON. Gunakan kod di atas untuk membuat permintaan AJAX dan mendapatkan data.

1. Gunakan permintaan GET untuk mendapatkan data

   var url = "http://example.com/api/submitData";
   var data = "username=John&password=123456";
   postData(url, data, function(response) {
     // 在这里处理返回的结果
     console.log(response);
   });

   Salin selepas log masuk

2. Gunakan permintaan POST untuk menghantar data dan dapatkan hasil pemulangan

   rrreee

Ringkasan:
Menggunakan fungsi JavaScript untuk melaksanakan lebih banyak permintaan data AJAX dan interaktif. Dengan mencipta objek XMLHttpRequest, menetapkan kaedah permintaan dan URL, menghantar permintaan dan memproses data yang dikembalikan oleh pelayan, kami dapat merealisasikan fungsi interaksi data tak segerak. Dapatkan data melalui permintaan GET atau hantar data menggunakan permintaan POST, dan proses hasil yang dikembalikan oleh pelayan dalam fungsi panggil balik, membolehkan halaman web berinteraksi dengan pelayan dan memaparkan data secara dinamik.

Atas ialah kandungan terperinci Gunakan fungsi JavaScript untuk melaksanakan permintaan AJAX dan pemerolehan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!