Ajax

A> Ajax 란

Asynchronous Javascript And XML

xml을 이용하여 비동기로 통신을 처리하기 위한 기술이다.

XMLHttpRequest(줄여서 XHR) 객체로 구현한다.

자바스크립트를 이용한 비동기 통신을 위한 기술이라 생각하자

 

A-A>사용하는 이유?

웹페이지의 속도가 빨라진다.

서버에서 완료가 다 되지 않아도 처리가 가능하다.

데이터만 가지고 오면 되므로 코드의 양도 줄어든다.

비동기 통신으로 UI를 좋게 할 수 있다.

 

A-B> 단점

히스토리 관리가 안된다.

연속적인 데이터 통신은 서버에 부담을 준다.

디버깅이 잘 안된다.

CORS 문제도 있다.

 

B>동기, 비동기 방식 통신

 

동기

동기 통신 환경에서는 송 수신측은 데이터를 전달받을 때 ,

데이터를 전달받을 준비를 상시 하고 있어야한다.

서버에서 응답을 해주기 전까지는 계속 준비를 하고 있어야 한다.

 

비동기

버퍼에 모아두다 수신측은 버퍼가 찼을때 데이터를 받는다.

서버에서 응답을 받지 않아도 계속해서 작업을 수행할 수 있다.

일부의 정보를 요청하기 때문에 코드의 양과 트래팩이 적다.

 

 

B> XMLHttpRequest 

속성

readyState - ajax 상태 정보 : -- 처음 생성 0

                                      -- get() 요청 1

                                      --send() 요청 2 

                                      --서버에서 응답 오기 시작 3

                                      -- 서버 응답 완료 4 

 

status --응답코드 : --성공시 200

 

statusText -- 서버 응답상태 문자열 -- 정상 응답시 'OK'

                                              --파일 못 찾으면 'NOT Found'

 

responseText : 서버 응답 내용을 나타내는 문자열

 

responseXML : 서버 응답 내용 나타내는 xml

 

onreadystatechange :readyState 가 바뀔때의 이벤트 핸들러

 

open(method, url[,async]) --method 는 get() 과 같은 전송 방식 

                                  --[,async]는 동기화 여부 비동기 통신일때 true

 

send(body) : ajax 요청을 보낸다. 인자에 요청과 함께 보낼 내용을 지정

 

abort(): send() 요청 취소

 

getAllResposeHeaders() 응답을 받은 경우 응답의 모든 헤더 정보 문자열 리턴

getResponseHeader(header) 응답을 받은 경우 header 인자의 헤더 정보 문자열 리턴  

setRequestHeader(header , value)  : 헤더 값 설정

 

 

C>Ajax 에서 response 

XHR 은 XML 파서를 내장하고 있다. 

XHR은 서버의 응답으로 온 xml 을 파싱해서

DOM 객체를 만든다.

 

 

D> 사용법

 

1.기본 사용법

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
  txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();

 

브라우저 마다 다르다. w3school을 참조하자

www.w3schools.com/js/js_ajax_http.asp

AJAX The XMLHttpRequest Object

 

E> jquery 에서 쓸 때

1. jquery에서 사용하는 메소드

    $.ajax( { json } ) : ajax로 보낼 데이터

    $.get()  :get방식 요청 보내기

    $.post()  :post 요청 보내기

    $.getJSON() : get() 방식으로 요청하고 응답으로 받은 json 내용 

    .load() :서버에서 데이터를 읽고 html요소로 추가

    .serialize() : form 대상으로 사용하며, form 의 객체들을 한번에 다 받을 수 있다. 

                   --queryString 처럼 받아진다.

    .serializeArray() : form의 요소들의 모든 값을 배열로 받는다.

 

2.post 방식으로 보낼때

$.post(

    url, 

    보낼 데이터,

    function(msg){   msg  }      --msg는 서버에서 온 응답정보 

)

 

3.ajaxSetup

ajax 설정

$.ajaxSetup({

    type:"POST",

    url:"logincheck.jsp",

    dataType : "text",

    success: function (msg) {

        $('#message').html(msg);

    }

});

 

F> jsp 에서 사용하기

ajax로 요청할 때 보낸 데이터의 이름은 Param 으로 전달이 된다.