2016년 10월 10일 월요일

Ajax

DevJang 오후 9:00 ajax, kosta, kosta web No comments

AJAX (Asynchronous Javascript And Xml )

자바스크립트와 XML(or JSON)을 이용한 비동기 통신

JavaScript와 XML을 이용하여
Web Client와 Server갂의 비동기적 처리를 지원하는 프로그래밍 기법

Google의 Google Map이 AJAX를 이용하여 구축된 이후 각광

AJAX 를 이용한 통신의 장점

페이지 로딩없이 필요한 데이터만 응답받는다

클라이언트가 어플리케이션을 이용할 때 편의성을 높인다
페이지 로딩이 없다. (새로운 페이지로 응답받는 것이 아닌)
필요한 데이터만 응답받는다 -> 서버의 데이터 전송량 감소

XMLHttpRequest 객체

AJAX 의 비동기적 처리의 핵심 JavaScript 객체
서버와 클라이언트(Web Browser) 사이의 비동기적 데이터 송수싞을 담당하는 객체
모든 Web Browser가 지원하나 사용 방법은 차이가 있다.
ex )

var xhr;

function startRequest() {

    xhr = new XMLHttpRequest();//ajax 통신을 위한 자바스크립트객체

    //alert("ajax "+xhr);

    //콜백함수등록 (콜백함수란 서버에서 응답했을 때 동작하는 함수)

    xhr.onreadystatechange = callback;

    xhr.open("get", "AjaxCountServlet");

    xhr.send(null);//post 방식 데이터 전송시 사용 

}

function callback() {

    if (xhr.readyState == 4) {//응답완료

        if (xhr.status == 200) {//에러없이 정상수행 

        // responseText : 서버에서 응답한 데이터                 

        // alert(xhr.responseText);

        document.getElementById("countView").innerHTML = xhr.responseText;

        }

    }

}

Colored by Color Scripter
cs

서버에 Request 전달

1) XMLHttpRequest 객체의 함수를 이용

– open() : 요청 정보 설정. Http Method, URL

– send() : 요청 전송

– call back 함수 등록 :

서버와의 데이터 송수신 상태에 따른 처리를 담당할 call back 함수 등록

2) open(http method, url, 동기화 방식);

– http method : 전송 방식

– GET, POST

– URL : 요청정보를 전송할 URL

– 동기화 방식 : false

– 비동기적 전송 처리 true

– 동기적 전송 처리 xhr.open(“GET”, “process.jsp”, false)

3) send(전송데이터) – 전송데이터 : 요청 시 서버에 보낼 querystring

• GET 방식의 경우 URL에 붙여 보내므로 null 값으로 처리

• POST 방식은 데이터를 key-value로 저장하여 전달 할 수 있다

GET 방식 데이터 전달

– open() 의 url 뒤에 query string으로 전달

var url = “send_data.jsp?name=홍길동”

xhr.open(“GET”, url, true);

xhr.send(null); 

Colored by Color Scripter
cs

POST 방식 데이터 전달
– 요청 전에 헤더의 Content-Type을 지정해 준다.
– send() 호출 시 argument로 데이터를 전송한다.

var url = “send_data.jsp”

xhr.open(“POST”, url, true);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=euc-kr');

xhr.send(“name=홍길동”);