이번 프로젝트를 진행하는데 ajax 를 사용하였습다. ajax가 정확히 무엇인지 궁금하기도 했고, 자주 사용되는 것 같아 이번 기회에 정확히 알아두기위해 기록합니다.🤗
AJAX 의 정의에 대해 간단히 살펴보고 가자
- Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이다.
- Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.
- 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
결론: 자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것
AJAX 작동 방식
- 1. 웹페이지에서 이벤트 발생(페이지 로딩, 버튼 클릭)
- 2. XMLHttpRequest 객체는 JavaScript에 의해 생성됩니다.
- 3. XMLHttpRequest 객체는 웹 서버에 요청을 보냅니다.
- 4. 서버가 요청을 처리합니다.
- 5. 서버가 웹 페이지에 응답을 보냅니다.
- 6. 응답은 JavaScript에서 읽습니다.
- 7. 페이지 업데이트와 같은 적절한 조치가 JavaScript에 의해 수행됩니다.
소스코드
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>사용자 관리페이지</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function getSend(urladdr,param){
var temp;
$.ajax({
type:'post',
headers:{
"Content-Type":"application/json"
},
async :false,
url:urladdr,
data:param,
dataType:"json",
success : function(result){
temp= result;
},
});
return temp;
}
</script>8. jquery CDN
- jQuery를 직접 다운로드하고 호스팅하지 않으려면 CDN(Content Delivery Network)을 추가하면 사용할 수 있습니다.
13. type:'post'
- post 방식으로 전송
14,15,16. "Content-Type":"application/json"
JSON형식의 데이터를 보낸다는 것을 알려주기 위해서 request header에 Content-Type: application/json을 설정해줘야 한다.
17. async: false
- sync 는 동기화 <순서대로 처리> async는 비동기화 <먼저 오는 순서대로? 처리> 를 의미한다.
ajax를 동기화(순서대로) 처리해야하는 경우 true로하거나 기술하지 않으면 비동기로 작동한다. - 하지만 여기서 주의해야할점이 있다. async 이기 때문에 비동기화가 맞냐 아니냐 로 해석해야한다.
async 가 false 임으로 비동기화가 아니다 ==> 즉, 동기화 로 ajax를 처리한다는 의미이다.
18. url
- 요청할 주소를 의미한다.
19.data : param
- 보내는 데이터 / 여기서는 param
20.dataType:json
- json 타입으로 데이터를 받는다.
21. success : function(result){ temp = result; },
- 요청 완료시 실행
전달받은 데이터가 result 안에 담아서 들어오게된다.
'웹 개발자 준비 과정🐳' 카테고리의 다른 글
| [거래사이트 만들기] ejs 레이아웃(layout) 정리.txt (1) | 2022.10.11 |
|---|---|
| day14 : 트위터 클론코딩 😊 <노마드 코더> (2) | 2022.08.09 |
| day13: React 이용한 TodoList 만들기✍💦 (2) | 2022.08.04 |
| day12: React를 이용한 전화번호부 페이지😏 (1) | 2022.08.04 |
| day11 : Firebase 활용한 SPA CRUD 구현🤔 (1) | 2022.08.02 |
