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 バックグラウンド操作を実行する場合、次のコードを実行する前に処理が完了するのを待つことしかできません。
上記の例で呼び出されるすべてのファイルは、ローカルで作成、変更、使用できます。
次のセクション