2

私はウェブデザインのコースを取っています。私と他の多くの学生は、私たちの仕事を ajax 化することに本当に興味を持っています。私たちの先生はデザインと HTML だけに興味があるので、手伝うことはできません。

正しい用語を使用したいと思います。そうでない場合は、訂正してください。ajax 化とは、ナビゲート時に Web ページの特定の部分のみを更新することを意味します。

たとえば、3 つのサブページで構成される Web ページがあるとします。

1: index.html

<!DOCTYPE html><html><head><title> Welcome! </title></head>
<body>
    <div id="Content"> Welcome, dear visitor... take a look around! </div>
    <div id="Menu">
        <ul>
            <li><a href="index.html"><b> Home </b></a></li>
            <li><a href="projects.html"> Projects </a></li>
            <li><a href="contact.html"> Contact </a></li>
        </ul>
    </div>
    <div id="Footer"> Email and mediaplayer </div>  
</body></html>

2:プロジェクト.html

<!DOCTYPE html><html><head><title> Projects </title></head>
<body>
    <div id="Content"> All my projects are shown here! </div>
    <div id="Menu">
        <ul>
            <li><a href="index.html"> Home </a></li>
            <li><a href="projects.html"><b> Projects </b></a></li>
            <li><a href="contact.html"> Contact </a></li>
        </ul>
    </div>
    <div id="Footer"> Email and mediaplayer </div>  
</body></html>

3: contact.html

<!DOCTYPE html><html><head><title> Contact </title></head>
<body>
    <div id="Content"> Contact info! </div>
    <div id="Menu">
        <ul>
            <li><a href="index.html"> Home </a></li>
            <li><a href="projects.html"> Projects </a></li>
            <li><a href="contact.html"><b> Contact </b></a></li>
        </ul>
    </div>
    <div id="Footer"> Email and mediaplayer </div>  
</body></html>

リンクを使用する場合:

  • Content-div のみをリロードする必要があります。

  • メニューは、どのメニューポイントがアクティブであるかを更新する必要があります (ここでは太字のタグで示されています)。それが複雑すぎる場合は、メニューのリロードが機能する可能性があります。

  • フッターはまったく再読み込みしないでください。

  • タイトルを更新する必要があります。

  • URL を更新する必要があります。

  • URLがきれいであることを本当に望んでいます。つまり、 /#projects.htmlまたは/#/projects.htmlではなく、単純な/projects.htmlまたは/projects です。

  • ブックマークと戻るボタンの機能は非常に重要です。

これはまったく可能ですか？ここで私を助けてくれた人に、私は永遠にめちゃくちゃ感謝しています！:-D jQuery Address および History プラグイン、 History.js、およびその「要点」を試しました (そしてハッキングしました) 。それを機能させることができませんでした。私はスタックオーバーフローとグーグルをトロールしましたが、これらのことを説明したり、簡単な解決策を持っている人を見つけることができないようです.

最新の Web ブラウザを対象としたソリューションで問題ありません。IE 関係者と JavaScript を使用しない関係者が単純な html バージョンを入手できれば、それは素晴らしいことですが、絶対に必要というわけではありません。

助けてください - どんな助けでも非常に感謝しています! ありがとう！:-)

4

1 に答える 1

3

あなたが望むことは可能ですが、それを行うのは簡単ではありません。
すでに述べたように、HTML5 History API を使用すると可能になりますが、JavaScript に関する十分な知識が必要になります。多かれ少なかれ静的なページを表示することは、まさにそれが意図したものではありませんが、学習のために、それを行う方法を考えてみましょう.

独自の抽象化を作成する必要がないように、既にルーターに付属しているバックボーンのようなフレームワークを使用することをお勧めします。

クライアント側ルーターの背後にある基本的な考え方は、次のような JavaScript 関数をトリガーする URL を定義する簡単な方法があるということです。

var routes = {
    "index": "open_index",
    "projects": "open_projects",
    "contact": "open_contact"
}

var open_index = function(){
    // Do the logic that has to be done
    // to open the index page
}

...

コードはアイデアを説明するためのものであり、実際のフレームワークやライブラリには準拠していないことに注意してください。

とにかく、これらのルートのいずれかがトリガーされるたびに、基本的にページ全体を分解し、すべてを目的のコンテンツに置き換える必要があります。

これには基本的に 2 つの選択肢があります。サーバーから HTML を取得してプラグインするか、JSON で実際のデータのみを取得してクライアント側のテンプレートを使用します。

どういう意味ですか？さて、今あなたは静的な HTML ページを使用しています。すべてのページで共有される基本的な構造、つまり「コンテンツ」、「メニュー」、および「フッター」の分離がありますが、これは Web アプリケーションではなく Web サイトであるため、「コンテンツ」のコンテンツ' ある種の構造化データを表す構造に従っていない可能性があります。
構造化データを表す例としては、電話帳があります。常に「名」、「姓」、「電話番号」のリストがあり、これが主にページを定義するものです。それがどのように見えるかは、ページが何であるかではありません.

ページのコンテンツ全体は、次のような配列で定義できます。

var people = [
 { "firstName" : "John", "lastName" : "Doe", "number": "+12-2322132"},
 { "firstName" : "Dick", "lastName" : "Dobson", "number": "+12-656533"},
 ...
]

たとえば、次のような単純なテンプレートを使用してクライアント側をレンダリングします。

<ul class="phone_book">
  {{#each people}}
  <li>{{firstName}} {{lastName}} - {{number}}</li>
  {{/each}}
</ul>

必要な HTML を生成します。(ちなみにそれはハンドルバー
でした) フレームワークを使用すると、たとえば AJAX を使用して、データの更新時に自動的に情報表示を更新するようにスクリプトを設定することが簡単にできます。

ただし、あなたの場合、ページの見た目がその内容である可能性が最も高いです。ここに 1 枚の画像とそこに 1 枚の画像、その間に少しのテキストが必要で、これらすべてがページごとに変わります。HTMLが必要です。
これが、History API と AJAX を使用する目的とは正確に一致しない理由です。これは主に、JavaScript を多用する Web アプリケーションの特定の部分へのリンクが可能になるように、アプリケーションの状態をキャプチャする可能性もある独自の URL を持つ複数のページを展開する必要がある複雑な Web アプリケーションを対象としています。静的 Web サイトの読み込みは、AJAX と History API を使用しなくても問題なく機能します。

今はこれを無視して、とにかく続行しましょう。open_index 関数が機能するために必要なものを見てみましょう。

var open_index = function(){
    // 1. Fade out the old content and remove it
    // 2. Request the new html content from the server
    // 3. Mark the new active link in the navigation
    // 4. Add the content to the DOM
    // 5. Fade in the new content
}

これらはすべて、jQuery を使用して簡単に実行できます。これを行う方法の説明を見つけるのに問題はありません。

今、あなたはほとんどそこにいます。あとは、ナビゲーションのクリック イベントをインターセプトして、History API を使用できるようにし、静的なページを最初から読み込まないようにするだけです。

このような単純な使用では、構造的にはそれほど多くは必要ありません。

もう一度言います。これはあなたの目的にとって完全にやり過ぎであり、学習目的以外で使用するべきではありません。History API を少し抽象化するライブラリを使用しない場合、コードはより複雑になります。

これが、あなたが何を扱っているかを理解するのに役立つことを願っています。

于 2012-02-19T00:32:19.010 に答える