Algemene Ajax Functie?

Ik denk dat dat op de hierboven voorstelde manier niet gaat werken. Een AJAX call is namelijk asynchroon als ik mij niet vergis (dit betekent kort door de bocht "wacht niet op antwoord"), daarom kun je in je callback geen waarde retourneren tenzij je op een of andere manier forceert dat er op het antwoord wordt gewacht, maar dat blokkeert dan je hele applicatie (wat je waarschijnlijk niet wilt). Als je het bovenstaande wilt laten werken zal je hele code "stack" asynchroon moeten zijn denk ik.

Wat je wel zou kunnen doen is je functionaliteit wat dynamischer maken zodat url en data instelbaar zijn (en niet hardcoded is) zodat je het als een "functie" (een herbruikbare eenheid code) kunt gebruiken, ik denk dat dit laatste jouw doel is, in plaats van die hele lap code elke keer opnieuw uitschrijven met een andere url / andere data? Dit heeft wel tot gevolg dat je de functionaliteit waarbinnen je de AJAX calls wilt gebruiken iets anders vorm zult moeten geven. Dit is een noodzakelijk compromis, want het alternatief is dus alle code asynchroon opzetten (of mogelijk zijn er nog andere manieren) maar dat is dus vrij bewerkelijk.

De eerste stap is het groeperen van functionaliteit in (JavaScript) objecten, hier kun je dan je AJAX calls in opnemen. Vergelijk dit met klassen en methoden in een object georienteerde aanpak.

Maar je zult ons wel een beetje op weg moeten helpen, zou je bijvoorbeeld een voorbeeld kunnen geven van welke dingen je doet met deze AJAX calls, dan kunnen we gaan nadenken hoe we deze in (herbruikbare) objecten kunnen gieten.

Ik heb een tijd terug een soort van autocomplete-functionaliteit gemaakt die gebruik maakt van AJAX calls om resultaten op te halen. Deze is gegoten in een object structuur dus ik kan meerdere objecten van deze "klasse" maken met een minimale hoeveelheid code:

<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    var box = new autocompleteBox();
    box.init({
        'inputId':                  'inputtest',
        'boxId':                    'boxtest',
        'ajaxURL':                  '<?php echo $ajaxLink ?>',
        'ajaxQueryStringVariable':  'q' // try "z" (obviously will not return any results)
    });

    var box2 = new autocompleteBox();
    box2.init({'inputId': 'inputtest2', 'boxId': 'boxtest2', 'ajaxURL': '<?php echo $ajaxLink ?>'});
});
//]]>
</script>

Als je wilt kan ik hier (weer) een werkend voorbeeldje van maken, maar op dit moment is deze code een beetje achter geraakt op mijn andere code en is daardoor niet meer compatibel :).

Volgens mij is dit niet mogelijk tenzij je een callback functie gebruikt.

Bedankt voor je reactie, wat bedoel je met een callback?

Voorbeeld van een van mij post functies :

<?php // Jquery

$.ajax({
url : 'api/login',
type : 'post',
dataType : 'json',
data : {
email : email,
password: password,
token : token
},
success: function (response) {
if(response.ret == 'success') {
location.reload();
} else {
alertMsg('#login_alert', 'danger', response.msg);
disableBtn('.submit', false);
}
}
});

?>

Peter Massije op 27/11/2015 16:40:51

Volgens mij is dit niet mogelijk tenzij je een callback functie gebruikt.

Is de succes function niet een callback function?

Ass je gegevens vanuit een ajax call wilt bewaren, kan je een interval zetten, die kijkt of de variable die je wilt gebruiken de gewenste waarde heeft om de zoveel tijd, zoja, clearInterval en dan ga je verder.

Niet getest, maar zoiets :
Probleem is dat deze functie altijd postCallback variable gebruikt, ben er nog niet helemaal uit...

<?php // Jquery

// Universal post function
function post(url, parameters) {
$.ajax({
url : url,
type : 'post',
dataType : 'json',
data : parameters,
success : postCallback,
error : postCallback
});
}

