호기심 많은 개발자 🚀

Ajax , Asynchronous JavaScript ans Xml 본문

WEB

Ajax , Asynchronous JavaScript ans Xml

🤗 현우 🤗 2022. 1. 21. 10:57

비동기 JavaScript 통신 기술

  • 웹 서버와 웹 클라이언트간에 Ajax 기술을 사용해서 데이터를 주고 받는다.
    주고 받는 데이터의 형식이 XML 이다.
    통신은 비동기로 구현된다.

상황A. 여태까지의 수업

  • 브라우저(클라이언트) > 서버로부터 웹페이지(HTML) 의 전체 소스를 제공 받는다. > 해성 > 렌더링
  • 웹서버(서버) > 브라우저가 요청한 웹페이지(HTML) 전체 소스를 생성한다.

상황B Ajax

  • Ajax 객체(클라이언트) > 서버로부터 데이터의 요청 + 제공받는다.
  • 웹서버(서버) > Ajax 객체가 요청한 데이터를 생성한다.

jquery 방식

  //$.ajax() 서버에게 데이터 요청 > 응답 데이터 수신 > 업무 처리
        $('#btn1').click(()=>{
            //DB 데이터를 가져와서 화면에 출력
            $.ajax({
                type:'get',                    //요청 메서드
                url:'/jsp/data/data.txt',        // 요청 대상
                success:function(result){    // 콜백함수 > 응답 이벤트 함수
                    $('#txt1').text(result);
                }
            });    
        });

Ajax는 비동기 통신 기술 이다.
Ajax는 페이지의 데이터를 서버랑 주고 받을때 새로고침이 발생하지 않는다.
Ajax는 전체 페이지를 주고받지 않고 필요한 데이터만 서버와 통신한다.
장점

  1. 자원처리비용 감소
  2. 트래픽 감소
  3. 클라이언트 속도 향상

단점 : 개발자가 힘듬

'WEB' 카테고리의 다른 글

REST  (0) 2022.04.25
게시판 만들기 (2022-01-12) 설계  (0) 2022.01.12
EL , Expression Language  (0) 2022.01.11
Comments