AJAX 참 비동기 또는 거짓 동기

Ajax의 진정한 비동기 또는 거짓 동기화:
ajax 간략 소개 장에서 소개한 AJAX는 비동기 JavaScript 및 XML(Asynchronous JavaScript and XML)을 나타냅니다.
이것은 웹사이트의 사용자 친화성을 효과적으로 향상시킬 수 있는 웹 개발에 있어 매우 큰 진전입니다. 이전에는 요청 작업에 시간이 많이 걸리면 필연적으로 프로그램이 중단되고 ajax를 사용해야 했습니다. 비동기 작업은 서버의 응답을 기다릴 필요가 없지만 다음 작업을 수행합니다.
(1) 서버의 응답을 기다리는 동안 다른 스크립트를 실행합니다.
(2). 응답이 준비되면 처리합니다.
1. open() 메소드에 대하여:
다음은 open() 메소드에 대한 간략한 소개입니다. 구문 구조는 다음과 같습니다.

xmlhttp.open(method,url,async);

이 메소드에 대한 자세한 내용은 Ajax 게시물을 참조하거나 get을 참조하세요. 서버 요청 장.
open() 메소드에는 세 개의 매개변수가 있는 것을 볼 수 있습니다. 마지막 매개변수는 비동기 모드 사용 여부를 지정하는 데 사용되는 부울 값입니다.
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 이벤트를 사용할 필요가 없습니다. send() 메서드 뒤에 해당 작업 코드를 넣으면 됩니다.

<!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 작업에 시간이 오래 걸릴 경우 코드 혼잡이 발생할 수 있으므로 권장하지 않습니다.
많은 초보자는 둘 사이의 차이점을 충분히 이해하지 못할 수 있으며 위 코드는 이를 잘 보여주지 않습니다. 두 가지 코드를 사용하여 차이점을 보여드리겠습니다.
코드 예 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에 지정된 내용을 작성할 수 있다는 것이 ajax의 중요한 장점입니다.
코드 예시 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>

제출하다 코드 재설정

자동운전