web-dev-qa-db-ja.com

AJAXリクエストと通常のブラウザリクエストの違い

AJAXリクエストと直接のブラウザリクエスト（Webページの呼び出し方法とロード方法））には違いがありますか？

言い換えれば、直接的なサーバー側の要求は、クライアント側の要求（ブラウザーによって開始された）とは異なる方法で処理されますか？

javascriptajaxxmlhttprequest
39
Qqwy

AJAXリクエストは同一であり、サーバーに関する限り、わずかに異なるHTTPヘッダー以外の「通常の」ブラウザーリクエストです。例= chrome送信：

X-Requested-With:XMLHttpRequest

そのヘッダーが標準化されているかどうか、またはすべてのブラウザーで異なるか、またはすべてのブラウザーですべてが含まれているかどうかはわかりません。

編集：私はそれを取り戻します、そのヘッダーはjQuery（およびおそらく他のJSライブラリ）によって送信され、ブラウザによって証明されないように：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/');
xhr.send();

送信する：

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie: ....
Host:stackoverflow.com
If-Modified-Since:Sat, 31 Dec 2011 01:57:24 GMT
Referer:http://stackoverflow.com/questions/8685750/how-does-an-ajax-request-differ-from-a-normal-browser-request/8685758
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.12 Safari/535.11

デフォルトでは違いがないという結論に導きます。

29
Mark Kahn

ヘッダーにいくつかの違いがあるかもしれませんが、主な動作の違いはクライアント上にあります。

ブラウザがwindow.location.href = "index.html"のように通常のリクエストを行うと、現在のウィンドウがクリアされ、サーバーの応答がウィンドウに読み込まれます。

Ajaxリクエストを使用すると、現在のウィンドウ/ドキュメントは影響を受けず、JavaScriptコードはリクエストの結果を調べて、その結果に対して必要なことを実行できます（HTMLをページに動的に挿入し、JSONを解析してページロジックを使用し、XMLを解析しますなど）。

サーバーは何も違いはありません。クライアントが2つの要求からの応答を処理する方法にあります。

35
jfriend00

jQuery のような人気のあるクライアント側ライブラリには、X-Requested-Withヘッダーをリクエストに含め、XMLHttpRequestに設定して、AJAXとしてマークします。

これは数年前には十分に標準的であると考えられているようです（おそらくjQueryが非常に人気があり、ほとんどすべてのWebサイトにその存在があるため）。多くのサーバー側フレームワークには、受信した要求のこのヘッダーをチェックするヘルパーさえあります。あなたのために：

ASP.NET MVC 5：

HttpRequestBase.IsAjaxRequest()

Django：

HttpRequest.is_ajax()

フラスコ：

flask.Request.is_xhr

ただし、jQueryのフロントエンド世界での統治の終わり、fetch AP​​Iの標準化、およびデフォルトでこの目的のためにヘッダーを追加しない他の最新のクライアント側ライブラリの出現により、 、パターンはバックエンドでも陳腐化しています。 ASP.NET MVCでは、ヘルパーは 新しいバージョン およびFlaskに含まれていないため、非推奨としてマークされています。

1
slashCoder

あんまり。ほとんどのAjaxクライアントがX-Requested-With=XMLHttpRequest HTTPヘッダー

0
Juan Mendes

私は皆さんを信じていますが、weblogicにはまったく奇妙なことがありました。私は、AJAX呼び出しを行うExtJSフレームワークを使用してアプリを作成しています。

J_security_checkを実行しているときに、AJAXの方法で実行すると常にエラーが発生します。

unauthorized: var submitButton = new Ext.Button({
            text: 'Logon',
            formBind: true, //only enabled once the form is valid
            disabled: true,
            handler: function() {                
                Ext.Ajax.request({
                    url: "j_security_check",
                    params: {
                        j_username: dlg.getForm().findField('j_username').getValue(),
                        j_password: dlg.getForm().findField('j_password').getValue()
                    },
                    method: "GET"
                });
            }
        });

これは失敗します。

これを発行すると：

window.location.href = "j_security_check?j_username=" + dlg.getForm().findField('j_username').getValue() + "&j_password=" + dlg.getForm().findField('j_password').getValue();

できます！変。

0
Lawrence

ブラウザは常に最初のメッセージとして送信するため、「text/html」がリクエストの「最良の」Accept MIMEタイプであるかどうかを常に確認します。

Firefoxの例：

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

もちろん、これは依然としてAccept/MIMEタイプとしてtext/htmlを使用したajaxリクエストである可能性がありますが、どのクライアントがバックエンドAPIを消費するかがわかっている場合は、信頼できることがわかりました。

0
Marcelo Paixão Resende