Sinxron, asynchronous, Ajax sorğusunu yerinə yetirmək üçün jQuery'i necə əldə edə bilərəm?

Standart uzantı nöqtələrini təmin edən javascript widget var. Onlardan biri də beforecreate funksiyadır. Maddənin yaradılmasını maneə törətmək üçün false olmalıdır.

JQuery istifadə edərək, bu funksiyaya Ajax zəngini əlavə etdim:

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

Amma widgetımın bu elementi yaratmamasını istəyirəm, buna görə də geri çağırmada deyil, ana funksiyaya false qayıtmaq məcburiyyətindəyəm. Brauzerdə jQuery və ya başqa hər hansı bir API istifadə edərək sinxron AJAX tələbi yerinə yetirmək üçün bir yol varmı?

1079
25 сент. Artem Tikhomirov tərəfindən hazırlanmışdır 25 s. 2008-09-25 16:26 '08 at 4:26 pm 2008-09-25 16:26
@ 14 cavab

JQuery sənədlərindən : Sinxronlaşdırılan Ajax sorğusu almaq üçün saxta asinxroniyalı seçimi göstərin. Sonra geri çağırış, ana funksiyaya davam etməzdən əvvəl bəzi məlumatları təyin edə bilər.

Təklif etdiyiniz kimi dəyişdirildikdə, kodunuzun göründüyü kimi:

 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 }); } 
1053
25 сент. cavab Adam Bellaire tərəfindən verilir . 2008-09-25 16:30 '08 saat 16:30 'da 2008-09-25 16:30

JQuery Ajax'ı zəng edərək sinxron rejimdə yükləyə bilərsiniz

 jQuery.ajaxSetup({async:false}); 

Sonra Ajax zənglərinizi jQuery.get(... ); ilə yerinə jQuery.get(... );

border=0

Daha sonra təkrar açın.

 jQuery.ajaxSetup({async:true}); 

Mən @ Adam tərəfindən təklif etdiyi kimi eyni işlədiyini düşünürəm, lakin jQuery.get() və ya jQuery.post() daha kompleks jQuery.ajax() sözdiziminə yenidən jQuery.get() istəyən kimsə üçün faydalı ola bilər.

239
13 апр. Sydwell tərəfindən verilmiş cavab 13 aprel 2011-04-13 00:45 '11 'də 0:45' da 2011-04-13 00:45

Böyük həll! Mən bunu tətbiq etməyə çalışdığımda, dəyərini müvəffəqiyyət bəndinə qaytarıramsa, müəyyənləşdirilməmişdi. Mən onu bir dəyişəndə ​​saxlamaq və bu dəyişən qayıtmaq idi. Bu mənə gələn üsuldur:

 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; } 
128
07 апр. Ceymsin Indy tərəfindən verdiyi cavabda 07 Apr 2010-04-07 16:30 '10 saat 16:30 'da 2010-04-07 16:30' da

Bütün bu cavablar, Ajax sorğusunun tamamlanana qədər brauzerin asılmasına səbəb olacaq async: false istifadə edərək, Ajax zənginin edilməsi razılaşmır. Akış nəzarət kitabxanasından istifadə brauzeri asılı olmadan bu problemi həll edəcək. Frame.js ilə bir nümunə aşağıdakı:

 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(); } 
82
28 апр. Cavab BishopZ 28 apr verilir . 2012-04-28 20:41 '12 at 8:41 pm 2012-04-28 20:41
 function getURL(url){ return $.ajax({ type: "GET", url: url, cache: false, async: false }).responseText; } //example use var msg=getURL("message.php"); alert(msg); 
49
25 апр. Cavab 25 aprel tarixində Carcione tərəfindən verilmişdir 2012-04-25 18:34 '12 at 18:34 2012-04-25 18:34

Unutmayın ki, Ajax crossdomain zəngini ( JSONP istifadə edərək) - sinxronizasiya edə bilməzsinizsə , async bayrağı jQuery tərəfindən nəzərə alınmayacaq.

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

