Front end Javascript

AJAX(Asynchronous Javascript And XML)

• 비동기적 웹 서비스를 개발하기 위한 기법
• 쉽게 말해서 페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술

AJAX 요청은 보통 jQuery나 axios 같은 라이브러리를 이용

밑에 코드는 자바스크립트가 기본으로 제공하는 방식으로 요청하는 방법이다.

프론트엔드에는 ES2015+ 코드를 사용할 수 없는 경우(IE)가 있으므로 ES5 사용

<script>
	var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){ //요청에 대한 콜백
    	if(xhr.readyState === xhr.DONE){ // 요청이 완료되고 응답을 기다림
        	if(xhr.status === 200 || xhr.status == 201){ // 응답코드가 200 or 201
            	console.log(xhr.responseText); // 서버에서 보내주는 값 콘솔에 출력
            } else{
            	console.error(xhr.responseText); // 메서드와 주소 설정
            }
        }
    };
    xhr.open('GET', ' 주소설정');
    xhr.send(); // 요청 전송
</script>

onreadystatechange 대신 onload와 onerror로 성공과 실패인 경우를 구별할 수 있다.

<script>
	var xhr = new XMLHttpRequest();
    xhr.onload = function(){ 
        if(xhr.status === 200 || xhr.status == 201){
            console.log(xhr.responseText);
        }     
    };
    xhr.onerror = function(){
    	console.error(xhr.responseText);
    };
    xhr.open('GET', ' 주소설정');
    xhr.send();
</script>

//서버로 데이터(JSON으로)를 같이 보내는 POST 요청의 경우 위 코드에서 3가지를 추가하면 된다.
//#1
	var data={
		name: 'kwon',
    	birth: 1995,
	};
    
//#2 (xhr.open 안에 주소로 json을 받는 주소로 설정 후)
	xhr.setRequestHeader('Content-Type', 'application/json');
//#3 (xhr.send() 대신)
	xhr.send(JSON.stringify(data));

 

FormData

• HTML form 태그의 데이터를 동적으로 제어할 수 있는 기능, 주로 AJAX와 함께 사용된다. 
• send 메서드에 데이터를 넣어서 보낸다.

<script>
	var formData = new FormData();
    formData.append('name', 'zerocho');
    formdata.append('item', 'orange');
    formData.appned('item', 'melon');
    formData.has('item');// true
    formData.has('money');// false
    formData.get('item');// orange
    formData.getAll('item');// ['orange', 'melon']
    formData.append('test', ['hi', 'zero']);
    formData.get('test'); //hi, zero
    formData.delete('test');
    formData.get('test');// null
    formData.set('item', 'apple');
    formData.getAll('item');// ['apple']
</script>

 

encodeURIComponent, decodeURIComponent

AJAX요청을 보낼 때 주소에 한글이 들어가는 경우 서버가 이해못하는 경우 존재. -> 인코딩 필요

보내는 쪽: encodeURIComponent 받는 쪽: decodeURIComponent

ex) xhr.open('GET', 'https://www.~~/api/search/' + encodeURIComponent('노드'));