[JQUERY] 어떻게 JQuery와 동기보다는 비동기, Ajax 요청을 수행 할 수 있습니까?

어떻게 JQuery와 동기보다는 비동기, Ajax 요청을 수행 할 수 있습니까?

해결법

1. ---

   1.JQuery와 문서에서 : 당신은 동기 Ajax 요청을받을 거짓으로 비동기 옵션을 지정합니다. 그런 다음 콜백 어머니 기능을 진행하기 전에 일부 데이터를 설정할 수 있습니다.

   JQuery와 문서에서 : 당신은 동기 Ajax 요청을받을 거짓으로 비동기 옵션을 지정합니다. 그런 다음 콜백 어머니 기능을 진행하기 전에 일부 데이터를 설정할 수 있습니다.

   여기에 코드를 제안 변경되었을 경우는 같을 것이다 무엇 :

   beforecreate: function (node, targetNode, type, to) {
       jQuery.ajax({
           url: 'http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),
           success: function (result) {
               if (result.isOk == false) alert(result.message);
           },
           async: false
       });
   }
   

2. ---

   2.당신은 호출하여 동기 모드에서 jQuery의 아약스 설치를 넣을 수 있습니다

   당신은 호출하여 동기 모드에서 jQuery의 아약스 설치를 넣을 수 있습니다

   jQuery.ajaxSetup({async:false});
   

   그리고 jQuery.get를 사용하여 Ajax를 호출을 수행하는 (...);

   그런 다음 다시 한 번를 켜기

   jQuery.ajaxSetup({async:true});
   

   나는 @ 아담에 의해 제안이 같은 일을 작동 생각하지만, 더 jQuery.ajax 정교 () 구문에 자신의 jQuery.get () 또는 jQuery.post ()를 다시 구성 할 않는 사람에게 도움이 될 수 있습니다.

3. ---

   3.우수한 솔루션입니다! 내가 성공 절에 값을 반환하는 경우 정의되지 않은 한, 돌아 왔다고를 구현하려고 할 때 나는났습니다. 나는 변수에 저장하고 그 변수를 반환했다. 이것은 내가 생각 해낸 방법입니다 :

   우수한 솔루션입니다! 내가 성공 절에 값을 반환하는 경우 정의되지 않은 한, 돌아 왔다고를 구현하려고 할 때 나는났습니다. 나는 변수에 저장하고 그 변수를 반환했다. 이것은 내가 생각 해낸 방법입니다 :

   function getWhatever() {
     // strUrl is whatever URL you need to call
     var strUrl = "", strReturn = "";
   
     jQuery.ajax({
       url: strUrl,
       success: function(html) {
         strReturn = html;
       },
       async:false
     });
   
     return strReturn;
   }
   

4. ---

   4.이 답변의 모든 비동기와 Ajax 호출을하고 있다는 점을 그리워 : 거짓 브라우저가 Ajax 요청이 완료 될 때까지 중단 될 것입니다. 흐름 제어 라이브러리를 사용하면 브라우저를 걸려하지 않고이 문제를 해결합니다. 다음으로 Frame.js 예이다 :

   이 답변의 모든 비동기와 Ajax 호출을하고 있다는 점을 그리워 : 거짓 브라우저가 Ajax 요청이 완료 될 때까지 중단 될 것입니다. 흐름 제어 라이브러리를 사용하면 브라우저를 걸려하지 않고이 문제를 해결합니다. 다음으로 Frame.js 예이다 :

   beforecreate: function(node,targetNode,type,to) {
   
       Frame(function(next)){
   
           jQuery.get('http://example.com/catalog/create/', next);
       });
   
       Frame(function(next, response)){
   
           alert(response);
           next();
       });
   
       Frame.init();
   }
   

5. ---

   5.

   function getURL(url){
       return $.ajax({
           type: "GET",
           url: url,
           cache: false,
           async: false
       }).responseText;
   }
   
   
   //example use
   var msg=getURL("message.php");
   alert(msg);
   

6. ---

   6.참고 : 비동기를 사용하지 않아야합니다 : 거짓을 인해이 경고 메시지 :

   참고 : 비동기를 사용하지 않아야합니다 : 거짓을 인해이 경고 메시지 :

   크롬은 심지어 콘솔에서 이것에 대해 경고한다 :

   이 같은 일을하는 경우 어떤 일 작동하지 않을 수 있기 때문에이 페이지를 깰 수 있습니다.

   당신은 그것을하는 방법을 수행 할 경우 그 여전히 동기의 경우 같은 느낌하지만 여전히 당신은 비동기 / await를 아마 또한 새로운처럼 약속을 기반으로 일부 아약스는 API를 가져 오기 사용해야합니다 다음 차단하지 않습니다

   async function foo() {
     var res = await fetch(url)
     console.log(res.ok)
     var json = await res.json()
     console.log(json)
   }
   

   편집하다 페이지가 얻어 탐색하거나 사용자에 의해 폐쇄 될 때 크롬 페이지 기각 금지됨 동기 XHR 중이다. 이 beforeunload, 언로드, pagehide 및 visibilitychange을 포함한다.

   이 사용 사례의 경우, 대신 navigator.sendBeacon 좀보고 할 수 있습니다

   그것은으로 비활성화 동기화 REQ에 페이지도 가능 하나 HTTP 헤더 또는 iframe이 속성을 허용입니다

