Perkara yang anda perlu pelajari untuk menjadi pakar acara Ajax: daripada asas kepada lanjutan

Dari pemula hingga mahir: pengetahuan penting untuk mempelajari acara Ajax

Pengenalan:
Dengan perkembangan pesat Internet, pembangunan bahagian hadapan telah menjadi kemahiran yang sangat popular. Dalam bidang ini, Ajax (JavaScript Asynchronous Dan XML) ialah teknologi yang sangat penting, yang membolehkan halaman web berkomunikasi secara tidak segerak dengan pelayan. Mempelajari acara Ajax ialah salah satu pengetahuan penting untuk pembangun bahagian hadapan Artikel ini secara beransur-ansur akan memperkenalkan acara Ajax dari kemasukan ke master, dan memberikan contoh kod khusus.

1. Apakah acara Ajax ialah teknologi yang mengemas kini sebahagian daripada kandungan halaman web melalui komunikasi tak segerak dengan pelayan tanpa menyegarkan keseluruhan halaman web. Berbanding dengan permintaan laman web tradisional, Ajax boleh memberikan pengalaman pengguna yang lebih lancar dan dinamik. Apabila menggunakan Ajax, acara yang paling biasa digunakan ialah acara onreadystatechange.
onreadystatechange事件。

在Ajax中，onreadystatechange事件会在请求的状态发生变化时触发。通过判断readyState的值，我们可以知道请求的状态。常见的readyState值有：

• 0（未初始化）：未初始化请求或者还没有调用open方法
• 1（已打开）：已经调用open方法，但还没有调用send方法
• 2（已发送）：已经调用send方法，但还没有接收到响应
• 3（正在接收）：已经接收到部分响应数据
• 4（完成）：已经接收到全部的响应数据，并且可以使用

当readyState的值变为4时，我们可以使用responseText或者responseXML属性来获取服务器的响应数据。根据不同的请求结果，我们可以在onreadystatechange事件中执行相应的操作。

下面是一个基本的Ajax请求示例，当我们向服务器发送请求后，会将服务器返回的数据显示在页面上：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    var result = xhr.responseText;
    document.getElementById("result").innerHTML = result;
  }
};
xhr.open("GET", "data.php", true);
xhr.send();

在上述代码中，我们创建了一个XMLHttpRequest对象，并在onreadystatechange事件中判断请求是否成功。若成功，会将服务器返回的数据展示在id为"result"的元素中。

二. 数据交互技巧
在实际的开发中，我们可能会遇到一些特殊的需求，需要通过Ajax与服务器进行数据交互。下面是一些常用的数据交互技巧的示例：

1. 发送POST请求：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    var result = xhr.responseText;
    document.getElementById("result").innerHTML = result;
  }
};
xhr.open("POST", "data.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("name=John&age=30");

在上述示例中，我们通过设置setRequestHeader方法来指定请求的Content-type，并使用send方法来发送请求数据。

2. 发送JSON数据：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    var result = JSON.parse(xhr.responseText);
    document.getElementById("result").innerHTML = result;
  }
};
xhr.open("POST", "data.php", true);
xhr.setRequestHeader("Content-type", "application/json");
var data = JSON.stringify({name: "John", age: 30});
xhr.send(data);

在上述示例中，我们使用JSON.stringify()方法来将JavaScript对象转换为JSON字符串，并使用JSON.parse()方法将服务器返回的JSON字符串转换为JavaScript对象。

3. 表单数据的Ajax提交：

var form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
  event.preventDefault();
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
      var result = xhr.responseText;
      document.getElementById("result").innerHTML = result;
    }
  };
  xhr.open("POST", "data.php", true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send(new FormData(form));
});

在上述示例中，我们通过给表单元素添加submit事件监听器，阻止表单的默认提交行为，并使用FormDataDi Ajax, acara onreadystatechange dicetuskan apabila keadaan yang diminta berubah. Dengan menilai nilai readyState, kita boleh mengetahui status permintaan. Nilai readyState biasa ialah:

0 (tidak dimulakan): Permintaan belum dimulakan atau kaedah open belum dipanggil lagi

1 (dibuka) : open kaedah, tetapi kaedah hantar belum dipanggil lagi

2 (hantar): Kaedah hantar telah dipanggil , tetapi tiada maklum balas diterima lagi
• 3 (Menerima): Sebahagian daripada data respons telah diterima
• 4 (Lengkap): Semua data respons telah diterima dan boleh digunakan

Apabila nilai readyState menjadi 4, kita boleh Gunakan atribut responseText atau responseXML untuk mendapatkan data respons pelayan. Mengikut keputusan permintaan yang berbeza, kami boleh melakukan operasi yang sepadan dalam acara onreadystatechange. 🎜🎜Berikut ialah contoh permintaan Ajax asas Apabila kami menghantar permintaan ke pelayan, data yang dikembalikan oleh pelayan akan dipaparkan pada halaman: 🎜rrreee🎜Dalam kod di atas, kami mencipta objek XMLHttpRequest dan meletakkannya di dalam. Tentukan sama ada permintaan itu berjaya dalam acara onreadystatechange. Jika berjaya, data yang dikembalikan oleh pelayan akan dipaparkan dalam elemen dengan id "hasil". 🎜🎜2. Kemahiran interaksi data🎜Dalam pembangunan sebenar, kami mungkin menghadapi beberapa keperluan khas dan perlu berinteraksi dengan pelayan melalui Ajax. Berikut ialah beberapa contoh teknik interaksi data yang biasa digunakan: 🎜

🎜Hantar permintaan POST: 🎜

rrreee🎜Dalam contoh di atas, kami menentukan kandungan permintaan dengan menetapkan setRequestHeader taip kaedah dan gunakan kaedah hantar untuk menghantar data permintaan. 🎜

🎜Hantar data JSON: 🎜

rrreee🎜Dalam contoh di atas, kami menggunakan kaedah JSON.stringify() untuk menukar objek JavaScript kepada JSON string , dan gunakan kaedah JSON.parse() untuk menukar rentetan JSON yang dikembalikan oleh pelayan kepada objek JavaScript. 🎜

🎜Penyerahan data borang Ajax: 🎜

rrreee🎜Dalam contoh di atas, kami menghalang borang daripada lalai dengan menambahkan pendengar acara serahkan pada borang elemen. Hantar tingkah laku dan gunakan objek FormData untuk mendapatkan data borang dan serahkannya melalui Ajax. 🎜🎜Kesimpulan:🎜Melalui pengenalan artikel ini, kami telah mempelajari tentang konsep asas acara Ajax dan teknik interaksi data biasa. Dengan menguasai acara Ajax, kami boleh mencapai komunikasi tak segerak dengan pelayan untuk mengemas kini dan berinteraksi dengan data tanpa menyegarkan keseluruhan halaman. Melalui banyak latihan dan pembelajaran, kami boleh mengembangkan dan menggunakan kemahiran Ajax dan meningkatkan keupayaan dan daya saing kami dalam bidang pembangunan hadapan. Saya harap artikel ini dapat membantu anda mempelajari acara Ajax. 🎜🎜Rujukan: 🎜🎜🎜Pengenalan AJAX - w3schools.com🎜🎜Menggunakan XMLHttpRequest - developer.mozilla.org🎜🎜Pengenalan kepada Ajax - tutorialspoint.com🎜🎜

Atas ialah kandungan terperinci Perkara yang anda perlu pelajari untuk menjadi pakar acara Ajax: daripada asas kepada lanjutan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!