JS Ajax

Class: 제로베이스
Created: December 9, 2022 5:55 PM
Type: Javascript
강의 명: 초심자도 빈틈없이 학습하는 자바스크립트

HTTP 통신

hyper Text Transfer Protocol

• HTML, 데이터(동영상, 음성, 파일) 등을 주고받기 위한 통신 규약

Https - Http를 ssl로 암호화 한 것을 말함

웹 동작 원리

1. 사용자에 의한 이벤트가 클라이언트(웹 브라우저)에서 발생
2. 서버의 웹 서버로 요청(Request)
3. 데이터베이스에서 데이터 조회
4. 요청 결과 응답을 생성(Response)
5. 응답에 의한 웹 페이지 로드

Ajax 개념 및 동작 원리

Ajax - Asynchronous JavaScript and XML

서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말함.

• 전체 새로고침이 아닌 일부만 로드하는 방법을 말함 ⇒ 비동기 처리
• 클라이언트 대신 서버로부터 데이터를 받고 작업을 수행한다.
• 게시판 리스트를 생각해보면, 리스트 1페이지에서 2페이지로 이동할 떄, 전체적인 페이지를 로드하는 것이 아닌, 게시판의 리스트 부분만 로드하는 것 생각하면 됨.

즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것

사용하는 이유?

1. 전체 로딩 아닌 일부 로딩
   1. 자원과 시간 낭비를 줄일 수 있다.
2. 속도 향상
3. 코딩의 양 간소화
4. 다양한 UI 구현 가능

Ajax 동작 원리

1. 사용자에 의한 이벤트 발생
2. Javascript Ajax 호출
3. 서버의 웹 서버로 요청을 처리(XmlHttpRequest)
4. 데이터베이스에서 데이터 조회
5. 요청 결과 응답 생성
6. Javascript Ajax를 통해 데이터 응답 받음
7. 웹페이지 일부만 다시 로드

AJAX의 장점

• 웹페이지의 속도향상
• 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하다.
• 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.
• 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. ( Flickr의 경우, 사진의 제목이나 태그를 페이지의 리로드 없이 수정할 수 있다.)

AJAX의 단점

• 히스토리 관리가 되지 않는다.
• 페이지 이동없는 통신으로 인한 보안상의 문제가 있다.
• 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
• XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다. (요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.)
• AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈가 있다.
• HTTP 클라이언트의 기능이 한정되어 있다.
• 지원하는 Charset이 한정되어 있다.
• Script로 작성되므로 디버깅이 용이하지 않다.
• 동일-출처 정책으로 인하여 다른 도메인과는 통신이 불가능하다. (Cross-Domain문제)

XMLHttpRequest 객체

Ajax의 핵심. 서버와 데이터를 주고받을 때 사용한다.

IE5, IE6에서는 ActiveX를 이용했었음

사용방법 : var 변수명 = new XMLHttpRequest( );

Fetch

javascript로 서버에 네트워크 요청을 보낸 후, 응답(정보)을 받아오는 기능

JAX: 비동기적으로 추가되는 정보를 가져올 수 있다. fetch는 AJAX중의 하나.

• 프라미스 기반으로 구성
• 비동기 방식
• JS 기본 기능

기본형식

• url : API 서버 주소
• options : 매개변수,
• method 혹은 header를 지정 가능하다.
• options : 매개변수, method 혹은 header를 지정 가능하다.

options에 GET, POST등의 요청방법 메서드를 지정.아무것도 안 쓰면, 자동으로 GET 메서드로 진행된다.fetch() 호출시, 브라우저가 요청을 보내고 promise가 반환된다.

JSON

• 자바스크립트 객체 문법(객체 리터럴)
• 구조화된 데이터 표현을 위한 표준 형식
• 데이터 전송시 사용
• 문자열 형태, 따옴표 표시

개발 할 때 어떤 프로그램을 연계해서 개발해야할 때가 있다.

프로그래밍 언어의 제약이 거의 없기 때문에 거의 모든 언어에서 사용 가능하다.

시작은 JavaScript로부터 파생됐지만(그래서 JavaScript 문법) 언어 독립형 포맷이다.

수년 간 지배 해왔던 XML를 대체 할 수 있는 아주 매우 완전 주요 데이터 포맷

JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용

특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공

제일 중요한 사용 이유는 데이터를 전송할 때 최소한의 용량으로 전송하기 위함.

ajax와 rest api 통신 할 때 자주 받는 데이터 형식인 만큼 필수적

형식

key : value 형식

문법 양식

---

var jsonData = `{
    "key": "value",
    "key": "value",
    "key": "value"
}`

key : value만 기억하자

JSON.parse / JSON.stringify

ar jsonData = {
  "name" : "Kody",
  "age" : 30,
  "gender" : "남",
  "interests" : ["음악", "춤"],
  "family" : {"fater" : "James", "mother" : "Lily" },
  "school" : null,
  "graduate" : true
};
console.log(typeof jsonData) //object

/* 자바크립트 객체 > JSON 객체 */
var jsData = JSON.stringify(jsonData);
console.log(jsData)
// {"name":"Kody","age":30,"gender":"남","interests":["음악","춤"],
// "family":{"fater":"James","mother":"Lily"},"school":null,"graduate":true}

/* JSON 객체 => 자바스크립트 객체 */
var objData = JSON.parse(jsData);
console.log(typeof objData); // object

JavaScript에서 JSON 데이터 뽑기,추출하기

---

쉬운 예제)

JSON 형태 데이터

var param1= {

    "fruit": "Apple",
    "size": "Large",
    "color": "Red"

}

JavaScript

$(document).ready(function(){

jsonTest();

})

functionjsonTest(){

console.log(param1.fruit); // Apple
console.log(param1.color); // Red
}

결과