AJAX
AJAX는 웹페이지의 이동없이 필요한 데이터만 전송하는 기술이다. 일반적인 경우 데이터 처리는 요청 순서대로 진행하지만 AJAX는 그렇지 않다.
AJAX는 비동기 통신 방식을 사용한다
비동기 통신의 방법
1.XMLHttpRequest객체 2.fetch API (ES06) 3.Axios 라이브러리 4.제이쿼리(Jquery)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!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>
<script>
/*
fetch("hi.txt").then(function(response){
response.text().then(function(text){
alert(text)
})
})
*/
/*
var promise = fetch("hi.txt").then(function(response){ // 성공했을때 받고싶은 함수
console.log(1)
response.text().then(function(data){
console.log(data)
})
//console.log(response) // status:200 정상적으로 실행됐을때
})
console.log(2)
//console.log(promise)
*/
/*
fetch("hi.json").then(function(response){
//console.log(response.json())
response.json().then(function(data){
console.log(data)
})
})
*/
fetch("hi.json").then(function(response){ //hi.json 파일을 불러온다
//불러오는 것을 성공하면 callback 함수 실행
return response.json() //response안의 json함수를 통해 hi.json 정보 얻기
}).then(function(data){ //json 형태의 data {"id":"chew123"}에서 id의 value값만 뽑아내기
return data.id //id value값만을 리턴하여 콘솔에 출력
}).then(function(data){ //결과= chew123
console.log(data)
})
</script>
</body>
</html>
AJAX 외부데이터 받아오기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!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>
<script>
function ajax(){
fetch("https://yts.mx/api/v2/list_movies.json?sort_by=year&order_by=desc").then(function(response){
//https://yts.mx/api/v2/list_movies.json 에서 json 데이터 받아오기
if(response.status != 200){
alert("서버와 통신에 실패했습니다.")
}else{
return response.json();
//response에성공했을때 json불러오기
}
}).then(function(data){
//data값에 json 데이터 저장
var moviesData = data.data.movies;
//data이름으로 받아온 json 데이터 값의 data 내의 movies값 불러오기
for(var i=0; i<moviesData.length; i++){
//console.log(moviesData[i]);
//반복문 돌려서 json 데이터 값을 모두 불러오기
var title = moviesData[i].title;
var year = moviesData[i].year;
var img = moviesData[i].medium_cover_image;
var summary = moviesData[i].summary;
var genres = moviesData[i].genres;
console.log(title,year,img,summary,genres);
}
})
}
(function(){
ajax();
})();
</script>
</body>
</html>
AJAX 외부데이터 화면에 처리하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!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>
<style>
* {margin: 0; padding:0;}
ul, li {list-style:none;}
.mainTitle {text-align: center;}
.movieList {overflow: hidden; width: 80%; margin: 0 auto;}
.movieList .movie {float:left; width:33.33333%; height: 300px; position: relative;}
.movie img {width: 100px; position: absolute; top:0; left:0;}
.inner {padding-left: 100px;}
.inner .genres li {display: inline-block;}
.inner .summary {overflow:scroll; height: 100px;}
</style>
</head>
<body>
<div class="mainTitle">
<h3>영화 리스트</h3>
</div>
<div class="movieList">
<!--
<div class="movie">
<img src="##" />
<div class="inner">
<h3 class="title">제목</h3>
<h3 class="year">개봉일</h3>
<ul class="genres">
<li>list1</li>
<li>list2</li>
</ul>
<p class="summary">내용</p>
</div>
</div>
-->
</div>
<script>
function ajax(){
fetch("https://yts.mx/api/v2/list_movies.json?sort_by=year&order_by=desc").then(function(response){
//https://yts.mx/api/v2/list_movies.json 에서 json 데이터 받아오기
if(response.status != 200){
alert("서버와 통신에 실패했습니다.")
}else{
return response.json();
//response에성공했을때 json불러오기
}
}).then(function(data){
//data값에 json 데이터 저장
var moviesData = data.data.movies;
//data이름으로 받아온 json 데이터 값의 data 내의 movies값 불러오기
var movieList = document.querySelector(".movieList")
var tag = ""; //html 태그를 저장 할 변수
for(var i=0; i<moviesData.length; i++){
//console.log(moviesData[i]);
//반복문 돌려서 json 데이터 값을 모두 불러오기
var title = moviesData[i].title;
var year = moviesData[i].year;
var img = moviesData[i].medium_cover_image;
var summary = moviesData[i].summary;
var genres = moviesData[i].genres;
console.log(title,year,img,summary,genres);
//tag안에 html 태그를 넣는 방식으로 html 조립
tag += '<div class="movie">';
tag += '<img src="'+ img +'" />';
tag += '<div class="inner">';
tag += '<h3 class="title">'+ title +'</h3>';
tag += '<h3 class="year">'+year+'</h3>';
tag += '<ul class="genres">';
for(var k in genres){
tag += '<li>'+genres[k]+'</li>';
}
tag += '</ul>'
tag += '<p class="summary">'+summary+'</p>'
tag += '</div>'
tag += '</div>'
}
movieList.innerHTML = tag;
// innerHTML을 통해 tag를 넣어 html 화면에서 처리하기
})
}
(function(){
ajax();
})();
</script>
</body>
</html>