[jQuery] Ajax(Asynchronous JavaScript and XML)
2022. 6. 14. 18:01ㆍJavaScript/jQuery
1. 표준 웹 통신
- 웹 브라우저는 서버에게 파일을 요청하게 됩니다.
- 이때 서버는 요청한 파일이 있으면 파일의 내용을 읽어 응답결과로 클라이언트에게 전달하게 됩니다.
- 응답 결과를 받은 웹 브라우저는 데이터를 분석하여 자신이 스스로 처리하게 됩니다.
2. 표준 웹 통신의 문제점
- 표준 웹 통신은 클라이언트 브라우저가 서버에게 응답 결과를 받게 되면 브라우저가 스스로 처리하려고 합니다.
- 브라우저가 처리할 수 있는 데이터면 스스로 처리하고 그렇지 않으면 다운로드가 됩니다.
- 만약 응답 결과가 html 코드이면 html 코드를 통해 만들어 화면을 변경하고 이미지, 사운드, 동영상 등 미디어 데이터면 미디어 데이터를 처리할 수 있는 화면으로 변겨오디어 처리를 하게 됩니다. 즉, 웹 브라우저는 처리할 수 있는 데이터를 받게 되면 화면이 변경됩니다.
3. Ajax 통신
- Ajax 통신은 서버와 통신사 서버로부터 받은 응답 결과를 웹 브라우저에 반영하지 않고 Javascript로 처리할 수 있도록 고안된 통신 방식입니다.
- 이를 이용하면 서버와의 통신은 정상적으로 이루어지며 화면은 변경되지 않기 때문에 화면의 일부분만을 변경하는 등의 작업을 할 수 있습니다.
- 오늘날 웹 애플리케이션을 개발할때 많이 사용하는 통신 기술입니다.
- Ajax 통신은 같은 도메인으로 요청할 수 있는 파일만 요청할 수 있습니다.
4. jQuery Ajax 통신
- Ajax 통신은 브라우저의 종류나 버전에 따라 작성하는 코드가 다르다.
- 이에 jQuery는 개발자가 손쉽게 Ajax 통신을 할 수 있도록 함수를 만들어 제공하고 있습니다.
- load : 지정된 파일을 요청하고 받은 응답 결과를 태그 내부에 삽입
- get : get 방식으로 ajax 통신을 한다.
- post : post 방식으로 ajax 통신을 한다.
- ajax : ajax 통신을 위한 종합적인 모든 기능을 제공하는 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function getText(){
$.ajax({
url : "data.txt", // 요청할 파일의 주소
type : "post", // 통신방식
dataType : "text", // 서버가 보내는 파일 타입
success : function(rec_data){
$("#result").text(rec_data);
}
});
}
function getHtml(){
$.ajax({
url : "data2.html",
type : "post",
dataType : "html",
success : function(rec_data){
$("#result").html(rec_data);
}
});
}
function getXml(){
$.ajax({
url : "data3.xml",
type : "post",
dataType : "xml",
success : function(rec_data){
const data = $(rec_data).find("data");
$(data).each(function(idx, obj){
const str1 = $(obj).find("str1");
const str2 = $(obj).find("str2");
const str11 = $(str1).text();
const str22 = $(str2).text();
$("#result").append("str1 : " + str11 + "<br>");
$("#result").append("str2 : " + str22 + "<br>");
});
}
});
}
function getJson(){
$.ajax({
url : "data4.json",
type : "post",
dataType : "json",
success : function(rec_data){
$("#result").append("data1 : " + rec_data.data1 + "<br>");
$("#result").append("data1 : " + rec_data.data2 + "<br>");
$("#result").append("data1 : " + rec_data.data3 + "<br>");
}
});
}
</script>
</head>
<body>
<button onclick="getText()">문자열 데이터</button>
<button onclick="getHtml()">HTML 데이터</button>
<button onclick="getXml()">XML 데이터</button>
<button onclick="getJson()">Json 데이터</button>
<div id="result"></div>
</body>
</html>data.txt
문자열입니다.data2.html
<a href="http://www.google.com">google</a>data3.xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
<data>
<str1>문자열1-1</str1>
<str2>문자열1-2</str2>
</data>
<data>
<str1>문자열2-1</str1>
<str2>문자열2-2</str2>
</data>
<data>
<str1>문자열3-1</str1>
<str2>문자열3-2</str2>
</data>
</root>data4.json
{
"data1" : 100,
"data2" : 11.11,
"data3" : "문자열"
}
실행결과
Reference
source code : https://github.com/yonghwankim-dev/jQuery_study/tree/main/Ajax/src/main/webapp
윤재성의 처음 시작하는 jQuery Programming
'JavaScript > jQuery' 카테고리의 다른 글
| [jQuery] 애니메이션(Animation) (0) | 2022.06.14 |
|---|---|
| [jQuery] jQuery 효과 (Show/Hide, Fade, Slide, Callback) (0) | 2022.06.13 |
| [jQuery] 태그 탐색 2 (siblings, next, prev) (0) | 2022.06.13 |
| [jQuery] 태그 탐색 1 (parent, child) (0) | 2022.06.13 |
| [jQuery] CSS 제어 (0) | 2022.06.13 |