[jQuery] #11 Ajax 알아보기

1. Ajax(asynchronous Javascript and XML)

Ajax란 Asynchronous Javascript And XML 의 줄임말이다.

자바스크립트를 이용하여 비동기식으로 서버와 통신할 수 있도록 돕는 것이며 비동기통신이기 때문에 서버에 요청이 가더라도 화면의 깜빡 거림이나 화면이 이동 된다는 느낌을 주지 않고 상당히 자연스럽고 빠르게 클라이언트의 화면을 변화 시켜줄 수 있다.

최근에는 XML형식이 아닌 JSON형식을 더 많이 사용하고 있다.

Ajax는 한 페이지를 유지하면서 내용을 실시간으로 바꿔주는 기능을 구현할 수 있다(한개의 페이지에서 요청과 응답이 동시에 이루어짐).

즉, 전체 페이지를 요청하지 않고 내가 원하는 페이지만 요청을 시킨다(댓글 더보기를 눌러도 전체 페이지가 새로고침 되지 않는 것처럼).

2. Ajax 기본문법

참조 : https://www.w3schools.com/js/js_ajax_intro.asp

AJAX Introduction

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

ajax는 서버에 요청하고 응답을 받는 형태의 문법으로 구성이 된다.

이것을 위의 링크처럼 JavaScript로 사용할 수 있지만 문법이 너무나 복잡하게 느껴진다.

그래서 jQuery에서 더 간단하게 ajax 문법을 구현할 수 있도록 해두었다.

아래의 사이트를 참고하자.

jQuery의 ajax 문법 : https://www.w3schools.com/jquery/jquery_ajax_intro.asp

jQuery AJAX Introduction

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

1) JavaScript : XMLHttpRequest 객체 사용
2) jquery : $.ajax() 함수 사용

형식)
$.ajax({요청명령}, callback 함수)
- callback 함수 : 서버로부터 응답을 받을 후 호출되는 함수
- 요청명령 : url, method, dataType, data, success, error 등

요청명령의 세부 사항
1) dataType : text, json, xml등
2) type : GET, POST, PUT, DELETE
3) data : 서버에 요청할 데이터
4) error : 에러시 호출되는 함수
5) success : 성공시 호출되는 함수 (callback함수)

3. Ajax 실습해보기

1) html문서 만들고 라이브 서버로 열기

Ajax를 실습해보기 위해 임의로 정한 배우의 목록을 보여주는 html 문서를 작업해보려 한다.

우선 json 파일을 만들어주었다.

[
   {"name":"송강호", "height":180, "weight":70}
  ,{"name":"정우성", "height":185, "weight":75}
  ,{"name":"이정재", "height":177, "weight":85}
]

이 정보를 서버를 통해 받아오기 위해 우선 아래와 같은 모습의 html 문서를 VS Code 프로그램의 Live Server 확장팩을 이용해 구현하였다.

여기서 서버에게 요청!! 이라는 버튼을 누르면 없습니다, 라는 글자가 지워지고 서버에서 정보를 받아오게 하려 한다.

이 때 서버에 정보를 요청할 때 사용하는 명령어가 ajax() 이다.

서버를 사용하려면 VS Code의 Live Server가 필요하다.

● Live Server 설치
Visual Studio Code 확장팩
live server 검색후 설치
File -> Open Folder -> jQuery 폴더 선택
해당 파일 우클릭 -> Open with Live Server...

만약에 라이브 서버에서 제대로 페이지가 작동이 안되면 아래와 같은 작업을 하면 된다.

● 에러 : 지금 이 페이지가 작동하지 않습니다.
File -> Preferences -> Settings
-> live server 검색
-> Live Server > Settings: Use Local Ip
       Use Local IP as host 체크표시

2) json파일에서 데이터 가져오기

