본문 바로가기
☭DEVELOPER/#2 웹개발(자바기반 풀스택)

[JAVASCRIPT] AJAX _2

by 조반짝 2023. 8. 3.
728x90
반응형

ajax 통신활용

 

1. HTML 데이터

data.html 파일 새로만들기

id result 안에 html 형식이 들어온다.

프론트 웹에서는 .txt 파일은 문자열을 로우데이터로 불러오고 , 이번에는 html 형식을읽어오는 것이다.

검사창에서 HTML데이터 클릭하면 KBS URL 이 없다가 나타난다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

    <!-- ajax통신 활용 data.txt 파일 문자열 인식 소스 코딩 -->
    <script>
        function getText(){
            //jQuery ajax()함수를 활용하여
            $.ajax({
                //url 위치는 같은 위치에 있는 data.txt 파일을 처리합니다.
                url:"data.txt",
                // 처리할 데이터 type은 post 형식으로 처리하며,
                type:"post",
                //서버로부터 응답 받는 dataType은 text 형식으로 합니다.
                dataType: "text",
                //성공적으로(success) ajax 비동기 통신 데이터 처리가 이루어진다면
                //함수를 실행하는데, 이때, 매개변수 rec_data에 "처리된 데이터"를
                //대입해줍니다.
                success: function(rec_data){
                    // id가 result인 영역의 text 노드에
                    // 앞서, rec_data 변수에 대입된 "인식된 데이터(문자열입니다)"를 추가해 줍니다.
                    $("#result").text(rec_data);
                }
            })
        }

        //ajax 통신 활용 data2.html 파일 문자열 인식 소스 코딩
        function getHtml(){
            $.ajax({
                url: "data2.html",
                type: "post",
                //서버로부터 응답받는 dataType은 html로 합니다.
                dataType: "html",
                success: function(rec_data){
                    $("#result").html(rec_data);
                }
            })
        }

    </script>




</head>
<body>
    
    <!-- 문자열 데이터 버튼을 클릭하면(onclick), getText() 함수를 호출합니다 -->
    <button onclick="getText()">문자열 데이터</button>
    <button onclick="getHtml()">HTML 데이터</button>

    <div id="result"></div>
</body>
</html>

data2.html

<a href="https://www.kbs.co.kr/" target="_black">KBS 한국방송공사</a>

2. XML 데이터

 

xml은 대소문자를 구분한다.

xml은 <root>태그(묶어주는 태그, 기준)가 꼭 있어야한다.

웹으로 되어있고 형식이 자유롭다

url: "data3.xml" 와 같은 이름으로 data3.xml 파일을 새로 만든다.

append : 기존에 데이터에 추가된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

    <!-- ajax통신 활용 data.txt 파일 문자열 인식 소스 코딩 -->
    <script>
        function getText(){
            //jQuery ajax()함수를 활용하여
            $.ajax({
                //url 위치는 같은 위치에 있는 data.txt 파일을 처리합니다.
                url:"data.txt",
                // 처리할 데이터 type은 post 형식으로 처리하며,
                type:"post",
                //서버로부터 응답 받는 dataType은 text 형식으로 합니다.
                dataType: "text",
                //성공적으로(success) ajax 비동기 통신 데이터 처리가 이루어진다면
                //함수를 실행하는데, 이때, 매개변수 rec_data에 "처리된 데이터"를
                //대입해줍니다.
                success: function(rec_data){
                    // id가 result인 영역의 text 노드에
                    // 앞서, rec_data 변수에 대입된 "인식된 데이터(문자열입니다)"를 추가해 줍니다.
                    $("#result").text(rec_data);
                }
            })
        }

        //ajax 통신 활용 data2.html 파일 문자열 인식 소스 코딩
        function getHtml(){
            $.ajax({
                url: "data2.html",
                type: "post",
                //서버로부터 응답받는 dataType은 html로 합니다.
                dataType: "html",
                success: function(rec_data){
                    $("#result").html(rec_data);
                }
            })
        }
        // http://192.168.0.48:8080/ajax/2)%20ajax_html.html
        


        ////ajax 통신 활용 data3.xml 파일 문자열 인식 소스 코딩
        function getXml(){
            $.ajax({
                url: "data3.xml",
                type: "post",
                // 서버로부터 응답 받는 dataType은 xml 형식으로 합니다.
                dataType: "xml",
                success: function(rec_data){
                    var data = $(rec_data).find("data");
                    $(data).each(function(idx, obj){
                        var str1 = $(obj).find("str1");
                        console.log(str1);
                        var str2 = $(obj).find("str2");
                        console.log(str2);
                    
                        var str11 = $(str1).text();
                        var str22 = $(str2).text();

                        //xml은 문자열로 표현이 가능합니다.
                        //이에 비해, json은 다양한 표현이 가능합니다.
                        $("#result").append("str1 : " + str11 + "<br /> ");
                        $("#result").append("str2 : " + str22 + "<br /> ");
                    });
                }
            })

            // http://192.168.0.48:8080/ajax/3)%20ajax_xml.html
        } 
    </script>




