https://www.mamp.info/en/downloads/

- Double click on it to unzip MAMP installer
- Double click to launch the MAMP installler
- click through the first 2 steps
- Continue (licence)
- install this for all users
- Browse Application folder to find MAMP folder and launch MAMP.
- click on preferences - ports - change the port on Apache from 8888 to 80.
- click start server.
- enter password

<script>
    var xhr = new XMLHttpRequest();
    // onreadystatechange is an event
    // and function after the event is a callback function.
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        document.getElementById('ajax').innerHTML = xhr.responseText;
      }
    };
    xhr.open('GET', 'sidebar.html');
    function sendAJAX() {
      xhr.send();
      document.getElementById("load").style.display = "none";
    }
</script>

Ajax is limited by the same origin policy, which controls how javascript control and access content from the webserver.

the ways around the same origin policy are

1. create Web Proxy - web services are not limited to the same origin policy. Servers can request data from servers from other domains.

2. JSON P Jason with Padding

it relies on the ability to link the Javascript file across domains.

Jquery is a javascript library

3. CORS - Another method to make ajax request across domains is CORS or Cross Origin Resource Sharing. It is W3 recommendation.

4. It has to be viewed through web servers.

Array example

['string',3,true,false,[1,2,3]]


Object
{
  "name": "Jim",
  "phone": "123-432-543"
}

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4){
    console.log(typeof xhr.responseText);
  }
};

xhr.open('GET', 'data/employees.json');
xhr.send();

=> XHR finished loading: GET "http://localhost/Ajax/data/employees.json".
String

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4){}
    console.log(xhr.responseText);
};

xhr.open('GET', 'data/employees.json');
xhr.send();

XHR finished loading: GET "http://localhost/Ajax/data/employees.json".(anonymous function) @ widget.js:19
widget.js:15 [
  {
   "name": "Aimee",
   "inoffice": false
  },
  {
   "name": "Amit",
   "inoffice": false
  },
  {
   "name": "Andrew",
   "inoffice": true
  },
  {
   "name": "Ben",
   "inoffice": true
  },
  {
   "name": "Elizabeth",
   "inoffice": true
  },
  {
   "name": "Guil",
   "inoffice": false
  },
  {
   "name": "Hampton",
   "inoffice": true
  },
  {
   "name": "Jason",
   "inoffice": true
  },
  {
   "name": "Lainie",
   "inoffice": true
  },
  {
   "name": "Kenneth",
   "inoffice": false
  },
  {
   "name": "Pasan",
   "inoffice": true
  },
  {
   "name": "Shawna",
   "inoffice": true
  },
  {
   "name": "Zac",
   "inoffice": false
  }
]

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4){
    //converting string to javascript object.
    var employees = JSON.parse(xhr.responseText);
    console.log(employees);
  }
};
xhr.open('GET', 'data/employees.json');
xhr.send();

XHR finished loading: GET "http://localhost/Ajax/data/employees.json".(anonymous function) @ widget.js:21

widget.js:16 [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4) {
    var employees = JSON.parse(xhr.responseText);
    var statusHTML = '<ul class="bulleted">'; // open ul tag
    for (var i=0; i<employees.length; i+=1){
      if(employees[i].inoffice === true){
        statusHTML += '<li class="in">';
      } else {
        statusHTML += '<li class="out">';
      }
      statusHTML += employees[i].name;
      statusHTML += '</li>';
    }
    statusHTML += '</ul>';
    document.getElementById('employeeList').innerHTML = statusHTML;
  }
};
xhr.open('GET', 'data/employees.json');
xhr.send();