私のWebページでJavascriptとJqueryの読み込みを最小限に抑えるために

Question

私はSchool Students Webプロジェクトをやっています。 私はHTML, Java Script and Jquery with Cgiを使用しています

Information  Reports 
View   Pass Percentage 
Add    Subject Wise Percentage 
Edit   Subject Wise Result 
Delete 

下のようなメニューがあります。

[レポート]メニューの[パスパーセンテージ]をクリックすると、IframeにHTMLドキュメントが生成されます。 はタブビューのコンセプトとして表示されます。 Subject Wise Percentageをクリックすると、別のタブにIframeのHTMLドキュメントがポップアップ表示されます。

サーバ（cgi）から生成されるすべてのHtmlドキュメントには、次のモデルがあります。すべてのレポートで

<--- HTML Starting Tags (Title,Head and etc.,) ----> 
<--- Need Jquery and Javascript files ----> 

<--- Contents of Result (With In Body Tag as text Plain from server) ---> 

<--- Need Jquery and Javascript files ----> 
<--- HTML Ending Tags (Body,HTML) ----> 

、結果の内容のみが変更になります。他のもの（JavascriptとJquery）はもう変更されません。 しかし、Iframeのコンセプトでは、[レポート]メニューからレポートをクリックするたびに、レポートが実行されるたびにJqueryファイルとJavascriptファイルがダウンロードされます。

私は自分のWebページを開いたときにすべてのJqueryとJavascriptの内容を一度だけ読み込みたいと思います。

[レポート]メニューからレポートをクリックするたびに、サーバーからの内容の内容のみを取得する必要があります。繰り返しJqueryとJavascriptファイルをサーバーからすべてのレポート用にダウンロードしないでください。

どうすればいいですか？ JavaScriptやJqueryだけでこれを行うことはできますか？

（または）

どんな技術やツールを、私はこの作業を行うために勉強する必要がありますか？

Answer 1

iframeを使用してそのジョブを実行する必要はありませんが、実際にiframeを使用することはお勧めしません。 ページをリロードせずにサーバーからロードできるAJAXを使用する必要があります。 メインページのみで頭やタグを作ってください。他のページでは頭のないHTMLコードのみを書き、メニュー項目をクリックするたびにajax getメソッドを使って特定のページをdivに読み込みます。