</head>
<body>
    
    <!-- 문자열 데이터 버튼을 클릭하면(onclick), getText() 함수를 호출합니다 -->
    <button onclick="getText()">문자열 데이터</button>
    <button onclick="getHtml()">HTML 데이터</button>
    <button onclick="getXml()">XML 데이터</button>

    <div id="result"></div>
</body>
</html>
<?xml version="1.0" encoding= "UTF-8"?>
<root>
    <data>
        <str1>문자열1-1</str1>
        <str2>문자열1-2</str2>
    </data>
    <data>
        <str1>문자열2-1</str1>
        <str2>문자열2-2</str2>
    </data>
    <data>
        <str1>문자열3-1</str1>
        <str2>문자열3-2</str2>
    </data>
</root>

3. JASON 데이터

공공데이터에 사용

 

data4.json 파일 새로 만들기

 

[]: 배열

{}: 객체

keyvalue  : key 값을 지정하면 value 값이 나온다.

- json은 데이터를 key-value (키-값) 쌍으로 만들어 저장하기 위한 포맷으로
- “data1”:100, > 키가 data1 값이 100이 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

    <!-- ajax통신 활용 data.txt 파일 문자열 인식 소스 코딩 -->
    <script>
        function getText(){
            //jQuery ajax()함수를 활용하여
            $.ajax({
                //url 위치는 같은 위치에 있는 data.txt 파일을 처리합니다.
                url:"data.txt",
                // 처리할 데이터 type은 post 형식으로 처리하며,
                type:"post",
                //서버로부터 응답 받는 dataType은 text 형식으로 합니다.
                dataType: "text",
                //성공적으로(success) ajax 비동기 통신 데이터 처리가 이루어진다면
                //함수를 실행하는데, 이때, 매개변수 rec_data에 "처리된 데이터"를
                //대입해줍니다.
                success: function(rec_data){
                    // id가 result인 영역의 text 노드에
                    // 앞서, rec_data 변수에 대입된 "인식된 데이터(문자열입니다)"를 추가해 줍니다.
                    $("#result").text(rec_data);
                }
            })
        }

        //ajax 통신 활용 data2.html 파일 문자열 인식 소스 코딩
        function getHtml(){
            $.ajax({
                url: "data2.html",
                type: "post",
                //서버로부터 응답받는 dataType은 html로 합니다.
                dataType: "html",
                success: function(rec_data){
                    $("#result").html(rec_data);
                }
            })
        }
        // http://192.168.0.48:8080/ajax/2)%20ajax_html.html
        


        //ajax 통신 활용 data3.xml 파일 문자열 인식 소스 코딩
        function getXml(){
            $.ajax({
                url: "data3.xml",
                type: "post",
                // 서버로부터 응답 받는 dataType은 xml 형식으로 합니다.
                dataType: "xml",
                success: function(rec_data){
                    var data = $(rec_data).find("data");
                    $(data).each(function(idx, obj){
                        var str1 = $(obj).find("str1");
                        console.log(str1);
                        var str2 = $(obj).find("str2");
                        console.log(str2);
                    
                        var str11 = $(str1).text();
                        var str22 = $(str2).text();

                        //xml은 문자열로 표현이 가능합니다.
                        //이에 비해, json은 다양한 표현이 가능합니다.
                        $("#result").append("str1 : " + str11 + "<br /> ");
                        $("#result").append("str2 : " + str22 + "<br /> ");
                    });
                }
            })

            // http://192.168.0.48:8080/ajax/3)%20ajax_xml.html
        } 

        //ajax 통신 활용 data3.json 파일 정수,실수,문자열 인식 소스 코딩
        function getJson(){
            $.ajax({
                url: "data4.json",
                type: "post",

                //서버로부터 응답받는 dataType은 json으로 합니다.
                dataType: "json",
                success:function(rec_data){
                    $("#result").append("data1 :" + rec_data.data1 + "<br />");
                    $("#result").append("data2 :" + rec_data.data2 + "<br />");
                    $("#result").append("data3 :" + rec_data.data3 + "<br />");
                }
            })
        }
        // http://192.168.0.48:8080/ajax/4)%20ajax_json.html
    </script>




</head>
<body>
    
    <!-- 문자열 데이터 버튼을 클릭하면(onclick), getText() 함수를 호출합니다 -->
    <button onclick="getText()">문자열 데이터</button>
    <button onclick="getHtml()">HTML 데이터</button>
    <button onclick="getXml()">XML 데이터</button>
    <button onclick="getJson()">JSON 데이터</button>

    <div id="result"></div>
</body>
</html>
{
    "data1":100,
    "data2":11.11,
    "data3":"문자열"
}
728x90
반응형
저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

주소 API 연동  (0) 2023.08.04
LANDING PAGE 구현  (0) 2023.08.04
[JQUERY] 플러그인  (0) 2023.08.02
[JAVASCRIPT]DOM  (0) 2023.08.02
JAVA 설치 / 아파치 톰캣  (0) 2023.08.01

관련글

티스토리툴바