再ロードせずにページを動的にロードするにはどうすればよいですか？

Question

私は単純なHTML/CSSのWebページを持っている：www.eveo.org

私のすべてのコンテンツが400ピクセル背の高い、と960ピクセル幅の広い私の「コンテンツ」のdiv、に位置しています。ウェブページを実際にリフレッシュせずに、そのdivにコンテンツを更新するにはどうすればよいですか？

Answer 1

だと一緒に暮らすことができる場合は、ここで私は非常にことを行う例を示します。

私は自分のページにマウスでクリックした位置に絶対に配置されたコンテナを開くリンクを持っています。このコンテナでクリックしたリンクの内容です。私の具体的なタスクを実行するここに示しているものよりもはるかに多くのコードがありますが、これを使用するには十分に抽象化する必要があります。

ライブデモ：あなたはjQueryを使って慣れていない場合はhttp://wecodesign.com/demos/stackoverflow-7071545.htm

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script> 
<script type="text/javascript"> 
function updateContainer(url) { 
    dynamicCon = '#dynamicContainer';  
    ObjTag = $(dynamicCon); 
    ObjTag.load(url); 
} 
$(document).ready(function() { 
    $('a[rel="dynamicLoad"]').bind("click", function(event) { 
     url = $(this).attr('href'); 
     updateContainer(url); 
     event.preventDefault(); 
     event.stopPropagation(); 
    }); 
}); 
</script> 

<ul> 
    <li><a href="stackoverflow-7071545-1.htm" rel="dynamicLoad">Page 1</a></li> 
    <li><a href="stackoverflow-7071545-2.htm" rel="dynamicLoad">Page 2</a></li> 
    <li><a href="stackoverflow-7071545-3.htm">Page 3 (Will not dynamic load)</a></li> 
</ul> 
<div id="dynamicContainer"></div> 

、私はjQueryのJavaScriptが非常に簡単にアプリを開発しますライブラリです

• いくつかのことを説明します私はそれをホストする必要はありません。これは、ユーザーがこのGoogleのバージョンをキャッシュしている可能性が高いため、ページが読みやすくなります。
• 私のupdateContainer()関数では、jQuery selector syntaxを使ってコンテナを指定してから、それをjQueryタグ$()に入れて、それを操作できるオブジェクトにします。私はその後、関数に渡されたURLで動的に更新するためにloadを使用します。
• $(document).ready(function() {});は、ドキュメントがreadyのとき、中括弧で囲まれた部分を実行するという、基本的にはjQueryで普遍的に使用されているものです。
• 影響を与えたいアンカータグにrel = "dynamicLoad"を設定しましたが、すべてのリンクをこのコンテナに動的にロードする必要がないため、これを行います。セレクタa[rel="dynamicLoad"]は、このrelタグ属性を持つすべてのアンカータグを見つけ、指定したコードでそれらを変更します。
• 私はURLをつかんでupdateContainer()関数に送ります。そして、私はevent.preventDefault()とevent.stopPropagation()を実行して、デフォルトでリンクを止めて、ページを開きます。 "を関数呼び出しに追加します。

Answer 2

http://api.jquery.com/jQuery.ajax/をご覧ください。

Answer 3

あなたはjQueryのへの依存、それはjQueryの側面上に追加quite easy