<input id="postcode" placeholder="郵便番号" />
<button onclick="getAddress()">住所を検索(標準)</button>
<button onclick="getAddressJQuery()">住所を検索(jQuery)</button>
<button onclick="getAddressWijmo()">住所を検索(Wijmo)</button>
<br>
<input id="address" placeholder="住所" size="50" />
// JavaScriptの標準APIでHTTP通信を行う
function getAddress() {
  document.getElementById('address').value = '';

  // リクエストを初期化
  var xhr = new XMLHttpRequest();
  xhr.open('GET','https://postcode-jp.appspot.com/api/postcode' + '?postcode=' + document.getElementById('postcode').value);
  // 状態が変更されたときの処理
  xhr.onreadystatechange = function() {
    // 処理が完了した場合
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        // 受信成功した場合
        var response = JSON.parse(xhr.responseText);
        document.getElementById('address').value = response.data[0].allAddress;
      } else {
        // 受信失敗した場合
        alert('正しい郵便番号を入力してください。');
      }
    }
  };
  // リクエストを送信
  xhr.send();
}

// jQueryのajaxメソッドでHTTP通信を行う
function getAddressJQuery() {
  document.getElementById('address').value = '';

  // リクエストを送信
  $.ajax('https://postcode-jp.appspot.com/api/postcode', {
    // クエリデータ
    data: {
      postcode: document.getElementById('postcode').value
    },
  })
  .done(function(data) {
    // 受信成功した場合
    document.getElementById('address').value = data.data[0].allAddress;
  })
  .fail(function() {
    // 受信失敗した場合
    alert('正しい郵便番号を入力してください。');
  });
}

// WijmoのhttpRequestメソッドでHTTP通信を行う
function getAddressWijmo() {
  document.getElementById('address').value = '';

  // リクエストを送信
  wijmo.httpRequest('https://postcode-jp.appspot.com/api/postcode', {
    // クエリデータ
    data: {
      postcode: document.getElementById('postcode').value
    },
    success: function(xhr) {
      // 受信成功した場合
      document.getElementById('address').value = JSON.parse(xhr.responseText).data[0].allAddress;
    },
    error: function() {
      // 受信失敗した場合
      alert('正しい郵便番号を入力してください。');
    }
  });
}
Rerun