Ajax
Asynchronous JavaScript and XML의 약자로, Ajax 가 등장하기 이전에는 웹 브라우저가 어떤 정보를 요청하면 서버는 해당 정보를 포함한 페이지 전체를 전달해 주었다. 웹 브라우저는 서버로부터 받은 마크업 데이터(HTML)를 브라우저 창에 렌더링하는 일을 했다. 이 방법은 웹 브라우저에게도, 서버에게도 서로 불편했는데 브라우저는 매번 똑같은 레이아웃의 페이지를 처음부터 다시 렌더링해야 했고 서버 역시 매번 같은 페이지를 렌더링(이 경우에는 HTML 파일 생성)해야 해서 서로 부담이 되었다. Ajax 기술을 사용하지 않는 사이트가 특유의 깜빡거림 현상이 생기는 이유가 매번 페이지를 싹 지우고 처음부터 다시 모든 것을 그려내기 때문.
Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다. 즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다. 이때 서버와는 JSON, XML, HTML, 텍스트 파일 등 다양한 형태의 데이터를 주고받을 수 있다.
로드 함수
.load() | jQuery API Documentation
Description: Load data from the server and place the returned HTML into the matched elements. Note: Prior to jQuery 3.0, the event handling suite also had a method named .load(). Older versions of jQuery determined which method to fire based on the set of
api.jquery.com
실습하기
jQuery-review1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery - 이벤트</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<header>
<h1>jquery Ajax</h1>
</header>
<!-- <div id="contents">
<ul class="people">
<li>첫번째</li>
<li>두번째</li>
</ul>
</div> -->
<div id="container">
<div id="result"></div>
<ul id="users"></ul>
</div>
<script>
// $("#contents ul.people li").each(function(){
// //console.log($(this)); 태그만
// console.log($(this).text()); //텍스트만
// });
//$('#result').load('test.html');
// $('#result').load('test.html', function (
// responseTxt, statusTxt, xhr) {
// if (statusTxt == 'success') {
// alert('이상없음');
// } else if (statusTxt == 'error') {
// alert('에러: ' + xhr.statusText);
// }
// });
// $.get('test.html', function(data){ //메소드는 점을 찍는다.
// $('#result').html(data);
// });
// $.getJSON('user.json', function(data){
// $.each(data, function(i, user){
// console.log(i , user); //0 Object 1 Object ...
// $('ul#users').append(`<li> ${user.first_name} </li>`);
// });
// });
$.ajax({
method: 'GET', // HTTP 요청 방식(GET, POST)
url: 'https://jsonplaceholder.typicode.com/posts', // 서버의 URL 주소
dataType: 'json' // 서버에서 보내줄 데이터의 타입
}).done(function (data) { // HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.
console.log(data);
$.each(data, function (i, item) { //each(매개변수, 함수)
$('#result').append(`<h3>${item.title}</h3><p>${item.body}</p>`)
});
});
</script>
</body>
</html>
text.html
hello world
<!-- text.html 내용 -->
user.json
[
{
"id": 1,
"first_name": "Jeanette",
"last_name": "Penddreth",
"email": "jpenddreth0@census.gov",
"gender": "Female",
"ip_address": "26.58.193.2"
},
{
"id": 2,
"first_name": "Giavani",
"last_name": "Frediani",
"email": "gfrediani1@senate.gov",
"gender": "Male",
"ip_address": "229.179.4.212"
},
{
"id": 3,
"first_name": "Noell",
"last_name": "Bea",
"email": "nbea2@imageshack.us",
"gender": "Female",
"ip_address": "180.66.162.255"
},
{
"id": 4,
"first_name": "Willard",
"last_name": "Valek",
"email": "wvalek3@vk.com",
"gender": "Male",
"ip_address": "67.76.188.26"
}
]
실습 2 : 외부 데이터로 json 객체를 받아서 출력하기
https://jsonplaceholder.typicode.com/posts
JSON(JavaScript Object Notation)
JSON은 경량(Lightweight)의 DATA-교환 형식으로 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다.
'Javascript > JQuery' 카테고리의 다른 글
| jQuery 제이쿼리 문서 객체 선택자 (2) | 2019.12.06 |
|---|---|
| 오류: 다른 요소(element)도 같이 선택되는 문제 (1) | 2019.12.05 |
| jQuery (4) 애니메이션 효과 (0) | 2019.06.28 |
| jQuery (3) 돔 (DOM) (0) | 2019.06.28 |
| jQuery (2) 제이쿼리 이벤트 (0) | 2019.06.28 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
