nodeJsを使用してページを更新しないウェブサイト

Question

node.jsを使用してウェブサイトを構築しようとしています。ページを更新せずにコンテンツをロードしたい。私はそうするAJAXの方法に精通しています。しかし、NodeJsを使って同じことを達成する方法はありますか？ （任意のリフレッシュ 行動上のとおり、あるでしょう

場所をすべてGET要求の間でのミドルウェア：ここ

は、私は現在、（私はそれが唯一の方法だとは思わない）やってんですよGETリクエスト）。ここでは、サイトのすべての基本的な コンポーネントを送信します（私はそれをメインステージと呼んでいます）。すべての基本的な レイアウト、スタイルシートが読み込まれます。

要求が完全に終了すると、クライアントは現在のアドレスに基づいて というXHR要求を発行します。要求は、コンテンツとして表示される が必要なhtmlを返します。

XHRが完了すると、取得したHTMLを「メインコンテンツ」 iFrameに設定します。

誰かが私に教えてもらえますか？他に同じことをする方法はありますか？

ありがとうございます。

Answer 1

私は多くの運がGulpであり、プラグインgulp-connectを使用しています。私はNode.jsとExpress.JsでAPIを構築していますが、プロジェクトの種類に関係なく、私のすべての自動化のためにGulpに依然として頼っています。ガルプを使用して

http://gulpjs.com/

画像を圧縮、などにより縮小コードなどのワークフローの自動化を強化するために多くの扉を開き、コピー/貼り付けファイルなど

は、私がそうであるように、あなたがそれと同じくらいの運を持っている願っています。

あなたのサーバーを探し出す方法は次のとおりです。

// Add requiements 
var gulp  = require ('gulp'), 
    connect  = require ('gulp-connect'); 


var jsSources; 


//Setup path variables 

jsSources = [ 
        'builds/development/components/scripts/*.js' 
       ]; 


//Javascript Files 
gulp.task('js', function(){ 
    gulp.src(jsSources) 
     .pipe(connect.reload()) 
}); 

// Watch all sources file directorys and run tasks if changes happen. 
gulp.task('watch', function(){ 
    gulp.watch(jsSources, ['js']); 

}); 


// Start a server for project. 
gulp.task('connect', function(){ 
    connect.server({ 
    root : '', 
    livereload : true, 
    fallback: 'builds/development/index.html' 
    }); 
}); 


// Run all tasks above by using default command "Gulp". 
gulp.task('default', ['watch', 'connect']); 

これはあなたがちょうどあなたのtermincalでCDやウェブサイトのこのタイプは、単一のページングされたウェブサイトと呼ばれているガルプ

Answer 2

を入力し、セットアップしたら...あなたは、ページを更新せずにページを読み込むことができます。

これは、ajaxとhistory.pushState（）関数を使用することで実現できます。

まず、ajaxを使用してサーバーにget要求を送信して、ページをロードします。

サーバーが応答時に.htmlページを送信すると、このページをdiv要素に読み込みます。

同時に、history.pushState（）関数を使用してブラウザの履歴も変更します。

ページが更新されずに更新されるように見えるようにします。