[$.ajax 메서드]
Ajax는 웹페이지에서 새로운 데이터를 보여주고자 할 때 현재 페이지에서 필요한 데이터만 로드하여 웹페이지 전체를 새로고침하는 것이아니라 일부만을 로드하기 위한 기법이다. Ajax는 비동기 처리방식을 사용하여 데이터를 처리한다.
-비동기 처리 방식
웹페이지를 리로드하지 않고 데이터를 불러오는 방식이다. Ajax를 통해서 서버에 요청을 한다면 페이지가 멈추는 것이 아니라 프로그램이 계속 돌아가게 된다. AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 하기 때문에 이 경우, JSON이나 XML형태로 필요한 데이터만 받아 자원과 시간을 아낄 수 있다.
[JSON]
키-값 형식으로 구성된 데이터이다. $.ajax() 메서드를 이용해서 JSON파일을 로드하여 기능을 수행할 수 있다.
-기본문법
[
{"name":"아무무","score1":95,"score2":97},
{"name":"아리","score1":85,"score2":45},
{"name":"티모","score1":46,"score2":63}
]-사용예시
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
$.ajax({
type: "GET", // 데이터를 로드해오는 방식
url: "data1.json", // 로드할 파일이름
dataType: "json", // 현재 다루는 데이터 타입
success: function(data){ // 로드 성공시 수행할 메서드
// function()에 인자를 두면, 로드성공한 json데이터가 저장됨!
var ele = "";
// $.each( 타깃 데이터(로드한 json 데이터) , 수행할 메서드 );
$.each(data,function(){
ele+="<tr>";
ele+="<td>"+this.name+"</td>";
ele+="<td>"+this.score1+"</td>";
ele+="<td>"+this.score2+"</td>";
ele+="</tr>";
});
$("tbody").append(ele);
},
error: function(err){ // 로드 실패시 수행할 메서드
// function()에 인자를 두면, 로드실패시 예외정보가 저장됨!
// 에러의 상태,내용에 대한 메세지 등을 출력
console.log('에러발생!');
console.log(err.status+" | "+err.errText);
}
});
</script>
<form action="" method=></form>
<h1>학생 성적표</h1>
<table border="1">
<thead>
<tr>
<td>학생 이름</td>
<td>중간고사 성적</td>
<td>기말고사 성적</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
참고사이트
https://tutorialpost.apptilus.com/code/posts/js/js-ajax/
JavaScript Ajax와 JSON
Ajax (Async Javascript And XML)는 웹 페이지에서 새로운 데이터를 보여주려고 할 때 웹페이지 전체를 새로고침 하지 않고, 보여주고자 하는 데이터가 포함된 페이지의 일부 만을 로드 하기 위한 기법입
tutorialpost.apptilus.com
'HTML CSS JS' 카테고리의 다른 글
| jQuery) .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드 (0) | 2022.08.11 |
|---|---|
| [HTML, CSS, JS] 회원가입 유효성 검사 (0) | 2022.04.13 |
| day35) [JavaScript] 회원가입 폼 유효성 검사 예제 (0) | 2022.02.17 |
| day34) [JavaScript] addEventListener (0) | 2022.02.17 |
| [JavaScript] 키코드 (0) | 2022.02.15 |
댓글