JSONP zəngləri üçün istifadə edə bilərsiniz:

  • Ajax öz domeninizə zəng vurub - server tərəfində birtərəfli zəng edin
  • Kodunuzu asynchronously çalışmaq üçün dəyişdirin.
  • Frame.js (bu cavab ) kimi funksiyanı sequencer kitabxanasından istifadə edin.
  • Əvəzi yerinə yetirmək (bu cavab ) (mənim ən sevimli yolum)
22
10 мая '15 в 9:28 2015-05-10 09:28 Cavab Serge Shultz tərəfindən verilir May 10, '15 9:28 2015-05-10 09:28

Qeyd Bu səbəbdən async istifadə etməyin:

Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27) ilə başlayaraq, əsas mövzudakı sinxron istəklər istifadəçi üçün mənfi nəticələrə görə köhnəlmişdir.

Chrome bu barədə konsolda xəbərdarlıq edir:

Ana mövzudakı sinxron XMLHttpRequest, son istifadəçi üzərində zərərli təsirlərindən dolayı köhnəlmişdir. Daha ətraflı məlumat üçün https://xhr.spec.whatwg.org/ səhifəsinə baxın .

Belə bir iş görsəniz, hər hansı bir gün işə dayandığı üçün bu səhifəni poza bilər.

Bunu sinxronizasiya etsə də, lakin hələ də bloklaşmırsa, yeni API Fetch kimi vədlərə əsasən async / wait və ehtimal da ajax istifadə etməlisiniz

 async function foo() { var res = await fetch(url) console.log(res.ok) var json = await res.json() console.log(json) } 
19
13 дек. Cavab Sonsuzdur 13 dekabr. 2016-12-13 15:55 '16 'da 15:55' də 2016-12-13 15:55 'də

Carcione tərəfindən verilən cavabı istifadə etdim və onu JSON istifadə etmək üçün dəyişdirdim.

  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" əlavə etdim və cavabı JSON üçün .responseText dəyişdirdim.

Qaytarılmış obyektin statusText xüsusiyyətini istifadə edərək status aldım . Xatırladaq ki, bu JSON cari deyil, bir Ajax cavab statusu.

Daxili server cavabını düzgün (yaxşı formalaşmış) JSON-da qaytarmalıdır, əks halda geri qaytarılan obyekt müəyyən edilməyəcəkdir.

Orijinal sorğuya cavab verərkən, nəzərə alınacaq iki cəhət var. Biri Ajax-ı eşzamanlı olaraq yerinə yetirir ( async: false ), digər cavab isə geri çağırma operatoru vasitəsilə cavab verir və geri çağırma funksiyasına deyil.

Mən bunu POST istifadə edərək sınamışam və işləmişəm.

GET'i POST'a dəyişdimməlumat əlavə etdim: 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; } 

Xahiş edirik, yuxarıda göstərilən kod yalnız async yanlış olduqda işlədilir . Async təyin etməlisiniz: true, qaytarılmış jqxhr obyekti AJAX çağırışı zamanı etibarsızdır, ancaq asinxron zəng başa çatdıqda, lakin cavab dəyişənini təyin etmək üçün çox gec.

10
15 нояб. cavab verildi paulo62 15 noyabr. 2014-11-15 14:33 '14 14:33 2014-11-15 14:33

async: false ilə async: false siz bloklanmış bir brauzer alırsınız. Qeyri-blocker, sinxron həll üçün aşağıdakılardan istifadə edə bilərsiniz:

ES6 / ECMAScript2015

ES6 ilə generatoru və kitabxana kitabxanasından istifadə edə bilərsiniz:

 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 ilə, asyc kutusunu istifadə edə bilərsiniz:

 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
20 авг. Cavab Spen 20 aug verilir . 2016-08-20 22:52 '16 saat 10:52 'da 2016-08-20 22:52

