web-dev-qa-db-ja.com

jQuery AJAXすべきでないときに304応答を生成する

これは本当に頭を掻きます。つまり、FirefoxではなくIEでのみ発生するため、jQueryは実質的にブラウザーに中立であるという印象を受けました。私は過去数時間このことにひたっていて、少なくとも何が起こっているのかを突き止めました。

このjqGrid：

$("#DocumentListByPartRecordsGrid").jqGrid(
          {
            datatype: 'local',            
            colNames: ['<b>Id</b>', '<b>Document Name</b>', '<b>Document Type</b>', '<b>Effective Date</b>', '<b>Expiration Date</b>', '<b>Delete</b>'],
            colModel: [
                  { name: 'ASSOCIATION_ID', Index: 'ASSOCIATION_ID', resizable: true, align: 'left', hidden: true, sortable: false },
                  { name: 'FILE_NAME', Index: 'FILE_NAME', resizable: true, align: 'left', sortable: false, width:'20%' },
                  { name: 'DOCUMENT_TYPE', Index: 'DOCUMENT_TYPE', resizable: true, align: 'left', sortable: false, width:'20%' },
                  { name: 'EFFECTIVE_DATE', Index: 'EFFECTIVE_DATE', resizable: true, align: 'left', sortable: false, width:'20%' },
                  { name: 'EXPIRATION_DATE', Index: 'EXPIRATION_DATE', resizable: true, align: 'left', sortable: false, width:'20%' },
                  { name: 'Delete', Index: 'Delete',resizable: true, align: 'center', sortable: false, width:'20%' },
                  ],            
            rowNum: 15,
            rowList: [15, 50, 100],
            imgpath: '/Drm/Content/jqGrid/steel/images',
            viewrecords: true,            
            height: 162,           
            loadui: 'block',
            forceFit: true
        });

この関数で満たされた：

var mydata = '';    
<% if(!string.IsNullOrEmpty(Model.PCAssociatedDocuments)) { %>        
   var mydata = <%= Model.PCAssociatedDocuments %>;
<% } %>

for (var i = 0; i <= mydata.length; i++){
        jQuery("#DocumentListByPartRecordsGrid").addRowData(i, mydata[i], "last");
        }

これはモデルからきれいに入力されます。これは問題ではありません。この問題は、次のようにコントローラーでフォーマットされた削除機能を使用するときに発生します。

<a class='deleteAttachment' style='cursor: pointer;' href='#' onclick='javascript:PCDocumentDelete(" + s.AssociationId.ToString() + ", " + pcId + ");'>Delete</a>

この関数を呼び出します

function PCDocumentDelete(id, pcid) {
if (confirm("Are you sure you want to delete this document?")) {
    $.blockUI({
        message: "Working...",
        css: {
            background: '#e7f2f7',
            padding: 10
        }
    });
    $.ajax(
        {
            url: '/DRM/Pc/DeleteAssociation?associationId=' + id + '&pcid=' + pcid,
            async: true,
            dataType: "json",
            success: function(result) {
                if (result.Success == true) {
                    //Reload grid                       
                    $.ajax({ async: false });
                    $("#DocumentListByPartRecordsGrid").setGridParam({ url: "/Drm/Pc/DeAssociatePartRecordsWithDocument?pcid=" + pcid, datatype: 'json', myType: 'GET', page: 1 });
                    $("#DocumentListByPartRecordsGrid").trigger("reloadGrid");
                    $.unblockUI();
                    $.showGlobalMessage('Specified document has been successfully disassociated from this part record.');
                }
                else {
                    $.unblockUI();
                    $.showGlobalMessage('An error occurred deleting the attachment.');
                }
            },
            error: function(res, stat) {
                alert(res.toString());
                alert(stat.toString());
            }
        });
    return false;
}
else {
    return false;
}

}

（showGlobalMessageは、特別にフォーマットされたblockUIを作成する内部関数です）

Ajaxはコントローラーでメソッドをコールバックしますが、それをここまで行う前に問題が発生するため、誰かがそれを重要だと思わない限り、そのコードは投稿しません。何が起こるかは、多くの場合不可解な理由により、PC/DeleteAssociationを呼び出すajaxの最初のバーストが304（変更されていない）応答で返されます。更新が必要な変更が何もないときに、それが発生することはわかっています。しかし、これは取得ではなく、投稿として扱われるべきであり、jquery.ajaxは、特に指示がない限り、304応答を生成しないように設計されているという印象を受けました。私は明らかにここで何かを見逃していて、それを自分で捕まえるには長すぎます。誰かが私が逃したものを見ますか？ありがとうございました。

jqueryajaxhttp-status-code-304
28
guildsbounty

わかりません。ajaxリクエストをPOSTとして指定しています。だから基本的に追加します：

$.ajax({ type: 'POST' });

それでも失敗する場合は（一部のブラウザがAJAX奇妙なため））cache: false：

$.ajax({ type: 'POST', cache: false });

ところで、すべてのキャッシュ：falseは、ランダムなものをリクエストURLに追加しています。

編集1：

について

...そして私はjquery.ajaxが、特に指示がない限り、304応答を生成しないように設計されているという印象を受けました

jQueryはここで応答を生成しません。そして、304ヘッダーは単なるHTTPヘッダーです。 HTTP AJAXリクエストは通常​​のHTTPリクエストであり、有効なヘッダーを返す可能性があります。サーバーが304で応答した場合、XHRオブジェクトはサーバーからローカルにキャッシュされた応答を提供します。これは完全に透過的です。ただし、ユーザー。

EDIT2：

キャッシュの防止に関するアドバイスを削除しました。ブードゥーのようです。

EDIT3：

明らかに必要だったので、そのビットを再度追加しました。 IEが違法にキャッシュしているようですAJAX POSTがある程度あります。

44
skarmats
  1. GETではなく、状態を変更するメソッドの呼び出しには常にPOSTを使用してください。これは、このインスタンスではIE要求のキャッシュを防ぐのに十分です。
  2. IEはajaxリクエストを積極的にキャッシュします（ http://www.dashbay.com/2011/05/internet-Explorer-caches-ajax/ および https://blog.httpwatch.comを参照）/2009/08/07/ajax-caching-two-important-facts / ）。これを防ぐには、次の方法があります。
    1. キャッシュ無効化パラメーター($.ajaxSetup({ cache: false });を追加すると、これが自動的に行われます。
    2. 常にPOSTリクエストを使用します（ほとんどの場合、おそらく適切ではありません）。
    3. AJAXリクエストのキャッシュヘッダーをサーバー側でオンにします。最初のリンクは、groovyでこれを行う方法を示しています。同様の方法が任意のフレームワークに適用されます。
21
Joshka

キャッシュ無効化が解決策です！

私の場合、アプリケーションは、カスタムヘッダーを使用する単一のサービスコールをプロキシとして使用して、ブラウザーをサーバーのプライベート部分にブリッジしました（すべてのコールは同じURLに移動しましたが、カスタムヘッダーを使用してプロキシサービスにどのサービスを提供するかを伝えましたそれを渡します）。 Chrome=とFFですべて正常に動作しましたが、IEは、ページで行われた最初の呼び出しからデータを返し続けました。jQuery.ajaxのcache = falseオプションが修正されましたIEは、呼び出されている同じURLを見ただけで、カスタムヘッダーが使用されているかどうか、または本文で別のデータが渡されているかどうかさえ気にせず、ただ「ああ、私はこれをここで知っています。 "と最初の呼び出しの応答を返しました。キャッシュ無効化手法を使用すると、URLはIEとは異なるため、送信されました。

1
Ali