JQuery - [ Ajax 기본 사용]

AJAX  (Asynchronous JavaScript And XML)

- 비동기 방식의 자바스크립트와 XML을 말한다.

   JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다.

- AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성" 이다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다.

AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해준다.

  * 페이지 새로고침 없이 서버에 요청

  * 서버로부터 데이터를 받고 작업을 수행

 

=> 즉 주소이동(화면 이동)없이 한 화면에서 내용이 바뀌는 부분은 ajax로 처리한 것이라 볼 수 있다!

 

- 동기 방식 처리 : 서버 페이지 요청 -> 처리 -> 응답(상태) 페이지 전달(사용가능)
        -> 화면이 깜박거림 (페이지 이동 발생!)
 
- 비동기 방식 처리 : 서버 페이지 요청 -> 처리 -> 응답 페이지 전달 (상태여부와 상관없이 사용가능)
        -> 화면 깜박거림 X (페이지 이동 없음!)

 

* 동기식은 요청 후 응답을 받아야 다음 동작이 이루어지지만 비동기식은 요청을 보낸 후 응답과는 상관없이 동작한다.

 

 

---

Jquery를 사용한 Ajax 처리 방법

$.ajax('파일명');   ->   이렇게 작성하면 화면에 보이는 페이지 이동 없이 해당 파일을 한번 실행함!!

$.ajax(주소,{옵션,옵션, ...});
$.ajax({옵션,....});  // 주소를 { } 안에 넣을수도 있음



 $.ajax({
        url : "이동할 페이지",
        type : "전송방식(get/post)",
        data : "url로 전송할 데이터",
        dataType : "요청한(받는) 데이터 타입(html, xml, json, text...)",
        contentType: "보내는 데이터의 타입",
        success : function(data) {
                // 페이지 이동이 정상적으로 처리된 경우 실행하는 코드
                // data는 요청한 데이터를 의미
        },
        error : function() {
                // 페이지 이동이 비정상적으로 처리된 경우 실행하는 코드
        }                
 });

 

예시 코드)

$.ajax('string1.jsp',{
        success:function(data){
                $('body').append(data);
        }
});


// 혹은 아래처럼 주소를 안에 넣어도 가능
$.ajax({
        url : "string2.jsp",
        data : {
                name : '홍길동',
                age : 20
        },
        dataType: 'json',
        contentType: 'application:json; charset=utf-8',
        success : function(data) {
                $('body').append(data);
        }
});

 

 * JSON형식으로 데이터를 보낼때는 객체 생성 후 data: JSON.stringify(객체명), contentType: 'application:json ; charset=utf-8' 명시 해줘야 함

 

 

 

---

참조

https://sjparkk-dev1og.tistory.com/27

Ajax - 개념 및 사용법 (동기, 비동기)

https://velog.io/@cksdnr066/Ajax-%EC%9A%94%EC%B2%AD%EC%97%90%EC%84%9C-dataType-%EA%B3%BC-contentType%EC%9D%80-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%B8%EA%B1%B8%EA%B9%8C