add bookmark to favoritesBookmark and Share Share website test on Facebook

Cross domain AJAX

Het HTML element SCRIPT kan run-time JavaScript laden én uitvoeren, vanaf elke plek op het internet. Dit opent mogelijkheden voor het script om gegevens uit te wisselen met elk domein, iets wat met standaard JavaScript uit veiligheidsoverwegingen is begrensd.

Normaal gesproken geef je aan een SCRIPT element een src attribuut mee dat verwijst naar een kant en klaar JavaScript document. Het script wordt geladen én uitgevoerd.
Het src attribuut mag verwijzen naar locaties buiten het eigen domein en het hoeft niet te verwijzen naar een kant en klaar .js document! Het moet een geldige url zijn, meer niet.

Niks weerhoudt je ervan om via de url een server-side script aan te roepen, of argumenten mee te leveren.
Als het resultaat maar executable JavaScript is, zal het worden uitgevoerd. Het is dus mogelijk om aan een server-side script argumenten mee te geven voor een query, of voor een berekening en het resultaat om te zetten in een rechtstreekse JavaScript variabele of array declaratie. De variabele zal meteen deel uitmaken van de global scope van de pagina en de gegevens zijn direct beschikbaar. Dirty maar do-able.

Iets schoner is de methode die de goeroe's op Internet aanbevelen: verpak data in een JSON string en laat de verwerking over aan een callback functie. Het patroon voor een aanroep verloopt dan ongeveer zo:

  • Zorg dat je een callback functie hebt gedefinieerd

  • Creëer een script element en laadt dit script op basis van een url die verwijst naar een server-side script met optionele argumenten (Een optioneel argument kan zijn: de naam van de callback functie. Deze kun je natuurlijk ook hard inbakken in het server-side script, afhankelijk van de situatie. Ik zou altijd gaan voor de eerste optie.)

  • Het server-side script ontvangt de argumenten en doet daarme zijn ding (query, eventueel bewerkingen). De output van het script is van het type text/application
  • Voeg het script element toe aan de pagina. Op dit moment zal de gedefineerde callback functie worden aangeroepen, met argumenten zoals geleverd door het server side script

    Met de oplossing hieronder ga ik een beetje in het midden zitten. Afhandeling van de response door een callback functie is een goed idee, maar het format waarin eventuele gegevens staan, aantal en type van de argumenten van de call-back functie zou ik per geval willen kunnen aanpassen.
    Maar de SCRIPT


    function xjs(url,query,callBack){
    // voeg een script element toe aan de huidige pagina
    var script = document.createElement('script');
    script.type = 'text/javascript';
    // IE heeft geen onload op het script tag, daarom:
    if(script.readyState){
    script.onreadystatechange = function(){
    if(script.readyState=='loaded' || script.readyState=='complete'){
    script.onreadystatechange = null;
    callBack;
    }
    }
    }else
    script.onload = function(){
    callBack;
    }

    if (query!='')
    url+='?'+encodeURI(query)+'&callback='+callBack;

    // laadt het (remote) script
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
    }


    Belangrijk: alleen gebruiken voor domeinen, servers en scripts die volledig in eigen beheer zijn, anders loop je met deze methode inderdaad risico's!


  • previous article
    Previous item: Het CAPTCHA patroon







    playlist online playlist online online muziek