AJAX tak segerak benar atau segerak palsu

asynchronous sebenar atau false synchronous bagi ajax:
Diperkenalkan dalam bab tentang pengenalan ringkas ajax, AJAX merujuk kepada JavaScript dan XML tak segerak (Asynchronous JavaScript dan XML) .
Ini adalah kemajuan yang sangat besar untuk pembangunan web, yang boleh meningkatkan kemesraan pengguna tapak web dengan berkesan, jika terdapat lebih banyak operasi permintaan yang memakan masa, ia pasti akan menyebabkan program itu terhenti dan berhenti Menggunakan operasi tak segerak ajax, anda tidak perlu menunggu respons pelayan, tetapi lakukan operasi berikut:
(1) Jalankan skrip lain sementara menunggu respons pelayan.
(2).
1. Mengenai kaedah open():
Berikut ialah pengenalan ringkas kepada kaedah open() Struktur sintaks adalah seperti berikut:

xmlhttp.open(method,url,async);

Untuk maklumat lanjut tentang ini. kaedah, sila rujuk ajax atau dapatkan permintaan pelayan bab.
Anda boleh melihat bahawa kaedah open() mempunyai tiga parameter Parameter terakhir ialah nilai Boolean, yang digunakan untuk menentukan sama ada untuk menggunakan mod tak segerak.
Apabila async=true, ia menetapkan untuk menggunakan operasi asynchronous, yang bermaksud bahawa operasi ajax tidak akan menyekat pelaksanaan kod Selepas pelaksanaan selesai, respons akan diproses melalui acara onreadystatechange seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<script>
function loadXMLDoc(){
  var xmlhttp;
  if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  }
  else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("show").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/asset/demo.ajax.php?dm=txt&act=getfruits",true);
  xmlhttp.send();
}
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div id="show"><h2>原来的内容</h2></div>
<button type="button" id="bt">查看效果</button>
</body>
</html>

Kod di atas ialah operasi tak segerak dan respons diproses melalui acara onreadystatechange.
Apabila async=false, pemprosesan segerak digunakan, jadi tidak perlu menggunakan acara onreadystatechange Hanya letakkan kod operasi yang sepadan selepas kaedah send() Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } 
  xmlhttp.open("GET", "/asset/demo.ajax.php?dm=txt&act=getfruits", false);
  xmlhttp.send();
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    document.getElementById("show").innerHTML = xmlhttp.responseText;
  }
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div id="show"><h2>原来的内容</h2></div>
<button type="button" id="bt">查看效果</button>
</body>
</html>

Di atas Kod tidak menggunakan operasi tak segerak Jika operasi ajax memakan masa, ia boleh menyebabkan kesesakan kod, jadi ia tidak disyorkan.
Ramai pemula mungkin tidak cukup jelas tentang perbezaan antara keduanya, dan kod di atas tidak menunjukkan ini dengan baik Berikut ialah demonstrasi perbezaan mereka melalui dua keping kod:
Contoh Kod 1: <🎜. >

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>php中文网</title>
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("show").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET", "demo/ajax/net/Async.aspx", true);
  xmlhttp.send();
}
window.onload = function () {
  loadXMLDoc();
  var odiv = document.getElementById("content");
  odiv.innerHTML = "由于是异步操作，所以不会阻塞当前内容的显示。";
}
</script>
</head>
<body>
<div id="show"><img src="wait.gif"></div>
<div id="content"></div>
</body>
</html>

Kod di atas ialah operasi tak segerak, jadi apabila kod permintaan ajax diproses di latar belakang, ia tidak menjejaskan pelaksanaan kod lain, jadi sementara menunggu respons, anda masih boleh menulis kandungan yang ditentukan dalam div di bawah Ini adalah kelebihan penting ajax.

Contoh kod dua:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("GET", "demo/ajax/net/Async.aspx", false);
  xmlhttp.send();
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    document.getElementById("show").innerHTML = xmlhttp.responseText;
  }
}
window.onload = function () {
  loadXMLDoc();
  var odiv = document.getElementById("content");
  odiv.innerHTML = "由于是同步操作，所以会阻塞当前内容的显示。";
}
</script>
</head>
<body>
<div id="show"><img src="wait.gif"></div>
<div id="content"></div>
</body>
</html>

Kod di atas tidak boleh melaksanakan kod berikut semasa menjalankan operasi latar belakang ajax Ia hanya boleh menunggu pemprosesan selesai sebelum melaksanakan kod berikut.

Semua fail yang dipanggil dalam contoh di atas boleh dibuat, ditukar dan digunakan secara setempat.

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <script> function loadXMLDoc(){ var xmlhttp; if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); } else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("show").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/asset/demo.ajax.php?dm=txt&act=getfruits",true); xmlhttp.send(); } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){ loadXMLDoc(); } } </script> </head> <body> <div id="show"><h2>原来的内容</h2></div> <button type="button" id="bt">查看效果</button> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

AJAX tak segerak benar atau segerak palsu

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]