// Launch function
post('files/ajax.php', 'username=jack&password=dummy');

// Catch the response
var postCallback = function (response) {
console.log(response);
// Do something with it
}

?>

[size=xsmall]Toevoeging op 27/11/2015 17:03:33:[/size]

Of je zet async uit :-)

<?php // Jquery

// Universal post function
function post(url, parameters) {
var response;
$.ajax({
url : url,
type : 'post',
dataType : 'json',
async : false,
data : parameters,
success : function (data) {
response = data;
},
error : function (data) {
response = data;
}
});
return response;
}

// Launch function
console.log(post('files/ajax.php', 'username=jack&password=dummy'));

?>

Thanks, eind resultaat :

<?php // JS

// Function
function post(url, data) {
var response;
$.ajax({
url : url,
type : 'post',
dataType : 'json',
async : false,
data : data,
success : function (data) {
response = data;
},
error : function (data) {
response = data;
}
});
return response;
}

// Build parameters
var data = 'email=' + email + '&password=' + password + '&token=' + token;
// Store function response
var response = post('api/login', data);
// php will return : {"ret":"success","msg":"Successfully logged in."}
// Do stuff
if(response.ret == 'success') {
location.reload();
} else {
alertMsg('#login_alert', 'danger', response.msg);
disableBtn('.submit', false);
}

?>

Het bovenstaande voorbeeld (een loginfunctionaliteit via AJAX) is geschreven voor een specifiek doel en zal ook op een specifieke manier werken, hier maak je niet meerdere "instanties" van.

Verder kun je deze functionaliteit niet echt hergebruiken omdat je (op dit moment) in de globale scope werkt, het minste wat je zult moeten doen is de naam van de callback-functie instelbaar maken (hierbij zou je de naam kunnen prefixen met 'ajaxSuccessCallback' ofzo).

Het beste wat Inter Kode (op dit moment) kan doen is de variabele delen in zijn code identificeren en deze instelbaar maken via parameters van de universele (wrapper) functie.

EDIT: dit zou ik nog altijd verkiezen boven het uitzetten van async.

Ik zou async inderdaad niet uitzetten. De oplossing is gegeven door jQuery zelf doordat `jQuery.ajax()` een jqXHR object retourneerd: http://api.jquery.com/jQuery.ajax/#jqXHR

[code lang=js]
function post(url, parameters) {
return $.ajax({
url : url,
type : 'post',
dataType : 'json',
data : parameters
});
}

var data = { 'var1' : 'val1', 'var2' : 'val2', 'var3' : 'val3' };

post('files/ajax.php', data)
.done(function () {
// ... success!
})
.fail(function () {
// ... error :(
});
[/code]

Overigens zie je dat de functie niet zo heel veel doet (eigenlijk alleen het instellen van JSON en POST). Je kan dit praktisch versimpelen door jQuery.post() te gebruiken:
[code lang=js]
// ...
jQuery.post('files/ajax.php', data, function () {
// ... success!
}, 'json');
[/code]

Na Wouter J reactie ben ik toch jquery post functie gaan gebruiken.
Bedankt voor de support, zie voorbeeld :

<?php // Jquery

var data = 'email=' + email + '&password=' + password + '&token=' + token;
$.post('api/login', data, function (response) {
if(response.ret == 'success') {
location.reload();
} else {
alertMsg('#login_alert', 'danger', response.msg);
disableBtn('.submit', false);
}
}, 'json').fail(function (response) {
alertMsg('#login_alert', 'danger', 'Something went wrong!');
disableBtn('.submit', false);
});

?>

Klein vraagje nog, wat voor advies geven jullie om de parameters door te geven?

var data = { 'var1' : 'val1', 'var2' : 'val2', 'var3' : 'val3' };
var data = 'email=' + email + '&password=' + password + '&token=' + token;

Ik zou de eerste gebruiken als je POST wil gebruiken.
Met de 2e bouw je een query string.
Dat werkt ook, maar dan kan je net zo goed een get versturen.