AJAX(1)

📌 AJAX Test

 

    <h4>ajax를 이용한 데이터 전송</h4>
    <button type="button">확인</button>
    <div></div

$('button:button').on('click', function() {
        let request = new XMLHttpRequest();
        request.open('get', 'newTest.jsp', true);
        request.send();
        request.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                        let a = JSON.parse(this.responseText);
                      let result = "<table>";
                            result += "<tr>";
                            result += "<th>이름</th>";
                            result += "<th>주소</th>";
                            result += "<th>번호</th>";
                            result += "</tr>";
                      $.each(a,function(){
                            result += "<tr>";
                            result += "<td>" + this.name + "</td>";
                            result += "<td>" + this.addr + "</td>";
                            result += "<td>" + this.tel + "</td>";
                            result += "</tr>";
                      });
                      result += "</table>";
                      $('div').html(result);
                }
        };
});

• ajax를 사용하면 기존 페이지에 정보를 업데이트하고 출력할 수 있다.

✔ 서버에 정보를 요청하기 위해 XMLHttpRequest객체를 생성해야한다.

let request = new XMLHttpRequest();

• XMLHttpRequest객체 :
  • 서버와 상호작용하기 위해 사용한다.
  • 새로고침 없이 데이터를 받아오며 주로 ajax에 사용된다.

✔ 객체를 생성한 후 요청정보를 설정하고 서버로 전달해야한다.

request.open('get', 'newTest.jsp', true);
request.send();

• request.open(method 방식, url, async)
  • method : get방식인가 post방식인가
  • url : 요청할 페이지
  • async : 동기식 처리인지 비동기식 처리인지 설정
    • true : 비동기 / false : 동기
    • 동기식 처리
      • 서버와 클라이언트가 동시에 통신하여 프로세스 수행, 종료를 함께 진행한다.
      • 새로운 콘텐츠를 추가, 불러올때 페이지를 리로드하거나 이동해야 한다.
    • 비동기식 처리
      • 프로세스가 종료되어도 언제든지 필요한 정보를 요청하고 로드할 수 있다.
      • 페이지를 새로고침할 필요 없다.
      • 입력한 양식 및 정보가 그래도 유지된다.
      • 페이지에서 필요한 부분만 호출하므로 불필요한 트래픽을 줄일 수 있다.
      • 코드가 복잡해지고 디버깅하기 어려운 문제가 있다.
      • try-catch구문 적용이 어렵다.
      • but promise 구문을 사용하면 비동기식을 동기식처럼 사용할 수 있어서 try-catch적용이 가능해진다.
• request.send() : 요청 정보 서버로 전달

✔ 서버로 부터 응답 데이터 받기

request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
                let a = JSON.parse(this.responseText);
                let result = "<table>";
                       result += "<tr>";
                       result += "<th>이름</th>";
                       result += "<th>주소</th>";
                       result += "<th>번호</th>";
                       result += "</tr>";
                $.each(a,function(){
                       result += "<tr>";
                       result += "<td>" + this.name + "</td>";
                       result += "<td>" + this.addr + "</td>";
                       result += "<td>" + this.tel + "</td>";
                       result += "</tr>";
                });
                result += "</table>";
                $('div').html(result);
        }
};

• request.onreadystatechange = function(){}
  • XMLHttpRequest객체의 readyState값이 변할 때마다 자동으로 호출되는 함수를 설정한다.
    • XMLHttpRequest객체명.onreadystatechange = 호출되는 함수(){내용}
  • 이 속성을 사용해서 서버에 요청한 데이터의 존재 및 응답 도착의 순간을 특정한다.
• readyState 프로퍼티
  • readyState 프로퍼티는 XMLHttpRequest 객체의 현재 상태를 나타낸다.
  • 이 프로퍼티의 값은 객체의 현재 상태에 따라 다음과 같은 주기로 변화한다.

    상태	코드 값	설명
    UNSENT	0	XMLHttpRequest 객체가 생성됨.
    OPEND	1	open() 메소드가 성공적으로 실행됨.
    HEADERS_RECEIVED	2	모든 요청에 대한 응답이 도착함.
    LOADING	3	요청한 데이터를 처리 중임.
    DONE	4	요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.

• status 프로퍼티
  • status 프로퍼티는 서버의 문서 상태를 나타난다.

    상태 코드	설명
    200	서버에 문서가 존재, 정상적으로 응답을 받음
    403	요청 오류
    404	서버에 문서가 존재하지 않음, 페이지를 찾지 못함
    500	서버에러

✔ JSON데이터 파싱하기

let a = JSON.parse(this.responseText);
$.each(a,function(){
        let result = "<table>";
                result += "<tr>";
                result += "<td>" + this.name + "</td>";
                result += "<td>" + this.addr + "</td>";
                result += "<td>" + this.tel + "</td>";
                result += "</tr>";

• newTest.jsp파일 에 들어있는 json object array 데이터

[
  {"name" : "장재훈", "addr" : "대전", "tel" : "010-1111-1111"},
  {"name" : "윤재열", "addr" : "대전", "tel" : "010-2222-2222"},
  {"name" : "김미정", "addr" : "대전", "tel" : "010-3333-3333"},
  {"name" : "김성겸", "addr" : "대전", "tel" : "010-1234-1234"}
]

• JSON Object Array데이터를 JavaScript에서 사용할 수 있도록 파싱하는 작업
• { key : value } 형태로 저장된 JSON데이터를 key로 접근해 데이터를 꺼내온다.
• $.each(배열 , function(index, value){ result = this.key값 });
  • JSON 객체가 배열로 존재할 때 여러개의 데이터를 꺼내오려면 each메소드를 사용한다.
  • each를 사용하면 for, while처럼 배열을 순회하며 데이터를 꺼내온다.