Ajax는 JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자입니다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술
Ajax의 장단점
Ajax의 장점
1. 웹페이지의 속도향상
2. 서버의 처리가 완료 될때까지 기다리지 않고 처리 가능하다.
3. 서버에서 Data만 전송해면 되므로 전체적인 코딩의 양이 줄어든다.
4. 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. 사진공유 사이트 Flickr의 경우 사진의 제목이나 태그를 페이지 리로드 없이 수정할 수 있다.
Ajax 의 단점
1. 히스토리 관리가 안 된다. (보안에 좀 더 신경을 써야한다.)
2. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
3. XMLHttpRequest를 통해 통신을 하는 경우사용자에게 아무런 진행 정보가 주어지지 않는다. 그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.
서버로부터 응답받는 페이지의 중복되는 코드발생
네트워크 대역폭 자원 낭비
필요한 데이터만을 웹 서버에 요청해서 받은 후 클라이언트에서
데이터에 대한 처리를 진행하는 비동기적인 웹 어플리케이션을
제작하기 위한 웹 개발 기법
사용자 입장에서는 화면갱신도 없고, 요청과 응답 사이 시간에도
다른 일을 할 수 있어 편리하고 빠른듯한 환경을 느낄 수 있다.
| 속성 | 설명 |
| type | http 전송 method를 지정한다. ( GET, POST ) |
| url | 요청 URL. GET 방식일경우 URL 뒤에 파라미터를 붙여서 사용해도 된다. |
| dataType | Ajax를 통해 호출한 페이지의 Return 형식이다. 형식에 따라 xml, json, html, text 등을 사용하면 된다. |
| data | 서버에 데이터를 전송할 때 사용된다. |
| error | 에러났을때의 처리 부분이다. |
| success | 성공했을때의 처리 부분이다. 보통 해당 부분에서 데이터 핸들링을 하면 된다. |
Ajax 데이터 전송시 사용하는 형식은 CSV,XML,JSON 방식이 있다.
JSON
(JavaScript Object Notation)
속성-값 쌍으로 이루어진 데이터를
전달하기 위한 개방형 표준 포맷
<!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>Document</title>
<script src = "jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>임시완 잘생겼나요~</h1>
<script>
console.log($('h1').html())
$("h1").html("<span>정말 잘생겼어요</span>");
// $("h1").text("진짜진짜")
// $("h1").css("color","yellow")
// $("h1").css("font-size","50px")
// $("h1").css("background-color","black")
// $("h1").css("")
// 다중 스타일 처리
$("h1").css({
color : "yellow",
fontSize : "50px",
backgroundColor : "black"
});
$(document).ready(function(){
})
$(function(){
})
</script>
</body>
</html><!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>Document</title>
<script src = "jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>우리모두 취업합시다</h1>
<h1>하위</h1>
<script>
$("h1").on("mouseover", function(){
$(this).css({
color : "yellow"
})
})
$("h1").on("mouseout", function(){
$("h1").css("color" , "green")
})
</script>
</body>
</html><!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>Document</title>
<script src = "jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>다중 이벤트 처리!</h1>
<script>
$("h1").on({
'click' : function(){
$("h1").css("color", "white")
$("body").css("background-color", "pink")
},
"mouseover" : function(){
$("h1").css("color", "white")
$("body").css("background-color", "green")
}
});
</script>
</body>
</html><!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>Document</title>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text">
<br>
<input type="password">
<br>
<input type="radio">
<br>
<input type="checkbox">
<script>
//속성값을 가져오는것
$("input[type=password]").val("추가한데이터");
$("input[type=radio").attr("checked",true)
</script>
</body>
</html><!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>Document</title>
<script src = "jquery-3.6.0.min.js"></script>
</head>
<body>
<button onclick="req()">영화정보 받아오기</button>
<script>
function req(){
$.ajax({
url : "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=e0754a641a509ca3e5b043d4396b90fb&targetDt=20200606",
type : "get",
success : function(res){
for(let i=0; i<10; i++){
console.log(res.boxOfficeResult.weeklyBoxOfficeList[i].movieNm)
}
},
error : function(){
alert("실패입니다.")
}
});
}
</script>
</body>
</html><!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>Document</title>
<script src = "jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
</div>
<button onclick="data()">
데이터 가져오기
</button>
<script>
function data(){
//클릭했을때 page2에 있는 정보를 들고와서 div태그 안에 출력하기
$.ajax({
url : "page2.html",
type: "get",
success: function(res){
//데이터를 잘 받아 왔을때 처리해주는 로직
alert("성공입니다.")
$("div").html(res)
},
error: function(){
//데이터를 받아 오지 못했을때 처리해주는 로직
alert("실패입니다.")
}
})
}
</script>
</body>
</html><!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>Document</title>
</head>
<body>
<h1>
두번째 페이지에 있는 글자입니다.
</h1>
</body>
</html>"스마트인재개발원에서 진행된 수업내용입니다"
스마트인재개발원
4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관
www.smhrd.or.kr
'스마트 인재개발원 > HTML - CSS - JS' 카테고리의 다른 글
| (스마트인재개발원) HTML 태그 정리 (0) | 2021.06.27 |
|---|---|
| (스마트인재개발원) JSP 기초 (0) | 2021.06.20 |
| (스마트인재개발원) JS 기초 실습. (0) | 2021.06.10 |
| (스마트인재개발원) HTML-CSS NCS 시험 예상문제 (0) | 2021.05.28 |
| (스마트인재개발원) CSS 기초 flexbox, holy grail, wrap, float (0) | 2021.05.28 |