[JQuery] ajax 사용하기

데이터를 서버에서 받아올때 html 전체를 갱신하지 않고 Ajax (Asynchronous Javascript And Xml; 비동기식 자바스크립트와 xml)를 이용하여 웹페이지의 일부분만 새롭게 갱신이 가능하다.

 

Ajax를 이용하여 Get, Post method를 통해 서버와 통신이 가능하다.

 

문제는 CORS라는 정책 때문에 클라이언트측의 Ajax에서 소통이 가능한 서버는 html을 만들어준 서버와 동일 서버이어야 한다.

(즉, 이걸로 다른 웹사이트를 크롤링하는 것은 불가능..)

 

소스코드 

        /* post로 서버에 메세지 보내고 받기 */
        function post_server(url, j_data, callback) {
            var g_result;
            $.ajax({
                type: 'POST',
                url: 'https://www.naver.com/' + url,
                data: j_data,
                dataType: 'JSON',
                success: function(result) {
                    callback(result);
                },
                error: function(xtr, status, error) {
                    alert(xtr + ":" + status + ":" + error);
                }
            });
        }
 
        /* get로 서버에 메세지 보내고 받기 */
        function get_server(url, callback) {
            var g_result;
            $.ajax({
                type: 'GET',
                url: 'https://www.naver.com/' + url,
                dataType: 'JSON',
                success: function(result) {
                    callback(result);
                },
                error: function(xtr, status, error) {
                    alert(xtr + ":" + status + ":" + error);
                }
            });
        }

 

함수 안의 url은 자신의 서버로 수정하면 되고 파라미터의 url은 추가페이지, j_data는 보내고 싶은 데이터(json형식), callback은 서버에서 준 데이터를 받아줄 콜백함수를 마련하면 된다.