Ajax개념 및 기초 사용법

Ajax란 ?

-Asynchronous JavaScript and XML

-JavaScript를 이용하여 비동기식으로 클라이언트와 서버가 데이터(XML)를 주고받는 통신방식

-데이터 형식은 XML 뿐 아니라 Text, HTML, JSON, CSV등 다양하게 가능하다

-브라우저 내장 객체인 XMLHttpRequest를 이용하여 비동기식으로 데이터를 송수신함

 

동기식 vs 비동기식

-동기식 : 클라이언트가 서버로 데이터를 요청하면 응답이 올 떄 까지 다른 작업은 대기

 

 

-비동기식 : 클라이언트가 서버로 데이터 요청 후 응답을 기다리지 않고 다른 작업 수행 가능

                추후 요청에 대한 응답이 오면 응답에 관련된 작업을 진행

==새로고침 없이 서버에 get요청을 할 수 있다

 

Ajax 특징

1. 전체 페이지 갱신 없이 일부분 업데이트 가능

2. 사용자에게 즉각적인 반응과 풍부한 UI경험 제공 가능

3. ActiveX나 JQuery 방식으로 구현 가능 

4. JavaScript 방식, jQuery 방식으로 구현 가능

 

단점

-JS이므로 크로스 브라우저 처리 필요

- 연속적 데이터 요청시 서버 부하로 페이지 느려짐

-페이지 내 복잡도 증가로 에러 발생 시 디버깅이 어려움

 

<사용법>

[JQuery 방식]

-> 구현이 좀더 간단/ 크로스 브라우저 처리를 jQuery가 자동 해결해 줌

 

$.ajax({ //jQuery 방식의 ajax

            url : "idDupCheck" , //dupication : 이중, 중복

            //어떤 Servlet을 요청할 것인가?

            // 요청주소 작성 속성 ( 필수!! )

           

            data : {"inputId" : inputId},

            // 요청 시 전달할 값(파라미터)

            type : "GET" ,

            //데이터 전달 방식(method)

            //미작성 시 기본값 GET

 

            success : function(result){

                //비동기 통신 성공 시 수행할 동작(함수)

                //매개변수 result : 서버로부터 전달 받은 응답 데이터(변수명은 자유임)

 

                if(result == 0){

                    checkid.innerText = "사용 가능한 아이디 입니다.";

                    checkid.style.color = "green";

                    signUpCheckObj.id=true;

                }

                else{

                    checkid.innerText="중복 사용 중인 아이디입니다.";

                    checkid.style.color="red";

                    signUpCheckObj.id=false;

                }

            },

            error :function(request, status , error){

 

                console.log();

                if(request.status == 404){

                    console.log("ajax 요청 주소가 올바르지 않습니다.")

                }

                else if(request.status == 500){

                    console.log("서버내부에러")

                    console.log(request.responseText);

                }

                //비동기 통신중 서버로부터 에러 응답이 돌아왔을 때 수행

            },

            complete : function(){

                //비동기 통신이 성공하든 실패하든 마지막에 수행

                //(finally와 비슷)

                //ajax 요청/응답처리가 완료 되었을 때 수행

            }

            //비동기통신이 성공했을때

        })