JSON-P

Client-side HTML

<table>
  <tr>     <th>Name:</th> <td><span id="name"></span></td>     </tr>
  <tr> <th>Nickname:</th> <td><span id="nick"></span></td>     </tr>
  <tr>    <th>Email:</th> <td><span id="mbox"></span></td>     </tr>
  <tr>  <th>Website:</th> <td><span id="homepage"></span></td> </tr>
  <tr> <th>Headshot:</th> <td><img id="depiction"></img></td>  </tr>
</table>

Client-side JavaScript

<script type="text/javascript">
  function callback(x) {
    document.getElementById('name').innerHTML = x.name;
    document.getElementById('nick').innerHTML = x.nick;
    document.getElementById('mbox').innerHTML = x.mbox;
    document.getElementById('homepage').innerHTML = x.homepage;
    document.getElementById('depiction').src = x.depiction;
  }

  var s = document.createElement('script');
  s.src = './jsonp/james.js';
  document.getElementsByTagName('head')[0].appendChild(s);
</script>

JSON-P response

callback({
  "name": "James Earl Douglas",
  "nick": "earldouglas",
  "mbox": "mailto:james@earldouglas.com",
  "homepage": "https://earldouglas.com/",
  "depiction": "https://earldouglas.com/james.jpg"
});

Demo

Name:
Nickname:
Email:
Website:
Headshot: