2016-10-23 34 views
3

ユーザーリクエストごとにサーバーからテキスト形式のデータファイルを読み込むためのjavascriptを使用してWebページを作成しています。テキストファイルがロードされたら、データをいくらか操作する必要があります。JavaScriptからテキストファイルを読み取る必要があります

私はロードのためにXMLHttpRequestを使用していましたが、同期要求が「廃止予定」となっています。データがロードされる前にデータを操作することはできません。この場合、私は何ができますか?

+1

で呼び出す必要があります。 :) – Jite

答えて

3

asynchronous requestを使用します。

function doGET(path, callback) { 

    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState == 4) { 
      // The request is done; did it work? 
      if (xhr.status == 200) { 
       // ***Yes, use `xhr.responseText` here*** 
       callback(xhr.responseText); 
      } else { 
       // ***No, tell the callback the call failed*** 
       callback(null); 
     } 
    }; 
    xhr.open("GET", path); 
    xhr.send(); 
} 

function handleFileData(fileData) { 
    if (!fileData) { 
     // Show error 
     return; 
    } 
    // Use the file data 
} 

// Do the request 
doGET("/path/to/file", handleFileData); 

またはコールバックを処理するために、より現代的な方法である約束を、使用して:

function doGET(path, callback) { 
    return new Promise(function(resolve, reject) { 
     var xhr = new XMLHttpRequest(); 
     xhr.onreadystatechange = function() { 
      if (xhr.readyState == 4) { 
       // The request is done; did it work? 
       if (xhr.status == 200) { 
        // Yes, use `xhr.responseText` to resolve the promise 
        resolve(xhr.responseText); 
       } else { 
        // No, reject the promise 
        reject(xhr); 
       } 
      } 
     }; 
     xhr.open("GET", path); 
     xhr.send(); 
    }); 
} 

// Do the request 
doGET("/path/to/file") 
    .then(function(fileData) { 
     // Use the file data 
    }) 
    .catch(function(xhr) { 
     // The call failed, look at `xhr` for details 
    }); 
+0

私はこれを理解しているか分からない。私はこの関数から値を返すために "return"を使ってみましたが、まだロードされていないので常に "undefined"を返します。また、グローバル変数を結果と同じに設定しようとしましたが、まだロードされていないため「未定義」に設定されています。アプリケーション全体をこの関数の中に入れるべきですか? – OZ1SEJ

+0

私の主張は、結果が出るまで、スクリプトを続行する意味がありません。私は同期呼び出しが非推奨であることは絶対に反直接的だと感じています。 – OZ1SEJ

+0

@ OZ1SEJ:同期呼び出しでは、呼び出しが実行されるJavaScriptスレッドをブロックする必要があります。これがメインのUIスレッド(デフォルトUIスレッド)であれば、呼び出しが完了するまでページ上で何も起こりません。これにより、ページのUI(少なくとも)またはブラウザ(場合によって)がロックされます。非同期要求により、ネットワーク操作の進行中にページが応答し続けることができます。ブラウザでJavaScriptを操作する場合は、非同期操作を使用する必要があります。 –

1

ローカルファイルを処理したいので、この

をお試しください

使用するXMLHttpRequest

function readFile(file) 
{ 
    var f = new XMLHttpRequest(); 
    f.open("GET", file, false); 
    f.onreadystatechange = function() 
    { 
     if(f.readyState === 4) 
     { 
      if(f.status === 200 || f.status == 0) 
      { 
       var res= f.responseText; 
       alert(res); 
      } 
     } 
    } 
    f.send(null); 
} 

その後、同期が、非同期要求を使用しないでFile:\\

readFile('File:\\\yourpath'); 
+0

はい、私は関数の内部*の結果を警告することができますが、何らかの理由で関数の結果*を取得する必要がありますか、その内側のif文の中にアプリケーション全体を置く必要がありますか? – OZ1SEJ

+1

@ OZ1SEJ:ファイルデータを扱うコードを引数を受け付ける関数に入れ、データが準備できたら非同期コードを呼び出すようにしてください。私はそれを行うことを示すCWの答えを更新しました。 –

+0

@ T.J.Crowderだから、基本的に、私はこの関数内から自分のアプリケーション全体を呼び出す必要がありますか?また、「CW回答」はどういう意味ですか? – OZ1SEJ

関連する問題