1. AJAX (Asynchronous Javascript And XML) 정의
➢ JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML데이터를 주고 받는 기술
▪ 자바스크립트를 통해서 서버에 데이터를 요청하는 것
➢ 특정화면만 바꾸고 싶을 때 사용.
▪ EX) 네이버 로그인 할 때 로그인 부분만 변경됨. 페북 댓글 작성시 누가 작성중입니다. 라는 문구가 나온다.
➢ 전체 웹페이지를 로드할 필요없이 일부화면만 갱신해서 웹페이지 속도 향상
➢ 클라이언트에서 서버로 데이터를 요청하고 결과를 돌려받을 수 있다. 그동안 브라우저가 멈추지 않는다.
2. 클라이언트와 서버
1) 클라이언트
➢ 서버에서 정보를 가져와 사용자에게 보여줄 수 있는 소프트웨어.
▪ 예) 웹브라우저, App
2) 서버
➢ 네트워크상에서 접근할 수 있는 프로그램
➢ 어떤 자료들에 대한 관리나 접근을 제어하는 프로그램
➢ 일반적으로 서버에는 사용자가 직접 접근하지 않는다.
3. AJAX장단점
1) 장점
▪ 웹페이지의 속도향상 서버의 처리가 완료될 때까지 기다리지 않고 처리 가능
▪ 서버에서 Data만 전송하면 되므로 전체적인 코드의 양이 줄어든다.
▪ 기존 웹에서는 불가능했던 다양한 UI 가능
2) 단점
▪ 히스토리 관리불가
▪ 보안상 문제 : 페이지 이동 없는 통신
▪ 연속적으로 데이터 요청시 서버 부하 증가
▪ XMLHttpRequest를 통해 통신하는경우, 사용자에게 정보 미전송.
▶ 요청이 완료되지 않았는데도, 사용자가 페이지를 떠나는 등의 오작동 우려
▪ Script로 작성되므로 디버깅이 용이하지않다.
4. AJAX진행과정
1) XMLHttpRequest Object 생성
▪ request를 보낼 준비를 브라우저에게 시키는 과정
▪ 이를 위해 필요한 method를 갖춘 object가 필요
2) callback 함수 생성
▪ 서버에서 response가 왔을 때 실행시키는 함수
▪ HTML 페이지를 업데이트
3) Open a request
▪ 서버에서 response가 왔을 때 실행시키는 함수
▪ HTML 페이지를 업데이트
4) send the request
5. AJAX사용법
AJAX사용법은 일반적으로 3가지로 구분한다.
1)옛날 방식
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ajax1</title> </head> <body> <script> /*loadDoc 문서를 읽는다.*/ // XMLHttpRequest 생성 function loadDoc(){ var xhttp = new XMLHttpRequest(); // 응답 왔을 때의 콜백 함수 정의 xhttp.onreadystatechange = function(){ // this.readyState == 4 : 정상완료 // this.status == 200 : 성공 // this.status == 404 : 파일을 못 찾았다 // 200이오든 404가오든 request에 response가 오면 정상완료. if (this.readyState == 4 && this.status == 200){ document.getElementById("demo").innerHTML = this.responseText; } }; //통신 방식이나 대상을 설정 // 방식 : GET(읽기), POST(쓰기), PATCH, DELETE, ... xhttp.open('GET','ajax_info.txt', true); xhttp.send(); } </script> <div id="demo"></div> <button onclick="loadDoc()">get data</button> </body> </html>
2) jquery이용
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ajax2</title> <!-- jquery cdn import --> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> </head> <body> <script> $(function () { $('#get_data_button').click(function () { // GET 방식 $('#demo').load('ajax_info.txt'); }); }); </script> <div id="demo"></div> <button id="get_data_button">get data</button> </body> </html>
3) fetch함수
▪ fetch함수를 사용한 방식이 가장 최근방식이고 잘 사용되는 방식이다.
▪ stringify() : json형태 그대로 string으로 변환
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ajax3</title> </head> <body> <script> function loadDoc() { console.log('start'); fetch('ajax_info.txt') // .then(function (response) { // return response.text(); // }) // 화살표 함수 (arrow function) // 람다식 (lambda exepression) .then(response => response.text()) // 기다렸다가 여기서 처리 .then(text => { // 기다렸다가 여기서 처리 console.log('!!!!!!'); document.getElementById('demo').innerHTML = text; }); console.log('end'); } </script> <div id="demo"></div> <button onclick="loadDoc()">get data</button> <!-- fetch함수 예시2 --> <!-- <script> fetch('https://www.naver.com/example.json') .then((response) => { return response.json() }) .then((결과) => { console.log(결과) }) </script> --> </body> </html>
6. 동기/비동기 방식
1) 동기(Synchronous)
▪ 동기는 요청을 보낸 후 응답(결과물)을 받아야지만 다음 동작이 이루어지는 방식
▪ 모든 일은 순차적으로 실행되며 어떤 작업이 수행중이라면 다음 작업은 대기
▪ Blocking : 앞선 작업의 소요 시간으로 인해 다음 함수의 실행이 중단되는 것.
2) 비동기 (Asynchronous)
▪ 앞선 작업이 종료되지 않아도 기다리지 않고 다음 작업을 실행하는 것
▪ 비동기 함수는 앞선 작업이 종료되지 않아도 바로 다음 작업을 실행하여 Blocking 해결
▪ BUT 작업의 실행 속도 보장X
▪ 대표적인 것이 AJAX
관련글
REST API, CORS 에러 해결방법
참고 자료
w3schools
'언어 > HTML,CSS,JS' 카테고리의 다른 글
REST API, CORS 에러 해결방법 (0) | 2022.06.12 |
---|---|
jQuery selector(선택자), val(), text(), html() (0) | 2022.06.02 |
jQuery : jQuery개념, jQuery cdn적용방법, onclick, 메서드 체인, append (0) | 2022.06.02 |
JavaScript Selector, mouse 관련 이벤트 (onmouseover, onmouseleave) (0) | 2022.05.31 |
JavaScript관련 기본개념 : DOM, 함수선언 및 실행(alert, confirm, prompt )등 (0) | 2022.05.31 |