웹개발 교육/jQuery

[44일] jQuery (16) - Ajax

ewok 2022. 9. 28. 17:58

Ajax는 Asynchronous JavaScript and XML의 약자로 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이다.

 

Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.

즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.

 

서버와는 다음과 같은 다양한 형태의 데이터를 주고받을 수 있다.

  • JSON
  • XML
  • HTML
  • 텍스트 파일 등

 

http://www.tcpschool.com/ajax/ajax_intro_basic

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>17_ajax.html</title>
        <script src="jquery-3.6.1.min.js"></script>
    </head>  
    <body>

        <button>* JSON 데이터 받아오기 *</button>

        <script>
            $("button").click(function(){
                $.ajax("actors.json", {
                    dataType:"json"
                    ,error:function(xhr, status, error){
                        alert("ERROR!!");
                        alert(xhr);     //XMLHttpRequest 객체
                        alert(status);  //응답 상황
                        alert(error);   //Not Found
                    }
                    ,success:function(result, status, xhr){
                        alert("SUCCESS!!");
                        alert(result); //서버가 응답해준 객체 형태의 메시지
                        alert(status); //응답 상황
                        alert(xhr);    //XMLHttpRequest 객체
                    }
                });//ajax() end
            });//click end
        </script>
        
    </body>
</html>

에러 발생 시

 

성공 시

 

 

 

https://www.w3schools.com/jquery/ajax_ajax.asp

 

jQuery ajax() Method

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

https://www.w3schools.com/js/js_ajax_http.asp

 

AJAX The XMLHttpRequest Object

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