シナリオは次のとおりです。私が関与している調査研究を管理するために、Wordpress プラグインを構築しています。プロジェクト管理者は、WP 管理インターフェイスから csv ファイルをアップロードできます。クライアント側では、ファイルがアップロードされると、ファイルの各行を通過し、ユーザーに関する必要な情報を抽出し、AJAX 呼び出しを行って参加者をプロジェクトに追加します。クライアント側で csv ファイルを解析し、ajax リクエストを 1 つずつ送信して、返されるたびにプログレス バーを更新できるようにすることにしました。JavaScript は次のようになります。
$( '#csv_upload_button' ).click( function() {
// declare the necessary variables
var f = $( '#csv_file_input' )[0].files[0],
fr = new FileReader,
rows, headers, dialog, count, remaining;
// when the file loads
fr.onload = function() {
// get the rows, the count, number remaining to process, and headers
rows = fr.result.split( "\n" );
remaining = count = rows.length - 1; // -1 to account for header row
headers = $.trim( rows[0] ).split( ',' );
// create the dialog box to show the progress bar
dialog = $( '<div></div>' )
.html(
'<p>Loading...</p>' +
'<p><progress id="csv_upload_progress" max="' + count +
'" min="0" value="0"></p>' )
.dialog( { modal: true; } );
// then for each row in the file
$( rows ).each( function( i, r ) {
// create an object to hold the data
var data = {}, row = $.trim( r ).split( ',' ), j;
if ( i > 0 ) { // data starts on the second row
// map the data into our object
for ( j = 0; j < headers.length; j++ ) {
data[ headers[ j ] ] = row[ j ];
}
// send it to the server
$.post(
ajaxurl,
{
action: 'import_panel_member',
data: data,
postid: $( '#post_ID' ).val()
},
function( result ) {
var prog = $( '#csv_upload_progress' );
prog.attr( 'value', prog.attr( 'value' ) + 1 );
if ( 0 == --remaining ) {
// stuff to do when everything has been loaded
}
}
);
}
});
};
// read the csv file
fr.readAsText( f );
});
PHP は次のようになります。
function import_panel_member() {
header( 'content-type: application/json' );
// get the variables sent from the client
$postid = $_POST[ 'postid' ];
$data = $_POST[ 'data' ];
/*
* ...do other things involving talking to a 3rd party server...
*/
// get the WP meta data variable to be updated
$participants = get_post_meta( $postid, '_project_participants', true );
// modify it
$participants[] = $data;
// update the database
update_post_meta( $postid, '_project_participants', $participants );
// return a message to the client
echo json_encode( (object) array( 'success' => 1, 'message' => 'added' ) );
exit;
}
問題は、これらのリクエストが非同期で発生するため、_project_participantsメタデータ フィールドが処理される最後のレコードによってのみ更新されているように見えることです。つまり、リストの最後の人だけが参加者のリストに表示されます。ここに私が試したいくつかのことがあります：
- に変更
$.post()し$.ajax()て設定しますasync: false
これは機能しますが、（同期呼び出しのために）はるかに遅くなり、何らかの理由で、すべての ajax 呼び出しが終了するまでダイアログボックスが表示されなくなります。
クライアント側でcsvを解析する代わりに、csvファイル全体をサーバーにアップロードし、そこで処理します。これも機能しますが、進行状況バーを更新するために使用できる中間フィードバックをサーバーから取得できるとは思いません。このリクエストにはかなりの時間がかかる可能性があり、リクエストが完了する前にユーザーがリクエストを「諦める」ことは望ましくありません。このようにすると、サーバーが ajax 呼び出しにまったく応答しないことがあります。
だから多分私は貪欲で、自分のケーキが欲しくて食べたいだけなのかもしれません。非同期リクエストの速度を利用するにはどうすればよいでしょうか。これにより、進行状況バーでユーザーにフィードバックを提供する機会が得られますが、サーバーでの同時実行の問題に悩まされることはありません。