바닥코딩
Ajax 본문
Ajax?
이전에 node.js 웹 실시간 데이터 데시보드 만들기에 포스팅 했던 내용과 유사합니다
https://dkkim2318.tistory.com/25?category=784731
node.js 웹서버 프로젝트 실시간 데이터 dashboard 만들기 3(ejs & Ajax)
ejs? ejs란 Embedded JavaScript의 약자로 쉽게 말하자면 자바스크립트가 내장 되어 있는 html 파일을 의미한다 html 에서 코딩을 해본 사람들은 알겠지만 html 문서 자체에서도 javascript 문장은
ajax는 Asynchronous Javascript and XML 의 약자로 자바스크립트를 활용해 서버와 비동기적으로 통신하는 방식인데 이때 XML로 데이터를 던져 준다 하지만 최근에는 XML 보다는 JSON을 더 많이 사용하는 추세입니다.
이전 node.js 웹서버 프로젝트 실시간 데이터 dash보드를 만들 때에는 xhr(xmlHttpRequest)를 사용해 서버와 통신했지만 jQuery에서는 $.ajax를 api를 사용해서 데이터를 통신한다 (xhr api가 자동으로 호출 됩니다) ajax를 해보기 전에 주요속성에 대해 알아보면
- data : 서버에 전송할 데이터 , key/value 형식을 가진다
- dataType : 서버가리턴하는 데이터 타입(xml,json. script, html 등등)
- type : 서버로 전송하는 데이터의 타입(POST, GET 방식 등등)
- url : 데이터를 전송할 url
- success : ajax 통신을 성공했을 때 호출된 이벤트 핸들러 함수
등이 있다 ajax 코드는 w3school 에 있는 예제를 사용하겠습니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "demo_test.txt", success: function(result){
$("#div1").html(result);
}});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
위와 같은 코드를 삽입하게 되면 button이 클릭 되었을 떄 id 값이 div1인 곳에다 html 테그를 삽입한다 success 속송에 들어가야할 함수를 정의해주고 url과 데이터 타입등을 통해 주고 받을 데이터 속성을 지정해 주면 됩니다.
↓
'JavaScript > JQuery' 카테고리의 다른 글
| 엘리먼트를 제어하는 법 (0) | 2020.03.09 |
|---|---|
| event (0) | 2020.03.09 |
| chain, traversing (0) | 2020.03.09 |
| 선택자 (0) | 2020.03.06 |
| [tool 소개]sublime Text3 (0) | 2020.03.06 |