Bu bir nümunədir:

 $.ajax({ url: "test.html", async: false }).done(function(data) { // Todo something.. }).fail(function(xhr) { // Todo something.. }); 
6
16 авг. cavab verildi 9x 16 av. 2014-08-16 16:20 '14 saat 16:20 'da 2014-08-16 16:20

Javascriptdə JavaScript müştəri kodu

 function isValidLogin() { var flag = false; var Response = $.ajax({ type: "POST", dataType: "json", contentType: "application/json; charset=utf-8", url: "UPSLabelFormCA.aspx/IsValidLogin", async: false }).responseText; var toJson = jQuery.parseJSON(Response); if (toJson.d[0].Message == 'SUCCESS') { flag = true; } return flag; } 

ASP.NET server kodu

 [WebMethod] public static List<ShipInfo> IsValidLogin() { List<ShipInfo> loginStatus = new List<ShipInfo>(); if (HttpContext.Current.User.Identity.IsAuthenticated  HttpContext.Current.Session["Email"] != null) { loginStatus.Add(new ShipInfo() { Success = true, Message = "SUCCESS" }); } else { loginStatus.Add(new ShipInfo() { Success = false, Message = "FAILED" }); } return loginStatus; } 
5
02 дек. Thomas cavab verildi 02 Dek 2014-12-02 16:02 '14 at 16:02 2014-12-02 16:02

Birincisi, $ .ajax istifadə etdikdə və $ .get / $ istifadə edərkən anlamaq lazımdır. yazı

Istədiyiniz başlıq parametrləri, caching ayarları, sinxron parametrlər, və s. Kimi ajax sorğusu üzərində aşağı səviyyədə nəzarət tələb etdikdə, $ .ajax ünvanına getməliyik.

$. almaq / $. post: Ajax tələbi ilə aşağı səviyyəli nəzarət tələb etmədikdə. Sadəcə sadəcə serverə məlumatları göndərmək / göndərmək. Bu kısaltma

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

Buna görə $ .get / $ istifadə edərək digər funksiyaları (sinxronizasiya, önbellek, və s.) istifadə edə bilmərik. yazı.

Buna görə, aşağı səviyyədə (sync, cache, və s.) İdarə etmək üçün, ajax sorğusuna keçmək üçün $ .ajax

  $.ajax({ type: 'GET', url: url, data: data, success: success, dataType: dataType, async:false }); 
2
03 окт. Sheo Dayal Singh tərəfindən verilmiş cavab 03 Oct 2017-10-03 12:52 '17 at 12:52 2017-10-03 12:52

Bu jQuery istifadə ASYNC sorğular üçün mənim sadə bir tətbiqdir. Bu hər kəsə kömək edir.

 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(); 
0
15 февр. Cavab 15 fevralda Felipe Marques tərəfindən verilir. 2018-02-15 22:55 '18 saat 10:55 'da 2018-02-15 22:55

XMLHttpReponse sinxron əməliyyatının XMLHttpReponse ildən, XMLHttpReponse tamamlayan aşağıdakı həll ilə gəldim. Bu, bir dəfə CSRF cədvəlləri üçün çox faydalı bir asynchronous təbiəti saxlayarkən AJAX sorğu sifariş etməyə imkan verir.

Bu da şəffafdır, belə ki, jQuery kimi kitabxanalar uğursuz işləyəcəklər.

  var XHRQueue = []; var _XMLHttpRequest = XMLHttpRequest; XMLHttpRequest = function() { var xhr = new _XMLHttpRequest(); var _send = xhr.send; xhr.send = function() {  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];   _send.apply(xhr, args); }; xhr.addEventListener('load', function(e) {   XHRQueue.shift(); if (XHRQueue.length) this.processQueue(); }); return xhr; }; 
0
29 апр. Geoffrey 29 apreldə cavab verdi 2018-04-29 13:50 '18 saat 13:50 'da 2018-04-29 13:50