7. ---

   7.당신이 (JSONP를 사용하여) 크로스 도메인 Ajax 호출을 수행하는 경우 있음을 명심하십시오 - 당신은 기적을 할 수 없어, 비동기 플래그는 jQuery를 무시합니다.

   당신이 (JSONP를 사용하여) 크로스 도메인 Ajax 호출을 수행하는 경우 있음을 명심하십시오 - 당신은 기적을 할 수 없어, 비동기 플래그는 jQuery를 무시합니다.

   $.ajax({
       url: "testserver.php",
       dataType: 'jsonp', // jsonp
       async: false //IGNORED!!
   });
   

   JSONP-전화를 들어 당신은 사용할 수 있습니다 :

8. ---

   8.비동기로 : 거짓 당신은 자신에게 차단 브라우저를 얻을. 동기 차단 솔루션이 아닌 위해 당신은 다음을 사용할 수 있습니다 :

   비동기로 : 거짓 당신은 자신에게 차단 브라우저를 얻을. 동기 차단 솔루션이 아닌 위해 당신은 다음을 사용할 수 있습니다 :

   ES6하면 발전기 및 공동 라이브러리를 사용할 수 있습니다 :

   beforecreate: function (node, targetNode, type, to) {
       co(function*(){  
           let result = yield jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
           //Just use the result here
       });
   }
   

   ES7으로 당신은 await를 비동기 사용할 수 있습니다 :

   beforecreate: function (node, targetNode, type, to) {
       (async function(){
           let result = await jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
           //Just use the result here
       })(); 
   }
   

9. ---

   9.나는 Carcione에 의해 주어진 답을 사용하고 JSON을 사용하도록 수정했습니다.

   나는 Carcione에 의해 주어진 답을 사용하고 JSON을 사용하도록 수정했습니다.

    function getUrlJsonSync(url){
   
       var jqxhr = $.ajax({
           type: "GET",
           url: url,
           dataType: 'json',
           cache: false,
           async: false
       });
   
       // 'async' has to be 'false' for this to work
       var response = {valid: jqxhr.statusText,  data: jqxhr.responseJSON};
   
       return response;
   }    
   
   function testGetUrlJsonSync()
   {
       var reply = getUrlJsonSync("myurl");
   
       if (reply.valid == 'OK')
       {
           console.dir(reply.data);
       }
       else
       {
           alert('not valid');
       }    
   }
   

   나는 'JSON'의 데이터 유형을 추가 responseJSON에 .responseText을 변경했습니다.

   또한 반환 된 객체의하는 statusText 속성을 사용하여 상태를 검색. 참고이 Ajax 응답의 상태 즉, JSON은 유효 여부.

   백 엔드가 정확한 (잘 형성됨) JSON에 응답하여, 그렇지 않으면 리턴 된 객체가 정의 될을 반환한다.

   원래의 질문에 대답 할 때 고려해야 할 두 가지 측면이있다. 하나는 (비동기 설정 : false)를 동 기적으로 수행하기 위해 Ajax를 말하고, 다른 하나는 오히려 콜백 함수에보다, 호출 함수의 반환 문을 통해 응답을 반환한다.

   또한 POST 그것을 시도하고 일했다.

   나는 POST로 GET 및 추가 데이터를 변경 : POSTDATA를

   function postUrlJsonSync(url, postdata){
   
       var jqxhr = $.ajax({
           type: "POST",
           url: url,
           data: postdata,
           dataType: 'json',
           cache: false,
           async: false
       });
   
       // 'async' has to be 'false' for this to work
       var response = {valid: jqxhr.statusText,  data: jqxhr.responseJSON};
   
       return response;
   }
   

   위의 코드는 비동기가 false 인 경우에 작동합니다. 당신이 세트 비동기 것 인 경우는 true 반환 된 객체의 jqxhr는 AJAX 호출이 반환은, 단지 나중에 비동기 호출이 완료 될 때 유효하지 않을 것입니다,하지만 너무 늦게 응답 변수를 설정하는 것입니다.

10. ---

    10.이 예입니다 :

    이 예입니다 :

    $.ajax({
      url: "test.html",
      async: false
    }).done(function(data) {
       // Todo something..
    }).fail(function(xhr)  {
       // Todo something..
    });
    

