ฉันจะทำให้ jQuery ดำเนินการซิงโครนัสแทนที่จะเป็นแบบอะซิงโครนัสคำขอ Ajax ได้อย่างไร

ฉันมีวิดเจ็ต JavaScript ที่ให้คะแนนส่วนขยายมาตรฐาน หนึ่งในนั้นคือbeforecreateฟังก์ชั่น ควรกลับfalseไปเพื่อป้องกันไม่ให้สร้างรายการ

ฉันได้เพิ่มการเรียก Ajax ในฟังก์ชันนี้โดยใช้ jQuery:

beforecreate: function (node, targetNode, type, to) {
  jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),

  function (result) {
    if (result.isOk == false) 
        alert(result.message);
  });
}

แต่ฉันต้องการป้องกันไม่ให้วิดเจ็ตของฉันสร้างรายการดังนั้นฉันควรกลับมาfalseในฟังก์ชั่นหลักไม่ใช่ในการติดต่อกลับ มีวิธีดำเนินการคำขอ AJAX แบบซิงโครนัสโดยใช้ jQuery หรือ API ในเบราว์เซอร์อื่นหรือไม่

จากเอกสาร jQuery : คุณระบุตัวเลือกแบบอะซิงโครนัสเป็นเท็จเพื่อรับคำขออาแจ็กซ์แบบซิงโครนัส จากนั้นการโทรกลับของคุณสามารถตั้งค่าข้อมูลบางอย่างก่อนหน้าที่แม่ของคุณดำเนินการต่อไป

นี่คือรหัสของคุณหากมีการเปลี่ยนแปลงตามที่แนะนำ:

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
    });
}

คุณสามารถตั้งค่า Ajax ของ jQuery ในโหมดซิงโครนัสได้ด้วยการโทร

jQuery.ajaxSetup({async:false});

จากนั้นทำการโทรอาแจ็กซ์ของคุณโดยใช้ jQuery.get( ... );

จากนั้นเพียงเปิดอีกครั้ง

jQuery.ajaxSetup({async:true});

ฉันเดาว่ามันจะออกมาในลักษณะเดียวกับที่ @Adam แนะนำ แต่อาจเป็นประโยชน์กับคนที่ต้องการกำหนดค่าใหม่jQuery.get()หรือไวยากรณ์ที่jQuery.post()ซับซ้อนยิ่งขึ้นjQuery.ajax()

ทางออกที่ดีเยี่ยม! ฉันสังเกตเห็นเมื่อฉันพยายามที่จะใช้มันว่าถ้าฉันคืนค่าในข้อความสำเร็จมันกลับมาเป็นไม่ได้กำหนด ฉันต้องเก็บมันไว้ในตัวแปรแล้วคืนค่าตัวแปรนั้น นี่เป็นวิธีที่ฉันคิดขึ้นมา:

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;
}

คำตอบทั้งหมดเหล่านี้พลาดจุดที่ทำการโทร Ajax ด้วย async: false จะทำให้เบราว์เซอร์หยุดทำงานจนกว่าคำขอ 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();
}

function getURL(url){
    return $.ajax({
        type: "GET",
        url: url,
        cache: false,
        async: false
    }).responseText;
}


//example use
var msg=getURL("message.php");
alert(msg);

หมายเหตุ: คุณไม่ควรใช้async: falseเนื่องจากข้อความเตือนนี้:

เริ่มต้นด้วย Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27) การร้องขอแบบซิงโครนัสบนเธรดหลักได้ถูกคัดค้านเนื่องจากผลกระทบด้านลบต่อประสบการณ์ของผู้ใช้

Chrome ยังเตือนเกี่ยวกับสิ่งนี้ในคอนโซล:

XMLHttpRequest แบบซิงโครนัสบนเธรดหลักถูกคัดค้านเนื่องจากผลกระทบที่เป็นอันตรายต่อประสบการณ์ของผู้ใช้ สำหรับความช่วยเหลือเพิ่มเติมให้ตรวจสอบhttps://xhr.spec.whatwg.org/

นี่อาจทำให้เพจของคุณพังถ้าคุณทำสิ่งนี้เพราะหยุดทำงานได้ทุกวัน

หากคุณต้องการทำในลักษณะที่ยังรู้สึกเหมือนเป็นซิงโครนัส แต่ยังไม่ปิดกั้นคุณควรใช้ async / await และอาจเป็น ajax ที่ยึดตามสัญญาเช่นFetch API ใหม่

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

แก้ไข chrome กำลังทำงานเมื่อไม่อนุญาตให้ซิงค์ XHR ในการเลิกจ้างหน้าเมื่อผู้ใช้ออกหรือปิดหน้าเว็บ สิ่งนี้เกี่ยวข้องกับก่อนที่จะทำการยกเลิกการโหลดหน้าเว็บและการเปลี่ยนการมองเห็น

หากนี่เป็นกรณีการใช้งานของคุณคุณอาจต้องการดูnavigator.sendBeaconแทน

นอกจากนี้ยังเป็นไปได้ที่หน้าจะปิดการซิงค์คำขอด้วยส่วนหัว http หรือแอตทริบิวต์การอนุญาตของ iframe

โปรดทราบว่าหากคุณกำลังทำการเรียก Ajax ข้ามโดเมน (โดยใช้JSONP ) - คุณไม่สามารถทำแบบซิงโครนัสได้การasyncตั้งค่าสถานะจะถูกละเว้นโดย jQuery

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

สำหรับการโทร JSONP คุณสามารถใช้:

