Ajax( Asynchronous JavaScript and XML / XMLHttpRequest )

Front/js 2024. 7. 9. 17:23

▤ 목차

아래 정리는 해당 코드를 기반으로 진행한다.

[ 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://hongong.hanbit.co.kr/http-%EC%83%81%ED%83%9C-%EC%BD%94%EB%93%9C-%ED%91%9C-1xx-5xx-%EC%A0%84%EC%B2%B4-%EC%9A%94%EC%95%BD-%EC%A0%95%EB%A6%AC/

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을 객체화하는데 때문에 배열처리가 가능해진다.

😊정리

읽어보기 좋은 블로그

https://www.freecodecamp.org/korean/news/javascripteseo-gajang-jal-alryeojin-http-yoceong-bangbeob-2/

JavaScript에서 가장 잘 알려진 HTTP 요청 방법

JavaScript는 서버 단의 자원으로부터 데이터를 전송받거나 전송할 수 있는 HTTP 요청을 만들 수 있는 훌륭한 모듈(modules)과 메서드(method)가 있습니다. 이 글에서는, JavaScript 내에서 잘 알려진 여러 HT

www.freecodecamp.org

'Front > js' 카테고리의 다른 글

Ajax 사용, DB 읽어와서 웹브라우저에 보이기(레거시 방식 jsp) (2)	2024.07.10
Ajax) get방식/ post 방식 데이터를 받기 (0)	2024.07.10
JavaScript) 모듈이란? (0)	2024.07.08
객체에 대해서(생성과 중첩 객체) (2)	2024.07.05
javaScript 클래스(+ 프로퍼티 getter와 setter / 상속) (0)	2024.07.04

ABOUT ME

hi_hahahoho hi_hahahoho

✔ Ajax ( Asynchronous JavaScript and XML )

⌨ 기본형식(txt문서) _ javascript 작성

💻 readyState

💻 status

✔CVS 파일

⌨ 코드

✔ XML 파일

⌨ 용도

👏 객체명.responseXML

✔JSON 파일

⌨ 코드

👏

😊정리

'Front > js' 카테고리의 다른 글

티스토리툴바

ABOUT ME

✔ Ajax ( Asynchronous JavaScript and XML )

⌨ 기본형식(txt문서) _ javascript 작성

💻 readyState

💻 status

✔CVS 파일

⌨ 코드

✔ XML 파일

⌨ 용도

👏 객체명.responseXML

✔JSON 파일

⌨ 코드

👏

😊정리

'Front > js' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바