11. ---

    11.첫째로 우리는 우리가 $ 아약스를 사용할 때 이해하고 있어야 우리는 $ 갔지 / $. 게시물을 사용할 때

    첫째로 우리는 우리가 $ 아약스를 사용할 때 이해하고 있어야 우리는 $ 갔지 / $. 게시물을 사용할 때

    우리는 이러한 요청 헤더 설정, 캐시 설정으로 아약스 요청을 통해 낮은 수준의 제어를 필요로 할 때, 동기 설정은 우리가 $ 아약스 가야 etc.then.

    $ 갔지 / $ 게시물 :. 우리가 아약스 request.Only 간단한 GET을 통해 낮은 수준의 제어를 필요로하지 않을 때 / 게시 server.It에 데이터의 속기

    $.ajax({
      url: url,
      data: data,
      success: success,
      dataType: dataType
    });
    

    따라서 우리는 $ 갔지 / $. 이후에 다른 기능 (동기, 캐시 등)을 사용할 수 없습니다.

    따라서 (. 동기, 캐시 등) 낮은 수준의 제어를 위해 아약스 요청을 통해, 우리는 $ 아약스 가야

     $.ajax({
         type: 'GET',
          url: url,
          data: data,
          success: success,
          dataType: dataType,
          async:false
        });
    

12. ---

    12.이 jQuery로 ASYNC 요청에 대한 내 간단한 구현입니다. 나는이 도움이 누군가를 바랍니다.

    이 jQuery로 ASYNC 요청에 대한 내 간단한 구현입니다. 나는이 도움이 누군가를 바랍니다.

    var queueUrlsForRemove = [
        'http://dev-myurl.com/image/1', 
        'http://dev-myurl.com/image/2',
        'http://dev-myurl.com/image/3',
    ];
    
    var queueImagesDelete = function(){
    
        deleteImage( queueUrlsForRemove.splice(0,1), function(){
            if (queueUrlsForRemove.length > 0) {
                queueImagesDelete();
            }
        });
    
    }
    
    var deleteImage = function(url, callback) {
        $.ajax({
            url: url,
            method: 'DELETE'
        }).done(function(response){
            typeof(callback) == 'function' ? callback(response) : null;
        });
    }
    
    queueImagesDelete();
    

13. ---

    13.XMLHttpReponse 동기 운전이되지 않습니다 때문에 XMLHttpRequest를 래핑 다음과 같은 솔루션을 함께했다. 이것은 여전히 ​​단일 사용 CSRF 토큰에 매우 유용하다 자연의 asycnronous하면서 AJAX 쿼리를 주문 허용한다.

    XMLHttpReponse 동기 운전이되지 않습니다 때문에 XMLHttpRequest를 래핑 다음과 같은 솔루션을 함께했다. 이것은 여전히 ​​단일 사용 CSRF 토큰에 매우 유용하다 자연의 asycnronous하면서 AJAX 쿼리를 주문 허용한다.

    jQuery와 같은 라이브러리가 원활하게 작동 할 수 있도록 그것은 또한 투명합니다.

    /* wrap XMLHttpRequest for synchronous operation */
    var XHRQueue = [];
    var _XMLHttpRequest = XMLHttpRequest;
    XMLHttpRequest = function()
    {
      var xhr   = new _XMLHttpRequest();
      var _send = xhr.send;
    
      xhr.send = function()
      {
        /* queue the request, and if it's the first, process it */
        XHRQueue.push([this, arguments]);
        if (XHRQueue.length == 1)
          this.processQueue();
      };
    
      xhr.processQueue = function()
      {
        var call = XHRQueue[0];
        var xhr  = call[0];
        var args = call[1];
    
        /* you could also set a CSRF token header here */
    
        /* send the request */
        _send.apply(xhr, args);
      };
    
      xhr.addEventListener('load', function(e)
      {
        /* you could also retrieve a CSRF token header here */
    
        /* remove the completed request and if there is more, trigger the next */
        XHRQueue.shift();
        if (XHRQueue.length)
          this.processQueue();
      });
    
      return xhr;
    };
    

14. ---

    14.비동기은 XMLHttpRequest되지 않습니다 (그리고 브라우저가를 줄 수 있기 때문에 (달러 (A $)의 갔지에서 false)를하지만, 이상적으로 그것을 피할 : 원래의 질문이 jQuery.get에 대해 이었기 때문에, 그것은 (여기에서 언급 한 바와 같이) 하나는 비동기를 사용할 수 있다는 것을 언급 할 가치가있다 경고):

    비동기은 XMLHttpRequest되지 않습니다 (그리고 브라우저가를 줄 수 있기 때문에 (달러 (A $)의 갔지에서 false)를하지만, 이상적으로 그것을 피할 : 원래의 질문이 jQuery.get에 대해 이었기 때문에, 그것은 (여기에서 언급 한 바와 같이) 하나는 비동기를 사용할 수 있다는 것을 언급 할 가치가있다 경고):

    $.get({
      url: url,// mandatory
      data: data,
      success: success,
      dataType: dataType,
      async:false // to make it synchronous
    });
    

from https://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-re by cc-by-sa and MIT license