<script>
    $("button").click(function(){
        // 2) loader 이미지 보여주기
        $("#loader").show();

        // 3) 서버에 요청해서 응답 메세지 받아오기(댓글 더보기)
        $.ajax("actors.json",{
                                 dataType:"json"
                                ,error:function(error){
                                    alert(error);
                                } 
                                ,success:function(result){  
                                    // alert(result);

                                    // 4) 기존의 <tbody> 값을 전부 지우기
                                    $("tbody").empty();

                                    // 5) table의 tbody값 수정
                                    $(result).each(function(){
                                        // alert(this.name);
                                        // alert(this.height);
                                        // alert(this.weight);

                                        // $("<tr>"): 본문에 <tr> 요소 생성
                                        // $("tr")  : 본문의 <tr> 요소 선택
                                        let $tr = $("<tr>");
                                        let $td1 = $("<td>").text(this.name);                                                    
                                        let $td2 = $("<td>").text(this.height);                                            
                                        let $td3 = $("<td>").text(this.weight);

                                        $tr.append($td1, $td2, $td3).appendTo("tbody")
                                    }); // each end

                                    // 6) 로딩되고 있는 이미지를 서서히 숨기기
                                    $("#loader").fadeOut(3000);
                                }
        }); // ajax() end

    }); // click() end

</script>

- 완성된 모습

<전체 코드>

<!DOCTYPE html>  
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>16_ajax.html</title>
        <!-- jQuery import -->
        <script src="jquery-3.6.1.min.js"></script>
        <style>
            #loader {
                width: 100%;
                height: 100%;
                background-color: #EDE9DF;
                position: fixed;
                left: 0;
                top: 0;
                background-image: url(loader.gif);
                background-repeat: no-repeat;
                background-position: center;

                /* 1) css추가 : 처음에 숨기기 */
                display: none;
            }
        </style>
    </head>
    <body>        

        <h3>배우 목록 보여주기</h3>

        <div id="loader"></div>
        <button>서버에게 요청!!</button>
        <hr>
        <table border="1">
        <thead>
            <tr>
                <th>이름</th>
                <th>키</th>
                <th>몸무게</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3">없습니다!</td>
            </tr>
        </tbody>
        </table>

        <script>
            $("button").click(function(){
                // 2) loader 이미지 보여주기
                $("#loader").show();

                // 3) 서버에 요청해서 응답 메세지 받아오기(댓글 더보기)
                $.ajax("actors.json",{
                                         dataType:"json"
                                        ,error:function(error){
                                            alert(error);
                                        } 
                                        ,success:function(result){  
                                            // alert(result);
                                            
                                            // 4) 기존의 <tbody> 값을 전부 지우기
                                            $("tbody").empty();

                                            // 5) table의 tbody값 수정
                                            $(result).each(function(){
                                                // alert(this.name);
                                                // alert(this.height);
                                                // alert(this.weight);

                                                // $("<tr>"): 본문에 <tr> 요소 생성
                                                // $("tr")  : 본문의 <tr> 요소 선택
                                                let $tr = $("<tr>");
                                                let $td1 = $("<td>").text(this.name);                                                    
                                                let $td2 = $("<td>").text(this.height);                                            
                                                let $td3 = $("<td>").text(this.weight);
                                                
                                                $tr.append($td1, $td2, $td3).appendTo("tbody")
                                            }); // each end

                                            // 6) 로딩되고 있는 이미지를 서서히 숨기기
                                            $("#loader").fadeOut(2000);
                                        }
                }); // ajax() end

            }); // click() end
            
        </script>

    </body>
</html>

저작자표시 비영리 동일조건

'⁂ jQuery > : 기본 익히기' 카테고리의 다른 글

[jQuery] #10 offset()과 position() (0)	2022.09.28
[jQuery] #9 Add 클래스 : 클래스 추가하기 (0)	2022.09.27
[jQuery] #8 요소 탐색 (0)	2022.09.27
[jQuery] #7 요소 생성(append, prepend) (0)	2022.09.26
[jQuery] #6 This로 index 확인하기 (0)	2022.09.26

'⁂ jQuery > : 기본 익히기' 카테고리의 다른 글

티스토리툴바