ajax란 웹페이지에서 바로 웹서버로 전달할 수 있는 기술을 말한다.
아래 기본적인 ajax 코드를 분석해보자
https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_first
W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML =
this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
</script>
</body>
</html>ajax 만드는 순서
| 1.button의 함수, loadDoc() 이 작동할 수 있도록 큰 틀을 만들어 준다. 2.XMLHttpRequest() 함수를 불러온다. |
여기서 XMLHttpRequest()는 어떤 역할을 할까??
우선, XML의 정의부터 알아야한다.
XML이란 저장되는 데이터의 구조를 설명하기위한 언어이다.
데이터를 저장하고 전달할 목적으로 만들어졌다.
예시)
<?xml version="1.0" encoding="UTF-8"?>
<programming_languages>
<language>
<name>HTML</name>
<category>web</category>
<developer>W3C</developer>
<version status="working draft">5.1</version>
<priority rating="1">high</priority>
</language>
</programming_languages>
XMLHttpRequest 객체는 서버로부터 XML 데이터를 전송받아 처리하는데 사용된다.
즉, 서버 안에서 데이터의 구조를 전달하는 xml언어가 있기 때문에, 웹페이지 안에서 데이터 전송 전달이 가능해진다.
Ajax 사용의 기본틀이다 !!
http://www.tcpschool.com/xml/xml_dom_xmlHttpRequest
'Development (국비 복습 ) > JavaScript' 카테고리의 다른 글
| [Ajax] open() send()로 서버에 데이터 전송 (0) | 2023.02.11 |
|---|---|
| [Ajax] .onload() 함수란 무엇일까? (0) | 2023.02.11 |
| [Ajax] ajax 기본 (0) | 2023.02.10 |
| 객체 지향 언어에서 인스턴스(Instance)란 무엇일까? (0) | 2023.02.07 |
| this키워드와 slice() (2) | 2023.02.07 |
댓글