ボタンをクリックしてdivをリフレッシュする方法

Question

「リフレッシュ」ボタンをクリックしてdivをリフレッシュするには、ajaxの部分を行う際に助けが必要です。私は例が必要です。

私はそれをインターネット上で見つけた例のように15秒間リフレッシュさせようとしました。

が、それは、あなたは以下

を助けてくださいすることができ、動作しませんでした私のコードです：それは私のライン

<code> 
    xmlHttp.open("GET","MQSTATUS.jsp",true); 
</code> 

で不明なランタイムエラーでエラーを与えている

<script type="text/javascript"> 
function Ajax(){ 
    var xmlHttp; 
    try{  
     xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari 
    } 
    catch (e){ 
     try{ 
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer 
     } 
     catch (e){ 
      try{ 
       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      catch (e){ 
       alert("No AJAX!?"); 
       return false; 
      } 
     } 
    } 

    xmlHttp.onreadystatechange=function(){ 
     if(xmlHttp.readyState==4){ 
      document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText; 
      setTimeout('Ajax()',10000); 
     } 
    } 
    xmlHttp.open("GET","MQSTATUS.jsp",true); 
    xmlHttp.send(null); 
} 

window.onload=function(){ 
    setTimeout('Ajax()',10000); 
} 
</script> 

コードをどのように変更すればよいですか、名前を変更していくつか修正を加えようとしましたが、うまくいかなかった。あなたはjqueryのを使用して、探しているものすることができ、私は、URLの前に/

<code> 
    xmlHttp.open("GET","/MQSTATUS.jsp",true); </code> 

Answer 1

まず、XHRオブジェクトとAJAX呼び出しの初期化と更新を分けることから始めます。この方法では、1つのXHRオブジェクトしか持たず、常に何をするかを指示します。 まず、XHRオブジェクトをウィンドウオブジェクトのonloadハンドラから初期化します。次に、リフレッシュボタンのハンドラonclickのupdateAjax()を呼び出して、このオブジェクトに対する新しいリクエストを発行します。それは次のようなものになります。

<script type="text/javascript"> 
var xmlHttp; 

function initAjax() { 
    try { 
     xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari 
    } catch(e) { 
     try { 
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer 
     } catch(e) { 
      try { 
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch(e) { 
       alert("No AJAX!?"); 
       return false; 
      } 
     } 
    } 

    xmlHttp.onreadystatechange = function() { 
     if(xmlHttp.readyState == 4) { 
      document.getElementById('ReloadThis').innerHTML = xmlHttp.responseText; 
     } 
    } 
} 

function updateAjax() { 
    xmlHttp.open("GET", "MQSTATUS.jsp", true); 
    xmlHttp.send(null); 
} 

window.onload = function() { 
    initAjax(); 
} 
</script> 

をそしてあなたのHTMLに

<input type="button" value="Refresh" onclick="updateAjax()" /> 

が、これはあなたに少しお役に立てば幸いです置きます。

Answer 2

Thisを入れてみました。 Hereの例（これは前のリンクにもあります）

Googleと同じアプローチで、divを何とか非表示にしてコンテンツをもう一度読み込み、表示することができます必要な操作。しかし、私はあなたがjavascriptだけでそれを行うことはできないと思いますが、外部ライブラリ（jqueryのような）が必要です

Answer 3

ボタンコントロールに 'UpdatePanel' AJAXコントロールを追加してみてください。ボタンのClickイベントではこの種のコードを追加します。

<asp:UpdatePanel runat="server"> 
     <ContentTemplate>   
      <asp:Label ID="Label1" runat="server"></asp:Label> 
      <asp:Timer ID="timer1" Interval="500" runat="server" ontick="timer1_Tick"></asp:Timer> 
      <%--<asp:Button ID="Button1" runat="server" Text="Button" />--%> 
     </ContentTemplate> 
</asp:UpdatePanel> 

Answer 4

は私はわからないが、私はあなたが最初のsetTimeout（「アヤックス（）」、10000）を削除すべきだと思います。あなたのAJAX呼び出しの中で。 第2に、このjspの完全な配備パスを追加してみてください。 すなわち展開パスがhttp://localhost:8080/MYAPPLICATION/MQSTATUS.jspの場合は、xmlHttp.open（ "GET"、 "/ MYAPPLICATION/MQSTATUS.jsp"、true）を試してください。