Am un JavaScript widget care oferă standard de puncte de extensie. Una dintre ele este `beforecreate funcția. Ar trebui să se întoarcă "false" pentru a preveni un element de a fi creat.
Am'am adăugat un apel Ajax în această funcție folosind 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);
});
}
Dar vreau să-mi împiedic widget de la crearea elementului, așa că ar trebui să se întoarcă "false", în mama-funcție, nu și în apel invers. Există o modalitate de a efectua un sincron cerere AJAX folosind jQuery sau orice alte în-browser-ul API?
De jQuery documentația: specificați asincron opțiunea de a fi fals pentru a obține un sincron cerere Ajax. Atunci de apel invers poate stabili unele date înainte de mama ta funcție de încasări.
Aici's ce codul ar arata daca s-a schimbat cum a sugerat de:
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
});
}
Puteți pune jQuery's Ajax setup în modul sincron de asteptare
jQuery.ajaxSetup({async:false});
Și apoi efectuați apeluri Ajax folosind jQuery.a lua( ... );`
Apoi porni din nou o dată
jQuery.ajaxSetup({async:true});
Cred că funcționează același lucru cum a sugerat de către @Adam, dar s-ar putea fi de ajutor pentru cineva care nu vrea să-și reconfigureze jQuery.get () " sau " jQuery.post()
pentru mai elaborate jQuery.ajax()
sintaxa.
Soluție excelentă! Am observat atunci când am încercat să-l pună în aplicare, că dacă m-am întors o valoare în succesul clauză, a venit înapoi ca nedefinit. A trebuit să-l stocați într-o variabilă și a reveni variabila. Aceasta este metoda am venit cu:
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;
}
Toate aceste răspunsuri dor de punctul în care face un apel Ajax cu async:fals va determina browser-ul să stea până la Ajax cerere completeaza. Folosind un flux de control library va rezolva această problemă, fără a închide browser-ul. Aici este un exemplu cu 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();
}
Păstrați în minte că, dacă're face un cross-domain Ajax apel (prin utilizarea JSONP) - ai poate't face sincron, "asincron" steagul va fi ignorat de jQuery.
$.ajax({
url: "testserver.php",
dataType: 'jsonp', // jsonp
async: false //IGNORED!!
});
Pentru JSONP-apeluri-ai putea folosi:
Notă: nu ar trebui't folosi asincron: fals din cauza asta mesaje de avertizare:
Incepand cu Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / Opera mini 2.27), sincron cereri pe firul principal au fost depreciat din cauza efectelor negative pentru experiența utilizatorului.
Chrome chiar avertizează despre asta in consola:
Sincron XMLHttpRequest pe firul principal este depreciată din cauza efectelor negative pentru utilizatorul final's experiență. Pentru mai mult ajutor, consultați https://xhr.spec.whatwg.org/.
Acest lucru ar putea rupe pagina ta dacă faci așa ceva, deoarece acesta ar putea opri de lucru în orice zi.
Dacă vrei să faci un drum pe care încă se simte ca daca's sincron dar încă nu't bloca atunci ar trebui să utilizați asincron/așteaptă și, probabil, de asemenea, unele ajax, care se bazează pe promisiuni ca noua Aduce API
async function foo() {
var res = await fetch(url)
console.log(res.ok)
var json = await res.json()
console.log(json)
}
Edit chrome este de lucru pe a Refuza traducerea XHR în pagina de concediere atunci când pagina este în curs de navigat departe sau închisă de către utilizator. Acest lucru implică beforeunload, unload, pagehide și visibilitychange.
dacă acesta este cazul dumneavoastră de utilizare, atunci ați putea dori să aibă o privire la navigator.sendBeacon în loc
Este de asemenea posibil pentru pagină pentru a dezactiva sincronizarea req cu http anteturile sau iframe's permit atribut
Am folosit răspunsul dat de Carcione și modificate pentru a utiliza 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');
}
}
Am adăugat tip de 'JSON' și-a schimbat .responseText la responseJSON.
Am, de asemenea, preluate de stare folosind statusText proprietatea obiectului întors. Rețineți că aceasta este starea de Ajax răspuns, nu dacă JSON este valabil.
Back-end trebuie să se întoarcă răspunsul corect (bine formate) JSON, în caz contrar obiectul returnat va fi nedefinit.
Există două aspecte de luat în considerare atunci când răspunde la întrebarea inițială. Unul spune Ajax pentru a efectua sincron (prin setarea asincron: false), iar celălalt se întoarce răspunsul prin apelarea funcției's return, mai degrabă decât într-o funcție de apel invers.
Am încercat, de asemenea, cu POST și a funcționat.
Am schimbat AJUNGE la POST și a adăugat date: 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;
}
Rețineți că codul de mai sus funcționează numai în cazul în care asincron este fals. Dacă ai fost la set asincron: true obiectul returnat jqxhr nu va fi valabil la data apel AJAX se întoarce, doar mai târziu, atunci când apel asincron s-a terminat, dar că este mult prea târziu pentru a seta raspuns variabilă.
Cu asincron: fals
te tine blocat browser-ul.
Pentru un non blocarea soluție sincron puteți utiliza următoarele:
Cu ES6 puteți folosi un generator & co biblioteca:
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
});
}
Cu ES7 puteți folosi doar asyc așteaptă:
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
})();
}
În primul rând trebuie să înțelegem atunci când vom folosi $.ajax și când ne-am folosi $.ia/$.post
Când am nevoie de un nivel scăzut de control asupra cerere ajax, cum ar fi cererea setările de antet, cache setări, sincron setări etc. atunci ar trebui să mergem pentru $.ajax.
$.ia/$.post: atunci Când nu avem nevoie de un nivel scăzut de control asupra cerere ajax.Doar simplu get/post datele la server.Este prescurtare de
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
și, prin urmare, nu putem folosi alte caracteristici(sincronizare,cache etc.) cu $.ia/$.post.
Prin urmare, pentru nivelul scăzut de control(sincronizare,cache,etc.) peste cerere ajax,ar trebui să mergem pentru $.ajax
$.ajax({
type: 'GET',
url: url,
data: data,
success: success,
dataType: dataType,
async:false
});
acest lucru este meu de punere în aplicare simplu pentru ASYNC cereri cu jQuery. Sper ca asta ajuta pe cineva.
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();
Pentru XMLHttpReponsefuncționarea sincronă este învechită am venit cu următoarea soluție care se infasoara
XMLHttpRequest`. Aceasta permite comandat AJAX interogări în timp ce încă fiind asycnronous în natură, care este foarte util pentru o singură utilizare CSRF jetoane.
Este, de asemenea, transparent atât de biblioteci, cum ar fi jQuery va funcționa perfect.
/* 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;
};
Acest lucru este meu "Ață" spațiu de nume:
var Thread = {
sleep: function(ms) {
var start = Date.now();
while (true) {
var clock = (Date.now() - start);
if (clock >= ms) break;
}
}
};
Și acest lucru este cum am spune:
var d1 = new Date();
console.log('start ' + d1.toLocaleTimeString());
Thread.sleep(10000);
var d2 = new Date();
console.log('end ' + d2.toLocaleTimeString());
Și dacă se uită la consola vom obține următorul rezultat:
start 1:41:21 PM
end 1:41:31 PM