JavaScript에서 서버 측 파일의 존재 확인

Question

JavaScript로 클라이언트 측에서 실행되지만 서버 측에서 파일의 존재를 확인하는 함수를 작성하고 싶습니다. 나는 Ajax를 사용하려고 노력한다.

function ROIFileExists(){ 
    var fileAlreadyExists=undefined; 

    jQuery.ajax({ 
     type: "POST", 
     url: "ROIFileExists.php", 
     data: { FileName: fileName}, 
     cache: false 
     }).done(function(result) { 
      fileAlreadyExists = (result!==0); 
      console.log('fileAlreadyExists='+fileAlreadyExists); 
    }); 

    return fileAlreadyExists; 
} 

문제 Ajax를 비동기이기 때문에 상기 Ajax를 블록으로 설정되기 전에, fileAlreadyExists 보통 (undefined 같이) 반환되는 점이다.

Answer 1

콜백을 사용하거나 자신의 Promise을 사용하십시오.

이

function ROIFileExists(callback){ 
// --------------------^ Accept the function to call back as an arg 

    jQuery.ajax({ 
     type: "POST", 
     url: "ROIFileExists.php", 
     data: { FileName: fileName}, 
     cache: false 
     }).done(function(result) { 
      var fileAlreadyExists = (result!==0); 
      console.log('fileAlreadyExists='+fileAlreadyExists); 
      callback(fileAlreadyExists); 
// ---------^ Call it 
    }); 
} 

사용법 :

function ROIFileExists(){ 
    var d = new $.Deferred();     // Create the deferred object 

    jQuery.ajax({ 
     type: "POST", 
     url: "ROIFileExists.php", 
     data: { FileName: fileName}, 
     cache: false 
     }).done(function(result) { 
      var fileAlreadyExists = (result!==0); 
      console.log('fileAlreadyExists='+fileAlreadyExists); 
      d.resolve(fileAlreadyExists);  // <=== Resolve it 
    }); 

    return d;         // <=== Return it 
} 

사용법 :

ROIFileExists().done(function(exists) { 
    console.log("Exists? " + exists); 
}); 

여기

ROIFileExists(function(exists) { 
    console.log("Exists? " + exists); 
}); 

가 Promise 접근 방식 여기

는 콜백 접근법

---

난 강력하게 async: false를 사용 하지을 제안합니다. 통화 도중 브라우저의 UI가 잠겨 사용자 경험이 좋지 않습니다. jQuery의 향후 버전에서 사라질 것입니다 (직접 XMLHttpRequest을 사용해야합니다). 비슷한 필요성을 가지고 있지만 JSONP를 사용할 때는 async: false을 사용할 수 없습니다.

브라우저의 JavaScript 코드는 어쨌든 이벤트 중심적이므로 이벤트 중심 특성 (이 경우 파일에 대한 정보를 얻는 이벤트)을 사용하는 것이 일반적입니다.

Answer 2

async: false을 사용하면 결과가 함수에 의해 반환되도록 할 수 있습니다.

function ROIFileExists(){ 
    var fileAlreadyExists=undefined; 

    jQuery.ajax({ 
     async: false, // Add this line 
     type: "POST", 
     url: "ROIFileExists.php", 
     data: { FileName: fileName}, 
     cache: false 
     }).done(function(result) { 
      fileAlreadyExists = (result!==0); 
      console.log('fileAlreadyExists='+fileAlreadyExists); 
    }); 

    return fileAlreadyExists; 
} 

그러나 는 콜백 함수를 사용하는 것이 가장 좋습니다 : ( async: false가 최적이 아닌, 당신은 콜백을 지원하기 위해 응용 프로그램의 아키텍처를 변경할 수있는 경우 아래에 따라, 피해야합니다.).

function ROIFileExists(callback){ 
    jQuery.ajax({ 
     type: "POST", 
     url: "ROIFileExists.php", 
     data: { FileName: fileName}, 
     cache: false 
     }).done(function(result) { 
      callback(result!==0); 
     }); 
}