ホームページ  >  記事  >  ウェブフロントエンド  >  ajaxにおける同期と非同期、async属性値の同期と非同期の違い

ajaxにおける同期と非同期、async属性値の同期と非同期の違い

亚连
亚连オリジナル
2018-05-24 15:26:181643ブラウズ

Jquery の ajax メソッドでは、同期と非同期を制御するために async が使用されます。 async 値が true の場合、それは非同期リクエストであり、async 値が false の場合、それは同期リクエストです。 ajax の async 属性は、データのリクエスト方法を制御するために使用されます。デフォルトは true です。これは、データがデフォルトで非同期にリクエストされることを意味します。

jquery の ajax メソッドには、同期と非同期を制御するための属性 async があります。デフォルトは true、つまり、ajax リクエストはデフォルトで非同期リクエストです。プロジェクトでは AJAX 同期が使用されることがあります。この同期が意味するのは、JS コードが現在の AJAX にロードされると、ページ内のすべてのコードのロードが停止し、ページが一時停止されたアニメーションの状態で表示され、AJAX が完了しても実行が継続されるということです。他のコードとページの一時停止状態は解除されます。この AJAX コードの実行中に、他のコードを非同期的に実行できます。

ajax の async 属性は、データのリクエスト方法を制御するために使用されます。デフォルトは true です。これは、データがデフォルトで非同期にリクエストされることを意味します。

1. async 値は true (非同期) です

ajax がリクエストを送信すると、サーバーが戻るのを待っている間、フロントデスクはサーバーが正しい結果を返すまで ajax ブロックの背後でスクリプトを実行し続けます。成功を実行するには、つまり、この時点で 2 つのスレッドが実行されます。1 つのスレッドは ajax ブロックがリクエストを送信し、スクリプトは ajax ブロックの後ろに送信されます (別のスレッド)。上記の例では、ajax ブロックがリクエストを行うと、function1() に留まり、サーバーが戻るのを待ちますが、同時に (この待機プロセス中に) フォアグラウンドで function2() が実行されます。

2. async 値は false (同期)

現在の AJAX が実行されると、次の JS コードの実行は停止され、AJAX が完了するまで次の JS コードの実行は続行できません。


たとえば

$.ajax({  
     type:"POST", 
     url:"Venue.aspx?act=init", 
      dataType:"html", 
     success:function(result){  //function1()
       f1(); 
       f2();  
    } 
     failure:function (result) {  
      alert('Failed');  
     }, 
 } 
 function2();


asyn が false に設定されている場合、ajax リクエストは同期です。つまり、この時点で ajax ブロックがリクエストを送信した後、 function1() で待機します。 function2() は、function1() 部分が実行されるまで実行されません。


Ajax 同期と非同期の違い

$.ajax({  
     type:"POST", 
     url:"Venue.aspx?act=init", 
     dataType:"html", 
     async: false,
    success:function(result){  //function1()
       f1(); 
       f2(); 
     } 
    failure:function (result) {  
      alert('Failed');  
     }, 
 } 
 function2();

xmlHttpReq.onreadystatechange ステータス値は非同期でのみ使用できます。非同期と同期の異なる呼び出しメソッドは次のとおりです。 Java

var returnValue = null; 
xmlhttp = createXmlHttp(); 
xmlhttp.onreadystatechange = function() { 
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
    if (xmlhttp.responseText == "true") { 
      returnValue = "true"; 
    } 
    else { 
      returnValue = "false"; 
    } 
  } 
}; 
xmlhttp.open("Post",url,true); //异步传输 
xmlhttp.setRequestHeader("If-Modified-Since","0"); //不缓存Ajax
xmlhttp.send(sendStr); 
return returnValue;

Java

xmlHttpReq.open("GET",url,true);//异步方式
  xmlHttpReq.onreadystatechange = showResult; //showResult是回调函数名
  xmlHttpReq.send(null);
function showResult(){  
  if(xmlHttpReq.readyState == 4){   
   if(xmlHttpReq.status == 200){
   ******
   }
  }
}

同期 (false) の場合、戻り値は true または false です。 send が実行される その後、onreadystatechange の実​​行が開始されます。プログラムは、onreadystatechange が完了するまで待機し、responseText を取得した後、次のステートメントの実行を続行するため、returnValue には値が必要です。

非同期 (true) の場合、戻り値は null でなければなりません。プログラムは send を実行した後、xmlhttp の応答を待たずに次のステートメントの実行を継続するため、returnValue は送信前に null を返します。かわった。

xmlhttp の戻り値を取得したい場合は、同期を使用する必要があります。戻り値は非同期では取得できません。

xmlhttp プールを同期および非同期で使用する場合は注意してください。xmlhttp を取得するときは、新しい xmlhttp を作成することしかできず、使用されている xmlhttp をプールから取り出すことはできません。これは、使用されている xmlhttp のreadyState が 4 であるためです。同期および非同期で送信されますが、onreadystatechange は実行されません。

上記は私があなたのためにまとめたものです。

関連記事:


jquery ajax の datatype 属性オプションの値を理解する

Jquery ajax テクノロジーに基づいて、N 秒ごとにページへの値転送を実装する

ajax の前方および後方問題を解決するJquery.history に基づいています



以上がajaxにおける同期と非同期、async属性値の同期と非同期の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。