👀 [JavaScript] Ajax 사용법 알아보기

전주은·2022년 11월 23일

🙄 Ajax 사용법 알아보기

✔ HTTP request을 어떻게 만드는가

Ajax을 사용하기 위해 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보냅니다. 따라서 요청사항(request)을 XMLHttpRequest 객체를 호출하여 인스턴스를 생성해줍니다.

const httpRequest = new XMLHttpRequest();
httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();

여기서 open()메소드는 3개의 매개변수를 가지는데, 첫번째는 get,post,head,.. 등의 요청방법을 결정하는 매개변수입니다. 두번째는 요청을 보낼 URL입니다. 세번째는 optional parameter로, default값은 true입니다. 비동기적인처리를 할것인지 아닌지를 결정한는 곳입니다.
send()메소드는 원하는 데이터를 ()안에 넣어 보낼 수 있습니다. 만약 post방식으로 보내고 싶다면,서버가 알아들을 수 있는 query string이나 XML,JSON같은 것을 쓰면 됩니다.

그리고나서, 서버에 요청한 것에 대한 상태변화를 알려주는 onreadystatechange property를 이용하여 돌아온 데이터를 처리하는 함수를 호출하면 됩니다.

function handler() {
  //돌아온 데이터 처리하는 곳
}

httpRequest.onreadystatechange = handler;

이때 함수 이름이 필요없기 때문에 익명함수로 써도 상관없습니다.

httpRequest.onreadystatechange = () => {
    //돌아온 데이터 처리하는 곳
};

자 이제 이것들을 합쳐서 보면 다음과 같습니다!

const httpRequest = new XMLHttpRequest();
httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();
httpRequest.onreadystatechange = () => {
    //돌아온 데이터 처리하는 곳
};

✔ 서버에게 받은 데이터를 어떻게 처리하는가?

이제 이 안에들어갈 내용을 한번 살펴보겠습니다!

httpRequest.onreadystatechange = () => {
    //돌아온 데이터 처리하는 곳!! 바로 이곳!!
};

당연히 서버에서 요청이 완료되고 response가 준비 되었을때(httpRequest.readyState === XMLHttpRequest.DONE) 그리고 HTTP 응답상태 코드도 정상적일때(httpRequest.status === 200), 우리는 웹페이지 일부 내용을 티안나게 바꾸고 싶기때문에 다음과 같은 조건문을 작성합니다.

httpRequest.onreadystatechange = () => {
    if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) {
    //성공 했을때
	} else {
   	//실패 했을때
	}
};

XMLHTTPRequest.readyState

0 (uninitialized) or (request not initialized)
1 (loading) or (server connection established)
2 (loaded) or (request received)
3 (interactive) or (processing request)
4 (complete) or (request finished and response is ready) = XMLHttpRequest.DONE

HTTP response status codes

Informational responses (100 – 199)
Successful responses (200 – 299)
Redirection messages (300 – 399)
Client error responses (400 – 499)
Server error responses (500 – 599)

참고로 조건문에서 &&연산자를 통해 httpRequest.readyState 0,1,2,3단계를 생략할 수있어서 앞에 두는 것이 더 효율적 이라고 합니다.

✔ 예제로 이해해보기 - get

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script>
	function sendRequest(){
		const xhr = new XMLHttpRequest();
		xhr.open('get','4_ajax_ok.jsp?userid=apple&userpw=1234',true);
		xhr.send();
		
		xhr.onreadystatechange = function(){
			//돌아온 데이터 처리하는 곳
			//XMLHttpRequest.DONE -> readyState:4
			
			if(xhr.readyState == XMLHttpRequest.DONE && xhr.status ==200){
				document.getElementById('text').innerHTML = xhr.responseText;
				
			}	
		}
	}
</script>
</head>
<body>
	<h2>Ajax</h2>
	<p><button onclick="sendRequest()">요청 보내기</button></p>
	<hr>
	<p id="text"></p>
</body>
</html>

//ajax_ok코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String userid = request.getParameter("userid");
	String userpw = request.getParameter("userpw");
	
	out.println("아이디는"+userid+"이며, 비밀번호는"+ userpw + "입니다.");
%>

사용자가 "요청 보내기"버튼을 누릅니다.
이벤트 핸들러가 sendRequest()함수를 호출합니다.
자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보냅니다.
- get방식을 통해 url에 userid와 userpw를 보냈습니다.
서버는 처리한 결과를 텍스트로 웹 브라우저에 전달 합니다.
document.getElementById('text').innerHTML = xhr.responseText;
해당 텍스트는 innerHTML을 통해 text id를 가진 요소에 출력됩니다

✔ 예제로 이해해보기 - post

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script>
  
  	document.getElementById("ajaxButton").onclick = () => {
  	const userName = document.getElementById("ajaxTextbox").value;
 	makeRequest('test.php', userName);
	};

	function makeRequest(url, userName) {
        httpRequest = new XMLHttpRequest();

      	if (!httpRequest) {
        	alert("Giving up :( Cannot create an XMLHTTP instance");
        	return false;
      	}
      
 		httpRequest.onreadystatechange = alertContents;
 		httpRequest.open('POST', url);
    	httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 		httpRequest.send(`userName=${encodeURIComponent(userName)}`);
      
     	function alertContents() {
	    	if (httpRequest.readyState === XMLHttpRequest.DONE) {
    			if (httpRequest.status === 200) {
      			const response = JSON.parse(httpRequest.responseText);
      			alert(response.computedString);
    			} else {
      			alert('There was a problem with the request.');
    			}
  			}
		} 
	}
</script>
</head>
<body>
	<label>Your name:<input type="text" id="ajaxTextbox" /></label>
	<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
      Make a request</span>
</body>
</html>

//test.php
$name = $_POST['userName'] ?? 'no name';
$computedString = "Hi, " . $name . "!";
$array = ['userName' => $name, 'computedString' => $computedString];
echo json_encode($array);

✔ Ajax을 사용하는 3가지 방식

1.옛날 JS 방식

	const ajax = new XMLHttpRequest();
	ajax.onreadystatechange = function(){
      if ((httpRequest.readyState == 4 && httpRequest.status === 200) {
        //서버에서 받은 데이터 처리하는 곳
      }
  	}
  	ajax.open("GET",:"url주소",true;
  	ajax.send()

요즘 JS 방식

	fetch("url주소");
		.then(response) =>{	//콜백함수
          if(!response.ok){throw new Error('400아니면 500 에러남')}
          return response.json()
        })
        .then((결과) =>{
          //결과 처리하는곳
        })
		.catch() =>	{
          //에러 발생시 코드
        }

	function response(){
    ...
    }

외부 라이브러리 방식

jQuery를 사용한다. $.ajax();
react나 뷰환경에서 axios 설치해서 씀

MDN Ajax
MDN HTTP response status codes
코딩애플

전주은

이전 포스트

👀 [JavaScript] Ajax 원리 알아보기

다음 포스트

👀 [JavaScript] Ajax 사용법 알아보기

🙄 Ajax 사용법 알아보기

✔ HTTP request을 어떻게 만드는가

✔ 서버에게 받은 데이터를 어떻게 처리하는가?

XMLHTTPRequest.readyState

HTTP response status codes

✔ 예제로 이해해보기 - get

✔ 예제로 이해해보기 - post

✔ Ajax을 사용하는 3가지 방식

👀 [JavaScript] Ajax 원리 알아보기

👀 [JavaScript] Ajax 사용법 알아보기

0개의 댓글