web-dev-qa-db-ja.com

URLのハッシュ部分がサーバー側で利用できないのはなぜですか？

たとえば、URLを入力すると次のようになります。

http://www.foo.com/page.php?parameter=kickme#MOREURL

次に、サーバーには部分がありません：#MOREURL

JQuery AJAXなしでこれらの部分をサーバーに送信または取得することは可能ですか？.

phpjavascripturlhashhref
35
CRISHK Corporation

いいえ、ブラウザでのみ使用できますので、Javascriptを処理する必要があります。サーバーはそれを読み取ることができません。

説明：
基本的に、ページURLのハッシュコンポーネント（＃記号に続く部分）はブラウザによってのみ処理されます。ブラウザがそれをサーバーに渡すことはありません。これは悲しいことにHTML標準の一部であり、IEまたはその他のブラウザ（さらに言えばPHPまたはその他））を使用しているかどうかに関係なく同じです。サーバーサイドテクノロジー）。

これがウィキペディアがそれについて言っていることです：

フラグメント識別子は、URIの他の部分とは機能が異なります。つまり、その処理は排他的にクライアント側であり、サーバーからの参加はありません。エージェント（Webブラウザなど）がWebサーバーにリソースを要求すると、エージェントはURIをサーバーに送信しますが、フラグメントは送信しません。代わりに、エージェントはサーバーがリソースを送信するのを待ってから、フラグメント値に従ってリソースを処理します。最も一般的なケースでは、エージェントはWebページを、フラグメント値と等しい属性文字列を持つアンカー要素までスクロールダウンします。他のクライアントの動作が可能です

47
shamittomar

http://tools.ietf.org/html/rfc2396#section-4

識別されたリソースに対してURI参照を使用して検索アクションを実行する場合、ハッチング（ "＃"）文字でURIから分離されたオプションのフラグメント識別子は、検索後にユーザーエージェントによって解釈される追加の参照情報で構成されます。アクションは正常に完了しました。そのため、URIの一部ではありませんが、URIと組み合わせて使用​​されることがよくあります。

8
meder omuraliev

[〜＃〜] why [〜＃〜]フラグメントがサーバーに送信されないという理由で答えを拡張したいと思います。それは意図的で望ましい行動だからです。 URL文字列全体を見てみましょう。

/path/to/element?query=string&for=server#?optional=fragment&for=browser <----- URI ----> <---- QUERY STRING ---> <----- FRAGMENT STRING ------>

[〜＃〜] uri [〜＃〜]サーバーからフェッチされたリソースを一意に指定します

[〜＃〜] query [〜＃〜]リソース上でサーバーによって実行される操作を定義します

[〜＃〜]フラグメント[〜＃〜]ブラウザ（アプリケーション）の動作を制御します。フラグメントは、ユーザーが同じアプリケーション状態を取得するために別のユーザーにリンクを送信できるように、ユーザーに表示される必要があるアプリケーション状態を格納するために使用する必要があります。

フラグメントは、単一ページのWebアプリケーション（たとえば、携帯電話でオフラインで実行できる）を透過的に実装するためのURLフリーの唯一の部分です。 したがって、サーバーに送信してはなりません。

5
katomaso

ブラウザはデフォルトでハッシュをサーバーに送信しないため、それを行う唯一の方法は、Javascriptを使用することです。

  1. フォームが送信されたら、ハッシュ（window.location.hash）を取得し、サーバー側の非表示の入力フィールドに保存します。後で簡単に見つけられるように、これをIDが「urlhash」のDIVに入れます。

  2. サーバー上何かをする必要がある場合は、この値を使用できます。必要に応じて変更することもできます。

  3. ページの読み込み時クライアント上、この非表示フィールドの値を確認します。自動生成されたIDはわからないため、含まれているDIVで検索する必要があります。 はい、ここで.ClientIDを使用していくつかのトリックを行うことができますが、ラッパーDIVを使用する方が簡単であることがわかりました。これにより、このJavascriptがすべて外部ファイルに存在し、一般的な方法で使用できるようになります。 。

  4. 非表示の入力フィールドに有効な値がある場合は、それをURLハッシュ（再びwindow.locaion.hash）として設定するか、他のアクションを実行します。

JQueryを使用して、フィールドの選択などを簡素化しました。全体として、1つは値を保存し、もう1つは値を復元するためのいくつかのjQuery呼び出しになります。

提出する前に：

$("form").submit(function() {
  $("input", "#urlhash").val(window.location.hash);
});

ページの読み込み時：

var hashVal = $("input", "#urlhash").val();
if (IsHashValid(hashVal)) {
  window.location.hash = hashVal;
}

IsHashValid（）は、「未定義」またはその他の処理したくないものをチェックできます。

もちろん、$（document）.ready（）を適切に使用するようにしてください。

4
JSAddict

ハッシュコンポーネントはサーバーに渡されませんが、クライアント側で広く使用されています。具体的には、シングルページアプリケーションでは、ハッシュに続くテキストを使用して、アプリケーションの状態を異なるルートとして表します。したがって、何が起こるかというと、ユーザーがアンカータグをクリックしてページ上の任意の場所に移動するたびに、「ホームページ」ページを提供するサーバーへの最初の要求と、ルーターなどのクライアント側ルーティングロジックを含む追加のjsファイルに従うことです。 、ハッシュコンポーネントに続くURLの部分のみが変更されます。これにより、サーバーへのGETリクエストが防止され、この「onhashchange」イベントに応答して、正確なルートに応じてシングルページアプリケーションのコンテンツを更新できます。

0
Mudit Jha