Ajax og JSONP

Ajax

Et XHR-objekt brukes for å kommunisere med server. Vi har ikke mulighet til å kommunisere på tvers av domener av sikkerhetshensyn.

    function createXhrObject() {
        var msxml_progid = [
            'MSXML2.XMLHTTP.6.0',
            'MSXML3.XMLHTTP',
            'Microsoft.XMLHTTP',
            'MSXML2.XMLHTTP.3.0'
            ],
            req;
            
        try {
            req = new XMLHttpRequest(); /* W3C */
        } catch(e) {
            for (var i = 0, len = msxml_progid.length; i < len;++i) {
                try {
                    req = new ActiveXObject(msxml_progid[i]);
                    break;
                } catch (e2) { }
            }
        }
        finally {
            return req;
        }
    }
    
    function submitGET () {
    	var req = createXhrObject();
		req.onreadystatechange = function () {
			if (req.readyState === 4) {
				console.log(req.responseText);	
			}
		}
		req.open('GET','ajax.php', true);
		req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
		req.send(null);
    }
    
    
    function submitPOST() {
        var req = createXhrObject();
        req.onreadystatechange = function () {
			if (req.readyState === 4) {
				console.log(req.responseXML);	
			}
		} 
        
        req.open('POST','ajax.php', true);
        
        req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        req.send('test=hei'); /* Sender verdien "hei" i post-variabelen "test"
        return false;
    }
    

Hvis vi må gjøre POST-kall, kan vi bruke Ajax. Returformatet bør være JSON av hastighetshensyn.

JSONP

JSONP står for JSON with Padding, og er JSON sendt med som et parameter til en funksjon

For å unngå navnekonflikter skal dette være funksjoner i et namespace. Serveren skal ha dynamiske funksjonsnavn.

JSONP er at vi lager et skriptelement dynamisk som returnerer et funksjonskall med JSON som parameter. Når skriptet lastes kjøres funksjonen.

JSONP er å foretrekke for asynkron kommunikasjon da det allerede er Javascript og ved at det gis til en funksjon trenger vi ikke eval. Formatet har også lite «overhead».

    	function createJSONP(src, callback) {
            var script = document.createElement('script');
            
			src += (src.indexOf('?') === -1) ? '?cb=' : '&cb==';
            script.src = src + callback;
        
            var firstScript = document.getElementsByTagName('script')[0];
            firstScript.parentNode.insertBefore(script, firstScript);
    	}
        /* ... */
        function callback(data) {
        	console.log('callback for script1');
        }
        createJSONP('script1.php', callback);
        
        /* ... */
        function callback(data) {
        	console.log('callback for script2');
        }
        createJSONP('script2.php', callback);		
    

Oppgave 5

Lag en bil og fyll tanken med et JSON-kall.