AJAX And JSON

Created by Dennis Selkirk

JSON - JavaScript Object Notation

• JavaScript-объекты
• Массивы
• строки в двойных кавычках,
• число,
• логическое значение true/false,
• null.

• JSON.parse

  
  var numbers = "[0, 1, 2, 3]";
  
  numbers = JSON.parse(numbers);
  
  console.log( numbers[1] ); // 1
  
              

• JSON.stringify

  
  var user = '{ "name": "Вася", "age": 35, "isAdmin": false, "friends": [0,1,2,3] }';
  
  user = JSON.parse(user);
  
  console.log( user.friends[1] ); // 1
  
              

JSON-объекты ≠ JavaScript-объекты

JSON.stringify({name: 'test'}) // "{"name":"test"}"
            

Магия JSON.parse

var str = '{"title":"EPAM","date":"2016-08-02T12:00:00.000Z"}';

var event = JSON.parse(str, function(key, value) {
  if (key == 'date') return new Date(value);
  return value;
});

console.log( event.date.getDate() );
            

toJSON()

var room = {
  number: 23,
  occupy: function() {
    alert( this.number );
  }
};

event = {
  title: "Конференция",
  date: new Date(Date.UTC(2014, 0, 1)),
  room: room
};

console.log( JSON.stringify(event) );
/*
  {
    "title":"Конференция",
    "date":"2014-01-01T00:00:00.000Z",  // дата превратилась в строку
    "room": {"number":23}               // функция исчезла
  }
*/
            

Исключение свойств

var user = {
  name: "Вася",
  age: 25,
  window: window
};

console.log( JSON.stringify(user) ); // ошибка
            

var user = {
  name: "Вася",
  age: 25,
  window: window
};

console.log( JSON.stringify(user, ["name", "age"]) );
// {"name":"Вася","age":25}
            

var user = {
  name: "Вася",
  age: 25,
  window: window
};

var str = JSON.stringify(user, function(key, value) {
  if (key == 'window') return undefined;
  return value;
});

console.log( str ); // {"name":"Вася","age":25}
            

Красивое форматирование

var user = {
  name: "Вася",
  age: 25,
  roles: {
    isAdmin: false,
    isEditor: true
  }
};

var str = JSON.stringify(user, "", 4);

console.log( str );
/* Результат -- красиво сериализованный объект:
{
    "name": "Вася",
    "age": 25,
    "roles": {
        "isAdmin": false,
        "isEditor": true
    }
}
*/
            

AJAX

AJAX - Asynchronous Javascript And Xml

XMLHttpRequest

var xhr = new XMLHttpRequest();

xhr.open('GET', 'google.com', false);

xhr.send();

xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {

        if (xhr.status != 200) {
          // обработать ошибку
          alert( xhr.status + ': ' + xhr.statusText ); // пример вывода: 404: Not Found
        } else {
          // вывести результат
          alert( xhr.responseText ); // responseText -- текст ответа.
        }
    }
}
            

AJAX - Asynchronous Javascript And Xml

xhr.setRequestHeader('X-Auth', '123');
xhr.setRequestHeader('X-Auth', '456');

// в результате будет заголовок:
// X-Auth: 123, 456
            

AJAX jQuery

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });
            

$.get( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
  alert( "Load was performed." );
});
            

Fetch

Fetch

function reqListener() {
  var data = JSON.parse(this.responseText);
  console.log(data);
}

function reqError(err) {
  console.log('Fetch Error :-S', err);
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();
            

fetch('./api/some.json')
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }

      // Examine the text in the response
      response.json().then(function(data) {
        console.log(data);
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });
            

JSONP

JSONP - JSON with padding

function w3r_callback(data){
console.log(data);
}
            

< script src="http://www.example.com?q=w3r_callback" />
            

w3r_callback({
"FirstName" : "xyz",
"LastName" : "abc",
"Grade" : "A"
}
);            

КОНЕЦ

- Source