Javascript - JQuery없이 POST 전송하기(Google URL Shortener)

안녕하세요 박스여우입니다.

오늘은 바로 어제 해커톤에서 처음 시도해 보았던 javascript에서 AJAX나 form 태그 없이 POST를 전송하여 Google URL Shortener API를 사용하는 방법에 대해 다뤄보고자 합니다.

■ With JQuery

WebView를 이용해 사이트 내에 있는 data-src 정보를 받아오는데 url의 길이가 너무 길어 코드로 넘어올때 자동으로 중간이 ...으로 요약되서 넘어와 문제가 발생했습니다. 그래서 javascript에서 url정보를 넘겨받을때 url을 단축시켜 받고자 Google URL Shortener를 사용하였습니다.

Google URL Shortener API를 사용하는 방법은 그냥 POST 방식으로 request를 보내면 되서 간단하게 사용할 수 있습니다.

var urls = 'http://boxfoxs.tistory.com/';
 
$.ajax({
    url: 'https://www.googleapis.com/urlshortener/v1/url?shortUrl=http://goo.gl/fbsS&key=AIzaSyA5xZ3voM6Qg3Fk-c3nD2xYtgIB9DQksas',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: '{ longUrl: "' + urls + '"}',
    dataType: 'json',
    success: function(response) {
        var result = JSON.parse(JSON.stringify(response));
        alert(result.id);
    }
});

하지만, 여기서 또 문제가 있었습니다. WebView에 javascript를 삽입하는 것은 가능하지만, javascript 라이브러리인 jquery, ajax를 사용할 수 없었습니다.

■ Without JQuery

따라서 ajax를 사용하지 않고 google api에 request를 보내는 코드를 처음으로 작성해 보았습니다.

var urls = 'http://boxfoxs.tistory.com/';
    var opts = {
        method: 'POST',
        body: '{longUrl:"' + urls + '"}',
        headers: {
            "Content-Type": "application/json"
        }
    };
    fetch('https://www.googleapis.com/urlshortener/v1/url?shortUrl=http://goo.gl/fbsS&key=AIzaSyA5xZ3voM6Qg3Fk-c3nD2xYtgIB9DQksas', opts).then(function(response) {
        return response.json();
    }).then(function(body) {
        window.Unity.call(JSON.parse(JSON.stringify(body)).id);
    });

항상 Jquery 라이브러리에만 의존하여 코딩하다보니 이런 경우가 생길때는 막히거나 불편함이 생기게 되네요.. 라이브러리에 의존하지 않는 코딩도 많이 공부해 두어야 할것 같습니다.