1. Ajax โทรไปยังโดเมนของคุณ - และทำการโทรข้ามโดเมนฝั่งเซิร์ฟเวอร์
2. เปลี่ยนรหัสของคุณให้ทำงานแบบอะซิงโครนัส
3. ใช้ไลบรารี "function sequencer" เช่น Frame.js ( คำตอบนี้)
4. บล็อก UI แทนการบล็อกการดำเนินการ ( คำตอบนี้) (วิธีที่ฉันชอบ)

เมื่อasync: falseคุณได้รับเบราว์เซอร์ที่ถูกบล็อกด้วยตัวคุณเอง สำหรับโซลูชันแบบซิงโครนัสที่ไม่มีการบล็อกคุณสามารถใช้สิ่งต่อไปนี้:

ES6 / ECMAScript2015

ด้วย 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

ด้วย ES7 คุณสามารถใช้ asyc 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
    })(); 
}

ฉันใช้คำตอบที่ได้รับจาก 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');
    }    
}

ฉันเพิ่มdataTypeของ'JSON'และเปลี่ยน.responseTextเพื่อresponseJSON

ฉันยังดึงสถานะโดยใช้คุณสมบัติstatusTextของวัตถุที่ส่งคืน โปรดทราบว่านี่เป็นสถานะของการตอบกลับ Ajax ไม่ใช่ว่า JSON นั้นถูกต้องหรือไม่

ส่วนหลังต้องส่งคืนการตอบสนองใน JSON ที่ถูกต้อง (มีรูปแบบถูกต้อง) ไม่เช่นนั้นวัตถุที่ส่งคืนจะไม่ถูกกำหนด

มีสองด้านที่ควรพิจารณาเมื่อตอบคำถามต้นฉบับ มีคนหนึ่งแจ้งให้อาแจ็กซ์ดำเนินการแบบซิงโครนัส (โดยการตั้งค่าasync: false ) และอีกอันกำลังส่งคืนการตอบสนองผ่านคำสั่งส่งคืนของฟังก์ชั่นการโทรแทนที่จะเข้าสู่ฟังก์ชันการโทรกลับ

ฉันยังลองกับ POST และใช้งานได้

ฉันเปลี่ยน GET เป็น POST และเพิ่มข้อมูล: 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;
}

โปรดทราบว่าโค้ดข้างต้นจะทำงานเฉพาะในกรณีที่asyncเป็นเท็จ หากคุณต้องตั้งค่าasync: trueอ็อบเจ็กต์ที่ส่งคืนjqxhrจะไม่ถูกต้องในขณะที่การโทร AJAX ส่งคืนเฉพาะในภายหลังเมื่อการโทรแบบอะซิงโครนัสเสร็จสิ้นแล้ว แต่การตั้งค่าตัวแปรตอบกลับช้าเกินไป

นี่คือตัวอย่าง:

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

ประการแรกเราควรเข้าใจเมื่อเราใช้ $ .ajax และเมื่อเราใช้ $ .get / $. post

เมื่อเราต้องการการควบคุมระดับต่ำสำหรับการร้องขอ ajax เช่นการตั้งค่าส่วนหัวคำขอการตั้งค่าแคชการตั้งค่าแบบซิงโครนัส ฯลฯ จากนั้นเราควรไปที่ $ .ajax

$ .get / $. โพสต์: เมื่อเราไม่ต้องการการควบคุมระดับต่ำกว่าคำขอ ajax เพียงรับ / โพสต์ข้อมูลไปยังเซิร์ฟเวอร์ มันเป็นชวเลขของ

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

และด้วยเหตุนี้เราจึงไม่สามารถใช้คุณสมบัติอื่น ๆ (ซิงค์แคช ฯลฯ ) กับโพสต์ $ .get / $

ดังนั้นสำหรับการควบคุมระดับต่ำ (ซิงค์แคช ฯลฯ ) ผ่านการร้องขอ ajax เราควรไปที่ $ .ajax

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

นี่คือการใช้งานที่เรียบง่ายสำหรับคำขอ ASYNC กับ jQuery ฉันหวังว่านี่จะช่วยให้ทุกคน

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();

เนื่องจากXMLHttpReponseการดำเนินการแบบซิงโครนัสเลิกใช้ฉันจึงคิดวิธีแก้ไขปัญหาดังต่อไปนี้XMLHttpRequestการดำเนินการซิงโครจะเลิกฉันมากับการแก้ปัญหาต่อไปนี้ที่ตัดสิ่งนี้ทำให้คำสั่ง AJAX ที่สั่งไว้นั้นยังคงเป็น asycnronous ในธรรมชาติซึ่งมีประโยชน์มากสำหรับโทเค็น CSRF แบบใช้ครั้งเดียว

นอกจากนี้ยังมีความโปร่งใสดังนั้นห้องสมุดเช่น 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;
};

เนื่องจากคำถามเดิมเกี่ยวกับjQuery.getมันเป็นมูลค่าการกล่าวถึงที่นี่ที่ (ดังกล่าวถึงที่นี่ ) หนึ่งสามารถใช้async: falseใน$.get()แต่หลีกเลี่ยงนึกคิดเพราะไม่ตรงกันไม่XMLHTTPRequestสนับสนุน

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

ตั้งค่าasyn:falseในคำขอ ajax เพื่อให้ซิงโครนัส

นี่คือตัวอย่างโค้ด:

 $.ajax({
    url: 'some_url',
    type: "GET",
    async: false,
    cache: false,
    dataType: "JSON",
    data: { 
      "p1": v1, 
      "p2": v2
    },
    success: function(result) {
    }  
  }
});

สิ่งนี้สามารถทำให้หน้าจอไม่ตอบสนอง