Ajax( Asynchronous JavaScript and XML / XMLHttpRequest )
▤ 목차
아래 정리는 해당 코드를 기반으로 진행한다.
[ html파일 ]
</head>
<body>
<h2>Ajax test</h2>
<button id="btnOk">Ajax원리를 찾아서</button>
<br>
<button id="btnOk2">CSV 읽기</button>
<br>
<button id="btnOk3">xml 읽기</button>
<br>
<button id="btnOk4">json 읽기</button>
<hr>
<div id="disp"></div>
</body>
각각의 txt,xml .. 등 파일은 따로 만들고 진행한다.
✔ Ajax ( Asynchronous JavaScript and XML )
웹서버와의 통신을 비동기로 할때 사용한다.
네트워크상 값이 언제 넘어올지 모르기때문에 비동기 상태로 받아야한다.
이름 그대로 JavaScript와 xml파일을 이용하는 비동기 방식을 말한다.
서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있도록 해준다.
최근에는 Json 파일 형식을 주로 사용한다.
xml 파일보다 Json파일을 가져오는 것이 편하기 때문이다.
⌨ 기본형식(txt문서) _ javascript 작성
text 파일을 하나 만든다. 내용은 상관없다.
unction start(){
xhr = new XMLHttpRequest();//0
xhr.open('get','js34text.txt',true); //1
xhr.onreadystatechange = function(){ //2
if(xhr.readyState === 4){
if(xhr.status === 200){
process();
}
}
}
xhr.send(null);//3
}
function process(){
let data = xhr.responseText; //xml 형식 이외의 문서인 경우 responseText를 사용
document.querySelector("#disp").innerHTML = data;
}
기본적인 형식이다.
XMLHttpRequest()는 객체를 만들고 있는데. Ajax를 지원하는 js 객체이다.
객체.open('전송방식', '파일경로/파일명.확장자', true/ false)
(method) XMLHttpRequest.open(method: string, url: string | URL, async: boolean, username?: string, password?: string):
위의 코드는 true는 비동기 방식이다. flase는 동기 방식이다.
ENDPOINT는 API가 서버에서 리소스에 접근할 수 있도록 가능하게 하는 URL이라 할 수 있겠다.
객체.onreadystatechange = function(){} ; 실행 및 행동한다.
객체.readyState 통신 상태를 확인한다. 4가 반환되는 경우, 네트워크 문제없이 작업이 완료된 상태인 것이다.(아래 참고)
객체.status === 200은 서버가 요청을 성공적으로 수행했다는 의미이다.(아래참고)
객체.send() 메서드 요청 실행
💻 readyState
클라이언트의 상태를 반환한다.
💻 status
크게 200,403,404,500 번은 기본적으로 알아둬야한다.
https://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml
✔CVS 파일
cvs 파일을 만든다. 콤마(,)로 이루어진 파일이다.(띄어쓰기x)
행은 enter로 구분하고 열은 콤마로 구분된 파일이다.
1,아이스아메리카노,6500
2,콜드부르,7000
3,카페라떼,8000
⌨ 코드
<script type="text/javascript">
window.onload = ()=>{
document.querySelector("#btnOk2").onclick = start;
}
function start(){
xhr = new XMLHttpRequest();
xhr.open('get','js34csv.txt',true);//csv읽기
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200){
//비동기 상태의 요청
process();
}
}
}
xhr.send(null);
}
function process(){
//csv 파일인 경우
let data = xhr.responseText;
let rowData = data.split(String.fromCharCode(13));// Ascii code 13은 enter
let str ="";
for(let i=0; i < rowData.length; i++){
let colData = rowData[i].split(","); //열구분
for(let j=0; j < colData.length;j++){
str += colData[j] +" ";
}
str += '<br>';
}
document.querySelector("#disp").innerHTML = str;
</script>
✔ XML 파일
- 요소의 이름은 마음대로 지정할 수 있다.
⌨ 용도
xml 파일을 따로 만들고 진행하자.
<item></item> 한 묶음이 한 노드이다.
<script type="text/javascript">
window.onload = ()=>{
document.querySelector("#btnOk3").onclick = start;
}
function start(){
xhr = new XMLHttpRequest();
xhr.open('get','js34.xml',true);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200){
process();
}
}
}
xhr.send(null);
}
let data = xhr.responseXML; //XML 객체를 읽음 dom처리 가능
let itemNode = data.getElementsByTagName("item");
//alert(itemNode.length);
let codeNode = data.getElementsByTagName("code");
let sangNode = data.getElementsByTagName("sang");
let str = "";
for(let i=0; i<itemNode.length; i++){
str+=codeNode[i].childNodes[0].nodeValue+" ";
str+=sangNode[i].firstChild.nodeValue+" ";
str+= codeNode[i].getAttribute("price");
str+="<br>";
}
document.querySelector("#disp").innerHTML = str;
👏 객체명.responseXML
객체명.responseText를 사용하지 않는다.
XML 파일 형식 이외에는 responseText 를 사용한다.
만약, xml파일을 responseText로 읽으면 TEXT파일로 읽기 때문에 dom처리가 불가능하다.
xhr.responseXML 객체를 읽으면 DOM처리가 가능하다.
✔JSON 파일
⌨ 코드
function getFunc(){
//alert('a');
xhr = new XMLHttpRequest();
xhr.open('get','js34.json',true);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200){
process();
}else{
alert("요청 실패:"+ xhr.status);
}
}
}
xhr.send(null);
}
function process(){
let data = xhr.responseText;
let paraseData = JSON.parse(data); //json 객체화
//alert(paraseData.sangpum.length); //3
let str ="";
for(let i =0; i <paraseData.sangpum.length; i++ ){
str += paraseData.sangpum[i].code + " "+
paraseData.sangpum[i].sang+"<br>"
};
document.querySelector("#disp").innerHTML = str;
}
👏
문자열을 json 객체화하는 과정이 필요하다.
JSON.parse(data); 코드가 해당 과정을 json을 객체화하는데 때문에 배열처리가 가능해진다.
😊정리
읽어보기 좋은 블로그
JavaScript에서 가장 잘 알려진 HTTP 요청 방법
JavaScript는 서버 단의 자원으로부터 데이터를 전송받거나 전송할 수 있는 HTTP 요청을 만들 수 있는 훌륭한 모듈(modules)과 메서드(method)가 있습니다. 이 글에서는, JavaScript 내에서 잘 알려진 여러 HT
www.freecodecamp.org