Json파일 이용하여 ajax통신 간단한 예제 사용 방법

/*조건*/

로컬 서버에서 사용했음.

같은 폴더안에 test.html , test.json 생성.

 

test.html

<table>        
 <thead>            
    <tr>                
      <td>번호</td>         
      <td>이름</td>           
      <td>전화번호</td>           
    </tr>       
 </thead>      

<tbody id="table_desc"></tbody>        
</table>

<script>
//쉼표 문자 빼주는 프로토타입
         String.prototype.replaceAll = function(org, dest) {
                return this.split(org).join(dest);
            }
            
//ajax 통신역할
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                //JSON으로 작성되어있는 문자열을 각 언어에 해당되는 형태로 변환하는 것,파싱
                returnJson = JSON.parse(xhttp.response)
                returnArray = [];

                for (let i = 0; i < returnJson.length; i++) {
                    returnArray.push(`
                    <tr>
                        <td>${returnJson[i].id}</td>
                        <td>${returnJson[i].Name}</td>
                        <td>${returnJson[i].phone}</td>
                    </tr>
                    `)
                }

                const targetHtml = document.getElementById('table_desc')

                targetHtml.innerHTML=returnArray.toString().replaceAll(",","")

            }
        }
       //post방식, 폴더이름/json파일이름 , true
        xhttp.open('POST', 'ex.json', true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send("data=0")
    </script>

test.json

[
    {
        "id":0,
        "Name":"shy",
        "phone":"010-1234-5678"
    },
    {
        "id":1,
        "Name":"shy1",
        "phone":"010-1234-5678"
    },
    {
        "id":2,
        "Name":"shy2",
        "phone":"010-1234-5678"
    },
    {
        "id":3,
        "Name":"shy3",
        "phone":"010-1234-5678"
    },
    {
        "id":4,
        "Name":"shy4",
        "phone":"010-1234-5678"
    },
    {
       "id":5,
        "Name":"shy5",
        "phone":"010-1234-5678"
    }
]

완성 파일