jonataa/xhr-google-shortener.html

## xhr-google-shortener.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-longurl">
    <button onclick="encurtarUrl('#input-longurl')">Encurtar URL</button>

    <h2>Sua URL curta é: <a id="url-curta"></a></h2>

    <script>
        function encurtarUrl(inputId) {
            var input  = document.querySelector(inputId);
            var params = { longUrl: input.value };

            function responseSuccess () {
                var urlCurta = this.response.id;
                var link = document.querySelector('#url-curta');

                link.href = urlCurta;
                link.textContent = urlCurta;
            }

            var xhr = new XMLHttpRequest();
            xhr.onload = responseSuccess;
            xhr.onabort = function() {
                console.log('ERRORR');
            };
            xhr.open('post', 'https://www.googleapis.com/urlshortener/v1/url?key=AIzaSyDZP-G0GoP3RpJTLc-IKrdZNQEIalduAkY', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.responseType = 'json';
            xhr.send(JSON.stringify(params));
        }

    </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-longurl">
	<button onclick="encurtarUrl('#input-longurl')">Encurtar URL</button>

	<h2>Sua URL curta é: <a id="url-curta"></a></h2>

	<script>
	function encurtarUrl(inputId) {
	var input = document.querySelector(inputId);
	var params = { longUrl: input.value };

	function responseSuccess () {
	var urlCurta = this.response.id;
	var link = document.querySelector('#url-curta');

	link.href = urlCurta;
	link.textContent = urlCurta;
	}

	var xhr = new XMLHttpRequest();
	xhr.onload = responseSuccess;
	xhr.onabort = function() {
	console.log('ERRORR');
	};
	xhr.open('post', 'https://www.googleapis.com/urlshortener/v1/url?key=AIzaSyDZP-G0GoP3RpJTLc-IKrdZNQEIalduAkY', true);
	xhr.setRequestHeader('Content-Type', 'application/json');
	xhr.responseType = 'json';
	xhr.send(JSON.stringify(params));
	}

	</script>

	</body>
	</html>