jonataa/xhr.html

## xhr.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>XHR</title>
</head>
<body>

    <input type="text" id="input-cep">
    <button onclick="buscarCep('#input-cep')">Buscar CEP</button>

    <p>Isso esta vazio!</p>

    <script>
        function buscarCep(inputId) {
            var input = document.querySelector(inputId);

            var cep = input.value;

            function responseSuccess () {
                var resultado = document.querySelector('p');
                resultado.innerHTML = this.response.cidade;
            }

            if (cep !== '') {
                var oReq = new XMLHttpRequest();
                oReq.onload = responseSuccess;
                oReq.open("get", "http://api.postmon.com.br/v1/cep/" + cep, true);
                oReq.responseType = "json";
                oReq.send();
            }
        }

    </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>XHR</title>
	</head>
	<body>

	<input type="text" id="input-cep">
	<button onclick="buscarCep('#input-cep')">Buscar CEP</button>

	<p>Isso esta vazio!</p>

	<script>
	function buscarCep(inputId) {
	var input = document.querySelector(inputId);

	var cep = input.value;

	function responseSuccess () {
	var resultado = document.querySelector('p');
	resultado.innerHTML = this.response.cidade;
	}

	if (cep !== '') {
	var oReq = new XMLHttpRequest();
	oReq.onload = responseSuccess;
	oReq.open("get", "http://api.postmon.com.br/v1/cep/" + cep, true);
	oReq.responseType = "json";
	oReq.send();
	}
	}

	</script>

	</body>
	</html>