[Basic] AJAX란?

AJAX란?

 

AJAX - Asynchronous JavaScript and XML의 약자로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다. 

- 새로고침 없이 서버에게 GET을 요청하는 JS 코드

 

- 접은 글에 XML 문서를 보면서 간단하게 적어보았다. 필요하거나 궁금한 사람만 읽어보자

XML - eXtensible Markup Language 

W3C에서 개발한 다목적 마크업 언어 ( 문서나 데이터의 구조를 명세하는 언어 )

---

XML 기본 개념

• 구조적인 데이터를 위한 것
• 거의 HTML처럼 보인다
• 텍스트이며, 읽히는 것만을 뜻하지 않는다
• 크기가 커진다
• 기술의 집합
• 새로운 기술이 아닌 발전한 기술
• HTML에서 XHTML로 발전
• XML 모듈식
• RDF / 시맨틱 웹의 기초
• 라이선스의 제약 x, 플랫폼에 독립적, 많은 지원이 존재

---

가장 많이 쓰이는 핵심 요소

• (유니코드) 문자
  • XML 문서는 문자로 이루어진 문자열, 대부분의 유니코드들은 XML 문서에 표기 가능
• 프로세서 / 애플리케이션
  • XML Parser = 프로세서 : 마크업 문자 분석하고 구조화된 정보를 애플리케이션에 넘김
    • XML 프로세서의 역할 제시를 하지만 애플리케이션에 대해 권한 x
• markup / content
  • markup 구성 문자열은 ' < '   ' > ' or ' & '  ' ; ' 으로 or의 전후로 각각 문자의 시작과 끝을 의미한다
• 태그
  • < 로 시작, >로 끝
    • 시작태그 <secion>
    • 끝 태그 </section>
    • 빈 엘리먼트 <line-break/>
• 엘리먼트(element)
  • 문서의 논리요소, 시작 / 끝 태그, 빈 엘리먼트 태그로만 이루어져있다
  • 시작 및 끝 태그 사이에 문자가 존재 시 엘리먼트의 내용이며 마크업 포함 가능
• 애트리뷰트
  • 이름 / 값 짝으로 이루어진 마크업 구조이다.
  • ex :  <img src=" " alt = " " />
• XML 선언
  • 자신에 대한 정보 일부를 선언하는 것으로 시작 가능

<?xml version="1.0" encoding="UTF-8" ?>

해당 XML의 버전은 1.0이며 UTF-8로 인코딩 되어있음을 의미

AJAX의 경우 XML뿐만 아니라 JSON 및 일반 텍스트와 같은 다른 데이터 오브젝트에서도 사용이 가능해서 XML 사용보단 JSON을 자주 사용한다. 

 

AJAX 원리

 

1. 브라우저가 사이트에 접속하면 서버는 사이트의 기본 구조 및 정보를 담은 '템플릿'을 전달한다

2. 브라우저는 수신받은 템플릿 HTML과 CSS를 해석해 화면의 기본 모양을 그린다.

3. 계속해서 서버는 데이터의 요청 방식과 수신받은 데이터를 어떻게 가공해야 하는지를 기술한 자바스크립트 파일을 전달한다.

4. 브라우저는 자바스크립트 파일을 해석해서 파일에 기술된 방식대로 서버에 추가 데이터를 요청한다.

5. 서버는 순수 데이터를 응답으로 되돌려준다

6. 브라우저는 수신한 데이터를 해석하여 템플릿의 적절한 위치에 삽입한다. 데이터의 가공 방식에 따라 삽입 외의 작업(변경, 삭제)을 할 수도 있다.

 

AJAX 방식

 

1. 옛날 JS 방식

<script>
var ajax = new XMLHttpRequest();
            ajax.onreadystatechange == function(){
                if (this.readyState == 4 && this.status == 200) {
                    console.log(ajax.responseText)
                }
            };
        ajax.open("GET", "URL", true);
        ajax.send();
</script>

2. 최근 JS 방식

<script>
    fetch('url')
                .then((response)=>{
                	if (!response.ok){
                    	throw new Error('400 or 500')
                        }
                    return response.json()
            })
                .then((결과) => {
                	console.log(결과)
            })
            	.catch(() => {
                	console.log('Error')
                    })
</script>

3. 외부 라이브러리 방식

• jQuery : $. ajax()

$.ajax({

                type: 'GET', // 데이터를 받아오는 방식
                url: '/mars', // 입력받아오고자 하는 url
                data: {}, // 받아오는 데이터
                success: function (response) {}
        })

• 리액트, 뷰의 경우 axios 설치해서 사용

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    axios.get('url')
            .then((result) => {
                console.log(result.data);
            }).catch(()=>{
                console.log('에러 발생')
        })
</script>

 

AJAX 장/단점

장점

• 새로고침이 없으므로 웹페이지 전환이 부드러워짐

단점

• 동적 페이지 렌더링을 위한 기술이기에 자바스크립트를 사용하지 못하는 검색 엔진에는 사용 불가
• 자바 스크립트를 무조건 써야 한다. AJAX를 지원하는 언어는 자바스크립트 하나이다. 그렇기에 자바 스크립트가 사용 불가하다면 웹은 화면 중에서 자바스크립트를 뺀 나머지를 그린다