AJAX 真の非同期または偽の同期

Ajax の真の非同期または偽同期:
Ajax の概要に関する章で紹介されている、AJAX は非同期 JavaScript および XML (非同期 JavaScript および XML) を指します。
これは Web 開発にとって非常に大きな進歩であり、Web サイトの使いやすさを効果的に向上させることができます。これまでは、より時間のかかるリクエスト操作があると、必然的にプログラムがハングして停止してしまい、その場合は Ajax を使用する必要がありました。非同期操作はサーバーの応答を待つ必要はありませんが、次の操作を実行します:
(1) サーバーの応答を待っている間に他のスクリプトを実行します。
(2). 準備ができたら応答を処理します。
1. open() メソッドについて:
open() メソッドの構文構造は次のとおりです:

xmlhttp.open(method,url,async);

このメソッドの詳細については、Ajax の投稿を参照するか、Ajax を参照してください。サーバーリクエストの章。
open() メソッドには 3 つのパラメーターがあることがわかります。最後のパラメーターは、非同期モードを使用するかどうかを指定するために使用されるブール値です。
async=true の場合、非同期操作の使用が規定されます。これは、ajax 操作がコードの実行をブロックしないことを意味します。実行が完了した後、応答は onreadystatechange イベントを通じて処理されます。 :

<!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>

上記のコードこれは非同期操作であり、応答は onreadystatechange イベントを通じて処理されます。
async=falseの場合は同期処理を行うため、onreadystatechangeイベントを使用する必要はありません。コードは次のとおりです。

<!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>

上記のコードでは使用しません。非同期操作、ajax 操作に時間がかかる場合、コードの混雑が発生する可能性があるため、お勧めできません。
多くの初心者は、この 2 つの違いについて十分に理解していない可能性があります。また、上記のコードでは、この違いをうまく示していません。以下に、2 つのコードを通してその違いを示します。
コード例 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>

上記のコード。非同期動作なので、ajaxリクエストコードがバックグラウンドで処理されても、他のコードの実行に影響を与えず、レスポンスを待っている間も指定した内容を次のdivに書き込むことができるのが大きなメリットです。アヤックスの。
コード例 2:

<!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>

上記のコードは、ajax バックグラウンド操作を実行する場合、次のコードを実行する前に処理が完了するのを待つことしかできません。

上記の例で呼び出されるすべてのファイルは、ローカルで作成、変更、使用できます。

学び続ける

新しいファイル

<!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>

提出するリセットコード

自動運転