70-480 – Użytkowanie danych

70-480

Użytkowanie danych JSON i XML; pobieranie danych przy użyciu usług sieci Web; ładowanie danych lub pobieranie danych z innych źródeł przy użyciu obiektu XMLHTTPRequest.



Jak mówi opis ze strony Microsoft – dzisiaj zajmiemy się konsumpcją danych w formatach JSON oraz XML przy użyciu obiektu XMLHTTPRequest (odpowiednik dla IE5 i IE6, to obiekt ActiveXObject).

JSON | XML

Oba formaty pozwalają na wymianę danych w łatwy sposób. Są one również czytelne dla swoich użytkowników i zapewniają sposób opisu danych. To co jednak odróżnia JSON od XML, to “lekkość”. Ilość przesyłanych danych jest często znacznie mniejsza, a format odpowiada w zasadzie obiektom JavaScript, czy bazom danych typu NoSQL, takim jak na przykład MongoDB.

Przykład notacji JSON:

{
  "glossary":{
    "title":"example glossary",
    "GlossDiv":{
      "title":"S",
      "GlossList":{
        "GlossEntry":{
          "ID":"SGML",
          "SortAs":"SGML",
          "GlossTerm":"Standard Generalized Markup Language",
          "Acronym":"SGML",
          "Abbrev":"ISO 8879:1986",
          "GlossDef":{
            "para":"A meta-markup language, used to create markup languages such as DocBook.",
            "GlossSeeAlso":[
              "GML",
              "XML"
            ]
          },
          "GlossSee":"markup"
        }
      }
    }
  }
}

Przykład opisu tych samych danych, ale notacji XML:

<?xml version="1.0" encoding="UTF-8"?>
<glossary>
  <title>example glossary</title>
  <GlossDiv>
    <title>S</title>
    <GlossList>
      <GlossEntry ID="SGML" SortAs="SGML">
        <GlossTerm>Standard Generalized Markup Language</GlossTerm>
        <Acronym>SGML</Acronym>
        <Abbrev>ISO 8879:1986</Abbrev>
        <GlossDef>
          <para>A meta-markup language, used to create markup
languages such as DocBook.</para>
          <GlossSeeAlso OtherTerm="GML" />
          <GlossSeeAlso OtherTerm="XML" />
        </GlossDef>
        <GlossSee OtherTerm="markup" />
      </GlossEntry>
    </GlossList>
  </GlossDiv>
</glossary>

Warto również nadmienić, że JavaScript posiada natywne wsparcie dla notacji JSON i pozwala transformować obiekt JSON do formatu typu String i w drugą stronę. Służą do tego dwie funkcje:

  • stringify – transformuje obiekt JSON do String
  • parse – parsuje String i stara się z niego zbudować obiekt JSON

, które znajdziemy w obiekcie JSON.

Spójrzmy na przykład:

var json = {
  "glossary":{
    "title":"example glossary",
    "GlossDiv":{
      "title":"S",
      "GlossList":{
        "GlossEntry":{
          "ID":"SGML",
          "SortAs":"SGML",
          "GlossTerm":"Standard Generalized Markup Language",
          "Acronym":"SGML",
          "Abbrev":"ISO 8879:1986",
          "GlossDef":{
            "para":"A meta-markup language, used to create markup languages such as DocBook.",
            "GlossSeeAlso":[
              "GML",
              "XML"
            ]
          },
          "GlossSee":"markup"
        }
      }
    }
  }
};

var jsonAsString = JSON.stringify(json);
console.log(jsonAsString);

var againJson = JSON.parse(jsonAsString);
console.log(againJson);

Wersja online dostępna jest na jsfiddle.net Format JSON jest niezwykle często spotykany w komunikacji z wykorzystaniem serwisów typu REST.

Przykład operacji na notacji XML znajdziecie na stronie w3schools.com. Po raz kolejny odsyłam do dobrego źródła, bo nie chcę się powtarzać.

XMLHTTPRequest

O metodzie $.ajax oraz jej aliasach $.get i $.post pisałem już w poprzednich wpisach. Całość jednak opiera się na natywnym sposobie konsumowania tak zwanych web serwisów, z użyciem obiektu XMLHTTPRequest.

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    console.log(JSON.parse(xmlhttp.responseText));
  }
}
xmlhttp.open('GET', 'http://somefancyapi.com/returnjsonstring.json', true);
xmlhttp.send();

Całość wydaje się bajecznie prosta. Tworzymy obiekt, ustawiamy obsługę callback dla onreadystatechange, a następnie otwieramy połączenie i wysyłamy do serwera. Po odebraniu danych są one parsowane do JSON. Możemy jednak posłużyć się określeniem responseType, a odpowiedź zostanie nam zwrócona (jeśli nie wystąpi błąd) w żądanym formacie. Spójrzmy na kolejny przykład:

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    console.log(xmlhttp.response);
  }
}
xmlhttp.responseType = 'json';
xmlhttp.open('GET', 'http://somefancyapi.com/returnjsonstring.json', true);
xmlhttp.send();

Nie ma konieczności korzystania z funkcji parse obiektu JSON. Całość wydaje się być jeszcze prostsza.

O XMLHTTPRequest pisałem już w poprzednich postach, a będzie o nim także mowa w kolejnych, więc nie ma co przedłużać. Zapraszam do własnych prób i przejrzenia API, które oferuje nam XMLHTTPRequest.