Ajax

asynchronous JavaScript and XML

Til tross for det opprinnelige navnet brukes det nå stort sett med JSON (JavaScript Object Notation) istedenfor XML.

{
  "name": "Oivind Kolloen",
  "subjects": [
    {
      "code": "IMT2291",
      "name": "WWW-Teknologi"
    }, {
      "code": "IMT1401",
      "name": "Informasjons- og publiseringsteknologi"
    }, {
      "code": "IMT3281",
      "name": "Applikasjonsutvikling"
    }
  ]
}

Returnere json fra PHP

Bruk json_encode

json_data.php

<?php 
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Origin");
header("Content-Type: application/json; charset=utf-8");

$imt2291 = array('code'=> 'IMT2291', 'name'=> 'WWW-Teknologi');
$imt1401 = array('code'=> 'IMT1401', 'name'=> 'Informasjons- og publiseringsteknologi');
$imt3281 = array('code'=> 'IMT3281', 'name'=> 'Applikasjonsutvikling');

$subjects = array($imt2291, $imt1401, $imt3281);
$arr = array ('name'=> 'Oivind Kolloen', 'subjects'=> $subjects);
echo json_encode ($arr);

Ajax via jQuery

JS Bin on jsbin.com

Gjør om dette så output blir : Øivind Kolloen underviser i IMT2291 WWW-Teknologi, IMT1401 Informasjons- og publiseringsteknologi, IMT3281 Applikasjonsutvikling.

$.ajax({
    type: "GET", 
    url: "http://imt2291.hig.no/json_data.php"
}).done(function (data) {
    console.log(data);
    console.log(data.name);
}).error(function(xhr, err) {
  console.log(xhr.status);
  console.log(err);
});

Ajax og XML

proxy.php

<?php
$contentType = 'application/json';
if (isset($_GET['contentType']))
	$contentType = $_GET['contentType'];

$charSet = 'utf-8';
if (isset($_GET['charset']))
	$charset = $_GET['charset'];

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Origin");
header("Content-Type: $contentType; charset=$charset");

readfile($_GET['url']);

Ressurser for XML i JavaScript

XML DOM Tutorial - Navigere i XLM DOM'en
XPath Tutorial - Finne elementer i en XML DOM

Bruk av XML data på klienten

JS Bin on jsbin.com

$.ajax ({
    url: 'http://imt2291.hig.no/proxy.php?url='+encodeURI('http://www.digi.no/rss'+'&contentType='+encodeURI('application/xml')),
  }).done (function (data) {
    var nodes=data.evaluate('//item/title', data, null, XPathResult.ANY_TYPE, null);
    var result=nodes.iterateNext();
    while (result) {
      document.write((result.childNodes[0].nodeValue)+'
');
      result=nodes.iterateNext();
    }
  }).error (function (xhr, msg, err) {
    console.log(xhr);
    console.log(msg);
    console.log(err);
  });

Litt mer komplett eksempel

JS Bin on jsbin.com Kjør eksemplet frittstående i nettleseren

  $.ajax ({
    url: 'http://imt2291.hig.no/proxy.php?url='+encodeURI('http://www.digi.no/rss'+'&contentType='+encodeURI('application/xml')),
  }).done (function (data) {
    var nodes=data.evaluate('//item', data, null, XPathResult.ANY_TYPE, null);
    var result=nodes.iterateNext();
    while (result) {
      showItem (result);
      result=nodes.iterateNext();
    }
  });
  
function showItem(node) {
    var item = {};
    for (var i=0; i<node.childNodes.length; i++) {
      //document.write (node.childNodes[i].nodeName+"<br/>");
      if (node.childNodes[i].nodeName!="#text")
        item[node.childNodes[i].nodeName] = node.childNodes[i].textContent;
    }
    document.write ('<h3>'+item.title+'</h3>');
    document.write ('<p>'+item.description+'</p>');
  }

Bruk av $(el).load

$(el).load (url) laster inn innholdet fra url inn i $(el)
$(el).load (url #id) laster innn deler av innholder fra url inn i $(el)
$(el).load (url, function) laster inn innholdet fra url inn i $(el) og kjører funksjonen function

Eksempel som viser værmeldingen fra pent.no