JavaScript방식 Ajax

1️⃣ JavaScript방식 Ajax – 방법 1 : XMLHttpRequest

※ Ajax는 브라우저 내장 객체인 XMLHttpRequest를 이용하여 비동기식으로 데이터를 송수신함
( IE 브라우저는 ActiveXObject 객체 사용 )

1. 객체 생성 → script문에 요청을 위한 XMLHttpRequest객체 생성
   
   
2. 서버 응답 처리 함수 생성 및 지정 → onreadystatechange에 함수 지정
   
   지정되는 함수에 포함될 내용
   1) 응답 상태 확인 → readyState(서버 응답 상태 확인) , status(Http 응답 상태 코드 확인)
   2) 응답 완료(서버 응답 데이터 접근) → responseText / responseXML
   
   
3. 요청 방식, 대상(서버), 동기/비동기 지정 → open() 메소드 호출
   
   
4. 대상(서버)에 전송 → send() 메소드 호출

2️⃣ JavaScript방식 Ajax – 방법 2 : fetch() API

JS의 Promise 객체를 이용한 비동기 요청 방법으로 JS에서 기본 제공함
※ Promise(약속) 객체 : 비동기 요청에 대한 처리가 완료되면 바로 결과를 제공하겠다고 약속
→ 비동기 요청 시 동시에 다른 JS 코드가 실행되고 있음
※ fetch(가지고 오다) API : 비동기 요청이 끝나면 응답 결과를 가져와서
현재 화면에서 다룰 수 있는 방법을 제공 하는 API

[GET방식 요청 작성 방법]

fetch("요청주소") // 지정된 주소로 GET방식 비동기 요청(ajax)
// 전달하고자 하는 파라미터를 주소 뒤 쿼리스트링으로 추가
  .then(response => response 파싱 ) // 요청에 대한 응답 객체(response)를 필요한 형태로 파싱
  .then(response 파싱 데이터 => {}) // 첫 번째 then에서 파싱한 데이터를 이용한 동작 작성
  .catch( e => {}) // 예외 발생 시 처리할 내용을 작성

✔️main.jsp

...
                <h3>닉네임이 일치하는 회원의 전화번호 조회</h3>
                <input type="text" id="inputNickname">
                <button id="btn1">조회</button>
                <h4 id="result1"></h4>
...

✔️ main.js

// 비동기로 이메일이 일치하는 회원의 닉네임 조회
function selectNickname(email){
    fetch("/selectNickname?email=" + email)
        // 지정된 주소로 GET방식 비동기 요청(ajax)
        // 전달하고자 하는 파라미터를 주소 뒤 쿼리스트링으로 추가
    .then(response => response.text()) // 요청에 대한 응답 객체(response)를 필요한 형태로 파싱
    .then(nickname => {console.log(nickname)}) // 첫 번째 then에서 파싱한 데이터를 이용한 동작 작성
    .catch(e => {console.log(e)}) // 예외 발생시 처리할 내용을 작성
}

[POST 방식 요청 작성 방법]

fetch("요청주소“, { // 지정된 주소로 비동기 요청(ajax)
      method : “POST”, // 데이터 전달 방식을 POST로 지정
      headers: {"Content-Type": "application/json"}, // 요청 데이터의 형식을 JSON으로 지정
      body : JSON.stringify( {K:V, K:V} ) // JS객체를 JSON 형태로 변환하여 Body에 추가
})
  .then(response => response 파싱 ) // 요청에 대한 응답 객체(response)를 필요한 형태로 파싱
    .then(response 파싱 데이터 => {}); // 첫 번째 then에서 파싱한 데이터를 이용한 동작 작성
.catch( err => {}) // 예외 발생 시 처리할 내용을 작성

응답 객체(response)가 사용 가능한 속성, 메서드

.status : HTTP 상태코드

.ok : 200번대 HTTP 상태코드인 경우 true, 아니면 false

.body : 응답 내용

.text() : 문자열 형태의 응답 데이터를 텍스트 형식으로 반환

.json() : JSON 형식(JS 객체 문자열 표기법) 응답 데이터를 JS 객체 형식으로 반환

jQuery방식 Ajax

1️⃣ jQuery방식 Ajax

jQuery방식 Ajax 장점

• JavaScript 방식보다 구현 방법이 간단함 → 코드 길이 감소
• 직관적이며 다양한 방법의 코딩 가능
• 크로스 브라우저 처리를 jQuery가 자동으로 해결
  → JavaScript방식 XMLHttpRequest 객체 생성 시 브라우저 검사 생략 가능

jQuery방식 Ajax 구현 방법

• $.ajax( url [, settings] )
  → jQuery에 내장되어 있는 Ajax 통신을 위한 가장 기본적인 함수

  [ 구현방법 ]

  $.ajax({
    url : “요청이 전송되는 url이 포함된 문자열” // 필수 구현 속성
    [,settings] // 선택 속성(다수 속성 선택 가능)
         });

jQuery방식 Ajax 주요 속성