JSON-P

Client-side HTML

<table>
  <tr>
    <th>Name:</th>
    <td><span id="name"></span></td>
  </tr>
  <tr>
    <th>Handle:</th>
    <td><span id="nick"></span></td>
  </tr>
  <tr>
    <th>Email:</th>
    <td><a id="mbox"></a></td>
  </tr>
  <tr>
    <th>Website:</th>
    <td><a id="homepage"></a></td>
  </tr>
  <tr>
    <th>Depiction:</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 = './json-p/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/favicon.svg"
});

Demo

Name:
Handle:
Email:
Website:
Depiction: