MLP) [Ajax] 2. Ajax의 사용

XMLHttpRequest 객체

서버와 통신을 하도록 하는 객체

• XMLHttpRequest 객체는 서버와 상호작용하기 위해 사용
• 전체 페이지를 새로고침하지 않아도 URL을 통해 데이터를 전송하거나 받아올 수 있음
• XML뿐만 아니라 모든 종류의 데이터를 받아올 수 있음
• 브라우저에서 제공하는 API

 

[Javascript: XMLHttpRequest 객체 생성]

let req = false;
const init = function(){
    try{
        req = new XMLHttpRequest();
        console.log('req: ' + req);
    }catch(e){
        alert('req생성 실패');
    }
}

 

콘솔창

---

onchange 이벤트

• input 요소의 onchange 이벤트는 입력필드의 값을 변경할 때 발생하는 이벤트
• 이벤트핸들러 함수를 통해 입력된 값에 대한 처리를 한다.
• onchange 이벤트는 사용자가 입력필드에 값을 입력/삭제할 때마다 발생하기 때문에 실시간으로 값을 업데이트하거나 다른 처리를 수행한다. => 사용자에게 좀 더 유연한 UI를 제공

<input type="text" name="phone" id="phone" onchange="getUserInfo()"/>

=> 입력필드의 값이 변경되면 getUserInfo() 함수가 실행된다.

 

const getUserInfo = function(){
    let tel = $('#phone').val();
}

=> 사용자가 입력한 연락처 값을 가져옴

document.getElementById('phone').value;와 동일한 코드

---

응답데이터 3가지 종류

1. HTML
2. XML
3. JSON

JSON(JavaScript Object Notation)

• 자바스크립트 객체 표기법
• 데이터를 쉽게 교환하고 저장하기 위한 텍스트 기반의 데이터 교환 표준
• 텍스트 기반이기 때문에 다양한 프로그래밍 언어에서 데이터를 읽고 사용할 수 있음

JSON의 형태

 

1. 키(key)와 값(value)의 쌍으로 이루어져 있는 구조

{ key : value }

 

2. 여러 데이터를 나열하는 경우 쉼표(,)를 사용

{ key1 : value1, key2 : value2 }

 

3. 객체(Object)는 중괄호({ })로 묶어서 표현하고, 배열(Array)은 대괄호([ ])로 묶어서 표현

{ "학생정보" : { "이름" : "홍길동", "지역" : "대치동" }, "공부과목" : [ '국어', '영어', '수학' ] }

 

---

Ajax 사용 순서

1. XMLHttpRequest 객체 생성하기

let req = false;
const init = function(){
    try{
        req = new XMLHttpRequest();
        console.log('req: ' + req);
    }catch(e){
        alert('req생성 실패');
    }
}

 

2. 사용자가 입력한 값(연락처 정보) 얻어오기

let tel = $('#phone').val();

 

3. Ajax로 요청 보내기

1. 요청을 준비하는 단계: XMLHttpRequest의 open(요청방식, url, [비동기여부(true / false)])
2. 요청을 보내기 전단계: onreadystatechange 속성값에 콜백함수 지정 (상태값이 바뀔 때 호출할 함수)
3. 요청을 전송하는 단계: XMLHttpRequest의 send(파라미터데이터)
   • send(null); => GET방식
   • send(String); => POST방식 ex) phone=1111&id=hong

//[1] 요청을 준비하는 단계 => XMLHttpRequest의 open(요청방식, url, [비동기여부(true/false)])
let url = "pizzaResult.jsp?phone=" + tel; //text data를 생성
let url = "pizzaResultXml.jsp?phone=" + tel;//xml data를 생성
let url = "pizzaResultJson.jsp?phone=" + tel; //JSON data를 생성
        
req.open('GET', url, true); //true==> 비동기방식으로 요청을 보낸다(디폴트)
 
//[2] 요청을 보내기 전에 onreadystatechange 속성값에 콜백함수 지정 (상태값이 바뀔 때 호출할 함수)
req.onreadystatechange = updatePage;
 
//[3] 요청을 전송하는 단계 => XMLHttpRequest의 send(파라미터데이터)
req.send(null); //get방식

 

4. 응답데이터 받기

1. HTML 형식: responseText
2. XML 형식: responseXML
3. JSON 형식: responseText로 받은 뒤 JSON.parse() 함수를 이용해서 문자열을 JSON 객체로 변환