Ajax(Asynchronous JavaScript and XML)

Ajax(Asynchronous JavaScript and XML)

자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식이며  XMLHttpRequest객체를 이용하여  Web에서 화면을 갱신하지 않고 Server로부터 Data를 가져올 수 있다.

※동기와 비동기

   -요청 후 응답을 받고나서 다음 동작이 이루어지면 동기

   -요청 후 응답여부에 상관없이 동작하면 비동기

※XHR

   -XHR(XML Http Request). 즉 HTTP request를 서버에 보낸다는 의미다.

●Ajax

AJAX는 XHR객체를 형성하고 이 객체의 콜백을 만들고, 그리고 html메소드와 url을 결정한 뒤 XHR객체의 메소드로 정보를 보내는 방식이다.

먼저 Ajax 통신의 순서는

1)XHR Object 생성

2)콜백함수 정의

3)Open Request(request method와 url 정의)

4)Send Request

XHR object는 응답 여부를 확인하는 readyState 라는 property를 가지고 있다. 

※readyState  처리상태

0 (uninitialized) // open() 메소드 실행 전

1 (loading)  //open 메소드 호출 후, send 메소드 호출 전

2 (loaded)  //보낸 요청에 대해 응답 헤더가 수신된 후

3 (interactive) //응답의 바디 부분이 수신중일 때

4 (complete) //모든 응답이 수신되었을 때

이외에도 readyState가 변할 때마다 호출되는 콜백 함수인 onreadystatechange, Http response의 응답 헤더에 명시되는 코드인 status 속성 등이 존재한다.(ex: 200, 404, 500 ...)

응답이 문제없이 성공했다면 readyState = 4, status = 200 으로 나타난다.

●Ajax와 jQuery

jQuery이용해서 Ajax를 사용하게 되면 많은 이점이 있는데 대표적으로 크로스브라우징의 문제를 해결할 수 있다는 것이다.

또한 jQuery에서 지원하는 Ajax의 방식은 다양하다. 그 중에서 가장 중요한 API는 $.ajax다.

$.ajax({

url:"~~~",     //요청보낼 URL

async: false,     //동기 및 비동기 방식 지정 여부. 동기방식으로 사용해야 한다면 false(1)

cashe: "false",     //통신 중 cache로 인해 갱신된 데이터를 받아오지 못할 경우 false로 지정

type:"post",     //Request Method

dataType:"json",     //Response를 받을 타입 (ex:text, json, html, ...)

data:{"id": test},     //보통 파라미터는 Object로 보내지만 json요청 시 JSON.stringify를 이용하여 json형태로 전송

contentType: "application/json; charset=utf-8",     //요청 헤더를 json 타입으로 설정

success:function(data){},     //통신 성공 시 실행할 콜백 함수

error:function(data){},     //통신 실패시 실행할 콜백 함수

complete:function(data){},     //통신의 성공 실패 여부에 상관없이 통신 완료시 실행할 콜백 함수

});

이외에도 jQuery는 $.post, $.get, $.getJson 등등 다양한 형태의 ajax API를 제공한다.

(1)

굳이 비동기통신인 Ajax를 동기방식으로 쓸일이 있을까 싶지만 아래와 같은 경우를 보자.

var check;

$.ajax({

url: "url",

type: "post",

success:function(data){

check = data;

}

});

console.log(check);

위와 같은 상황에서 콘솔을 확인해보면 값은 undefined로 출력된다. 

비동기 통신은 요청 후에 응답이 언제 오든 코드가 수행되기 때문이다.

var check; ::>  AJax 요청 ::> (아직 요청에 대한 응답이 오지 않음) console.log(check); ::> (응답이 와서 콜백함수실행) check = data; 

위와 같이 ajax외부의 변수에 값을 할당해야하는 상황이 발생했을 때 아래와 같이 코드를 작성한다면 제대로 값이 할당되는 것을 

확인할 수 있다.

var check;

$.ajax({

url: "url",

async: false,

type: "post",

success:function(data){

check = data;

}

});

console.log(check); 

●Ajax의 옵션들(출처 : http://kdsr2z0.github.io/ajaxasync/)

• url  > 요청 경로

• async > 기본값은 true, 동기 통신을 하고자하면 false를 주면 된다.

• beforeSend > request 전에 호출되는 이벤트, return false를 주게되면 ajax 이벤트가 취소.

• cache > 기본값은 false 통신 결과를 cache하지 않는다.

• complete > success, error 가 발생한 이후 발생되는 Event

• contentType > 서버로 데이터를 보낼 때 사용.

• context > 특정 element를 context로 설정하여, callback 함수의 주체로 만든다.

• crossDomain > 기본값은 false, true 로 설정하면 domain이 달라도 요청이 가능.

• data > key, value pairs를 통해 서버로 parameter를 전달.

• dataFilter > 서버로 부터 전달받은 데이터를 필터링.

• dataType > 서버에서 반환되는 데이터의 형식을 지정한다. xml, html, script, json, jsonp, text.

• error > 통신 중 실패했을 경우 호출되는 Event

• global > global Event를 동작시킬 것인지 설정한다. default 값은 true, 설정시 등록해놓은 Ajax global event가 bind 되어 발생.

• headers > key/value pairs 를 등록하여 헤더에 값을 추가한다.

• ifModified > Last-Modified header의 값을 보고 변경된 경우에만 true를 반환.

• jsonp > callback 함수를 json 형태의 parameter로 전달. crossDomain을 해결하는 방법 중 하나

• method > http 전송 방식을 설정.

• mimeType > mimeType 을 설정.

• password > password 가 필요한 http 통신의 비밀번호를 설정.

• processData > 서버에서 받은 데이터를 자동으로 쿼리 문자열로 변환할지 여부를 설정.

• scriptCharset > 서버와 script의 character set 이 다르다면 설정.

• success > 통신이 성공하면 호출되는 함수를

• statusCode > 특정 state Code 에서 bind 될 event를 설정.

• timeout > 제한시간을 설정.

• type > request method (ex: get, post, ...).

• username > 인증이 필요한 http 통신에서 사용자를 설정.

• xhr > XMLHttpRequest 나 ActiveXObject 가 만들어질 때 실행되는 callback 함수.