부트캠프56일차(ajax설명,fetch , jquery , json 설명)

1) AJAX설명

 

JavaScript를이용하여비동기식으로

클라이언트와서버가데이터(XML)를 주고받는(통신) 방식

데이터형식은XML 뿐만아닌Text, HTML, JSON, CSV 등다양한형식사용 가능

특징

전체 페이지를 갱신 하지 않고 일부분만 업데이트 가능

사용자에게 즉각적인 반응과 풍부한 UI경험 제공 가능

ActiveX나 플러그인 프로그램설치없이 이용가능

Javascript방식, jQuery방식으로 구현가능

 

단점

오픈소스로 차별화가 어려움 연속적인

데이터 요청시 서버 부하가 증가하여 페이지가 느려짐

페이지내 복잡도가 증가하여 에러발생시 디버깅이 어려움

 

 

JavaScript 방식-XMLHttpRequest 객체

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

1. POST 방식 주의사항

• post 방식으로 정보를 전달할 때는 send 할때는 헤더에 추가 설정 필요
• Content-Type을 application/x-www-form-urlencoded; charset=UTF-8로 설정
• 데이터 전송방식도 get과 다름
• send 메소드의 인자(key=value)로 데이터 전송
• 여러개의 데이터 보낼때는 &로 연결

예시

function loadJspPost(){
	const xhttp = new XMLHttpRequest();
	const params = "name="+document.f.name.value;
	xhttp.open("Post","ex02_basic.jsp");
	
	//POST 데이터가 폼 형식이라는 걸 서버에 알려줌. + 인코딩지정
	xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8")
	xhttp.send(params); //POST : send시 파라미터전달
	xhttp.onreadystatechange=callback;
}
function callback(){
	if(this.readyState==4 && this.status == 200){
		alert(this.responseText);
		document.querySelector("#demo").innerHTML = this.responseText;
	}
}

 

---

2) JavaScript 방식 - fetch 함수

특징

Promise 기반 객체 반환

.then(), .catch() 또는 async/await 문법과 함께 사용

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("에러:", error));

 

주의사항

HTTP 상태코드가 404, 500이더라도 fetch() 자체는 성공으로 간주

직접 response.ok 또는 response.status를 확인 해야함

fetch("https://api.example.com/404")
  .then(res => {
    if (!res.ok) throw new Error("요청 실패: " + res.status);
    return res.json();
  })
  .catch(err => console.error("에러:", err));

 

 

---

3) jQuery 방식

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

jQuery 방식 장점

코드 길이가 감소하여 JavaScript방식보다 구현 방법이 간단

직관적이며 다양한 방법의 코딩 가능

크로스 브라우저 처리를 jQuery가 해결

(JavaScript방식 XMLHttpRequest 객체 생성시 브라우저 검사 생략 가능)

 

 

---

4) JSON (map으로생각하자)

JavaScript Object Notation(자바스크립트객체표현법)의약자

간단한 포맷

괄호{} 내에key:value쌍으로구성 →{“key”:value}

key는반드시문자열사용 value는String, Number, Boolean, Array, Object, null저장가능

객체{} 또는배열[] 데이터를효율적으로표시가능

특징

Ajax통신에서 Object타입의 데이터 전송시 XML대비 용량이 작음 속도가 빠름 (경량데이터교환방식) 간단한 포맷을 가지고 있어 이해하기 쉬움 순수TEXT기반으로 TEXT형식으로 구조화 됨 대부분의 프로그래밍 언어 에서 JSON포맷 데이터를 핸들링 할 수 있는 라이브러리를 제공

시스템 간 객체 교환에 용이

[
{"author" :{"book":"ajax","pubDate":"2025-04-21"}},
{"author" :{"book":"자바","pubDate":"2025-02-01"}},
{"author" :{"book":"WEB","pubDate":"2025-03-20"}}
]

 

---