javascript - Javascript または jQuery を使用して Web ページの一部を更新する方法は?

Question

Web ページの特定の部分 (ページ全体ではなく) を一定の間隔で更新するにはどうすればよいですか?

Answer 1

Web ページに更新したい DIV があるとします。

<div id="myDiv"> </div>

JavaScript を使用して更新するには、それを選択して HTML コードを変更するだけです。

document.getElementById("myDiv").innerHtml = "Your new html code to display"

フォームやデータベース クエリを処理したい場合は、AJAX を使用して、たとえば現在のページをリロードせずにいくつかの php スクリプトを呼び出す必要があります。

Answer 2

目的に応じて Ajax を使用できます。サイトにユーザーを登録する前に、ユーザー名の可用性を確認したいとします。

非同期でリクエスト オブジェクトを作成する

関数 createRequest()

{

try{

 request=new XMLHttpRequest();

} catch(tryMS){

    try{

        request=new ActiveXObject("Msxml2.XMLHTTP");

    } catch(otherMS){

         try{

             request=new ActiveXObject("Microsoft.XMLHTTP");

         } catch(failed) {

             request=null;
         }

    }

}

return request;

}

次は非同期リクエストを送信するコードです

関数 checkAvailability (ユーザー名) {

 request=createRequest();

 if(request==null){

   alert("Ajax request not possible on your browser");

   return;

 }

 var url="checkAvailability?username="+username;

 request.open("GET", url, true);

 request.onreadystatechange = showStatus;

 request.send(null);

}

応答を追跡する

関数 showStatus () {

if(request.readyState == 4) {

if(request.status == 200) {

  var response = request.responseText;

          if(response == 1){

              //username available

          } else{

              //username not available

          } 

  }
   
}

}

Answer 3

あなたはAJAXについて話している

jQuery については、http://api.jquery.com/jQuery.ajax/を参照してください。

ただし、基礎となる JavaScript 言語を学習することを検討してください。長期的には、JavaScript 言語の方が優れているでしょう。ここに簡単な例を示し ます http://www.degraeve.com/reference/simple-ajax-example.php

ajax の背後にある歴史は、http: //www.adaptivepath.com/ideas/ajax-new-approach-web-applications にあります。