AJAX란?
Ajax는 "Asynchronous JavaScript and XML"의 약자로, JavaScript의 라이브러리중 하나이며 웹 페이지에서 비동기적으로 데이터를 로드하고 업데이트하기 위한 기술입니다. Ajax를 사용할 시, 웹 페이지를 다시 로드하지 않고도 서버로부터 데이터를 가져와서 업데이트할 수 있게 해줍니다.
기존의 웹 페이지에서는 사용자가 어떤 동작을 취하면 전체 페이지를 다시 불러와야 했던 반면,
Ajax를 사용하면 페이지의 일부분만 업데이트하거나 추가 데이터를 동적으로 로드할 수 있게 됩니다.
즉, Ajax는 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이며,
쉽게 말하면 JavaScript를 통해서 서버에 데이터를 요청하는 것이라 할수 있습니다.
Ajax는 JavaScript, HTML, CSS 등을 사용하여 구현되며, 웹 브라우저에서 내장된 XMLHttpRequest 객체를 사용하여 서버와 통신할 수 있습니다. 또한, 최근에는 Fetch API나 라이브러리(jQuery, Axios 등)를 사용하여 더 간편하게 Ajax 요청을 처리할 수 있습니다.
Django를 사용하여 JSON 형식으로 Ajax를 처리하는 방법 예시코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
let xhr; // XMLHttpRequest 객체를 저장할 변수
window.onload=function(){
// 첫 번째 버튼 클릭 이벤트 처리
document.querySelector("#btn1").addEventListener("click",()=>{
xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성
xhr.onreadystatechange=function(){
if(xhr.readyState===XMLHttpRequest.DONE){
if(xhr.status===200){
process1(); // 서버 응답을 처리하는 함수 호출
}
}
}
url="startajax?msg="+document.querySelector("#txtMsg").value; // 요청할 URL 생성
xhr.open("GET",url,true) // 비동기적으로 GET 요청을 보냄
xhr.send(); // 요청 전송
});
function process1(){
// 서버 응답 데이터를 JSON으로 파싱
let parseData =JSON.parse(xhr.responseText);
// 파싱한 데이터를 화면에 출력
document.querySelector("#show1").innerText = parseData.key;
}
// 두 번째 버튼 클릭 이벤트 처리
document.querySelector("#btn2").onclick=function(){
xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성
xhr.onreadystatechange=function(){
if(xhr.readyState===XMLHttpRequest.DONE){
if(xhr.status===200){
process2(); // 서버 응답을 처리하는 함수 호출
}
}
}
url="goajax"; // 요청할 URL 생성
xhr.open("GET",url,true) // 비동기적으로 GET 요청을 보냄
xhr.send(); // 요청 전송
};
function process2(){
// 서버 응답 데이터를 JSON으로 파싱
let parseData2 =JSON.parse(xhr.responseText);
let ss="";
// 파싱한 데이터를 문자열로 변환하여 ss 변수에 누적
for(let i=0;i<parseData2.length;i++){
ss +=parseData2[i].irum+" "+parseData2[i].nai+"<br/>";
}
// ss 변수의 내용을 화면에 출력
document.querySelector("#show2").innerHTML = ss;
}
// 세 번째 버튼 클릭 이벤트 처리
document.querySelector("#btn3").onclick=function(){
const url="chulbalajax"; // 요청할 URL
// fetch API를 사용하여 비동기적으로 GET 요청을 보냄
fetch(url).then(res=>{
if(res.status===200){
return res.json(); // 응답 데이터를 JSON으로 파싱하여 반환
}else{
console.error(`https err status: ${res.status}`); // 에러 처리
}
})
.then(jsonData=>{
process3(jsonData); // 서버 응답을 처리하는 함수 호출
})
.catch(err=>{
console.log(err); // 에러 처리
})
};
function process3(jsonData){
let ss="";
// 파싱한 데이터를 문자열로 변환하여 ss 변수에 누적
for(let i=0;i<jsonData.length;i++){
ss +=jsonData[i].irum+" "+jsonData[i].nai+"<br/>";
}
// ss 변수의 내용을 화면에 출력
document.querySelector("#show3").innerHTML = ss;
}
}
</script>
</head>
<body>
AJAX Test<br/>
자료 입력 : <input type="text" id="txtMsg" value="korea">
<button id="btn1">test1</button><br/>
<div id="show1"></div>
<hr/>
<button id="btn2">test2</button><br/>
<div id="show2"></div>
<hr/>
<button id="btn3">test3</button><br/>
<div id="show3"></div>
</body>
</html>
HTML 및 JavaScript 파일에서는 btn1,2,3이라는 아이디를 가진 버튼을 클릭하면 각각이 process1,2,3 함수가 호출되고, 해당 함수에서는 xhr 객체의 responseText를 JSON 형식으로 파싱하여 그 결과를 각각 #show1,2,3이라는 div 요소의 텍스트로 표시합니다.
from django.shortcuts import render
import json
from django.http.response import HttpResponse
# 뷰 함수 정의
def MainFunc(request):
return render(request, 'abc.html')
def Func1(request):
msg = request.GET.get('msg')
msg = "nice " + msg
context = {'key': msg} # dict
# JSON 응답 반환
return HttpResponse(json.dumps(context), content_type="application/json")
def Func2(request):
mydata = [
{'irum': 'tom1', 'nai': 22},
{'irum': 'tom2', 'nai': 23},
{'irum': 'tom3', 'nai': 24}
]
# JSON 응답 반환
return HttpResponse(json.dumps(mydata), content_type="application/json")
Django project의 views.py에서는 JSON 데이터를 다룹니다.
MainFunc, Func1, 및 Func2 함수들을 통해 클라이언트에게 JSON 형식으로 응답을 반환하게 됩니다.
+ 개념) 클라이언트와 서버란?
일반적으로 웹 개발에서, "클라이언트"는 웹을 사용하는 사용자를 나타내며, "서버"는 웹 페이지나 애플리케이션을 호스팅하고 제공하는 시스템을 의미합니다.
- 클라이언트: 웹 브라우저를 통해 웹 페이지를 요청하고, 서버로부터 받은 데이터를 표시하는 사용자의 디바이스 또는 브라우저를 의미합니다. 클라이언트는 주로 HTML, CSS, JavaScript를 해석하여 사용자에게 웹 페이지를 보여주는 역할을 합니다.
- 서버: 웹 서버는 클라이언트의 요청에 응답하여 필요한 데이터나 웹 페이지를 전송하는 역할을 합니다. 서버는 클라이언트로부터의 요청을 받아 해당하는 리소스를 제공하거나, 동적인 콘텐츠를 생성하여 클라이언트에게 전달합니다.
간단히 말하면, 클라이언트는 사용자가 보는 부분(웹 브라우저 등), 서버는 웹 페이지를 제공하고 필요한 데이터를 처리하는 부분입니다. 이 둘 간의 통신은 주로 HTTP 또는 HTTPS 프로토콜을 사용합니다.
