外部JavaScriptを使用して外部のテキスト文書でHTMLを更新するときのパスの場所を非表示にする方法

Question

"詳細情報"ボタンをクリックすると、<div>を更新するloadBCW.jsスクリプトをトリガするサイトに動的ページを設定しています。他の場所に保存されているテキストファイルを使用しています。

document.getElementById("loadBCW").addEventListener('click',function(){ 
var url = "/wp-content/themes/DICE/js/descriptionBCW"; 
var xhttp = new XMLHttpRequest(); 
xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
    document.getElementById("demo").innerHTML = 
    this.responseText; 
    } 
}; 
xhttp.open("GET", url, true); 
xhttp.send(); 
document.getElementById("demo").innerHTML = url; 
}, false); 

私の問題は、私は<div>さんinnerHTMLを変更するためには、「詳細」のいずれかのボタンをクリックしたとき、それは変数urlで点滅します、である：私は完全にこのloadBCW.jsを使用して作業することを持っています<div>、正しい要素がそれを上書きします。

実際に<div>を更新する前に、変数urlをフラッシュしないようにjsに指示するにはどうすればよいですか？

Answer 1

divコンテンツを最初にURLに設定するコードを削除することはありますか？私はあなたが削除する必要があり行をコメントアウトしました：

document.getElementById("loadBCW").addEventListener('click',function(){ 
    var url = "/wp-content/themes/DICE/js/descriptionBCW"; 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      document.getElementById("demo").innerHTML = 
      this.responseText; 
     } 
    }; 
    xhttp.open("GET", url, true); 
    xhttp.send(); 
    // document.getElementById("demo").innerHTML = url; 
}, false); 

あなたは、外部ソースへの非同期要求を作っているので、ファイルが正常に取得されるまでxhttp.onreadystatechange内のコードが実行されません。あなたのサイトをより速く走らせるように最適化する以外には、あなたができることは何もありません。したがって、URLを表示したくない場合は、最初にURLを設定する必要はありません。

しかし、それは同期要求した場合だけでなく、それはあなたのパフォーマンスが遅くなりますように、これは、さらに悪化するだろうが、document.getElementById("demo").innerHTML = url;ので、URLでコンテンツを交換することにより終了することが保証されて、後あなたの関数です。