AJAX로 GET 요청하기: Javascript&Node.js

AJAX?

• 비동기 자바스크립트와 XML (Asynchrounous Javascript And XML)의 줄임말(서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것)
• 포맷: JSON, XML, HTML, 일반 텍스트 등
• 특징
  1. 비동기! (페이지 새로고침 X)
  2. 서버로부터 데이터를 받아서 클라이언트단에서 작업을 수행

STEP 1: HTTP request 만들기

• 목적: 서버로 HTTP request를 보내기 위한 Object가 필요하다. 그걸 위한것이 XMLHttpRequest

var xhttp = new XMLHttpRequest();

xhttp.open("GET", '/product/'+data)

• open(param1, param2, param3):
  1. param1: request method.(GET,POST,PUT,DELETE)
  2. param2: 요청할 URL
  3. param3: (생략가능)비동기식으로 수행 여부. 기본값은 true(비동기)이며 false로 작성 시 동기적으로 작동
  

STEP 2: 서버 응답에 대한 처리

var xhttp = new XMLHttpRequest();

xhttp.onload = function(){
            if(xhttp.status === 200){
                console.log(xhttp.responseText)     // responseText 에는 서버로부터 전송받은 데이터가 담겨있음
                document.getElementById('showResult').innerHTML = xhttp.responseText;
            }
        }

xhttp.open("GET", '/product/'+data)
//xhttp.setRequestHeader('Content-type', 'application/json')	//POST로 데이터 전달 시에 사용
xhttp.send(data)    //서버에 전달할 정보

• onload: 서버로 보낸 요청에 대한 응답 상태 코드 검사
  ststus===200 (서버 응답에서 200번대의 코드는 정상 응답을 받았다는 의미) log를 찍어서 응답이 잘 오는지 확인해주고 있다.
• responseText: 서버에서 응답받은 데이터를 텍스트 문자열로 반환한 것.

STEP 3: 서버에서의 응답

// 비동기 상품 검색
    app.get('/product/:title', function(req, res){
        var title = req.params.title;
        title = "%"+title+"%"

        let conn = mysql.createConnection(conn_info)
        conn.query('select title from sell_product where title like ?',title, (err, result)=>{
            res.json(result)
        })
    })

• req.params: 주소에 포함된 변수를 담음.
  =>ex) http://product/12345 라면 req.params에는 12345가 담겨있음
  =>현재 검색어가 data라는 변수로 저장되어 url에 들어가 있기 때문에(xhttp.open에서 '/product/'+data 부분) req.params.title은 data다!
• res.json: 데이터를 클라이언트단으로 넘겨준다!

🔎전체 코드

//ejs
    <input type="text" id="data" value="" >
    <button type="submit" onclick="select_product()">검색</button>  <!--onclick()함수를 이용해서 버튼 클릭했을 때 이벤트 발생시킴-->
<script>
      
    function select_product(){      //onclick 이벤트 발생했을 때 실행
        var xhttp = new XMLHttpRequest();
        var data = document.getElementById("data").value;
    
        xhttp.onload = function(){
            if(xhttp.status === 200){
                console.log(xhttp.responseText)     // responseText 에는 서버로부터 전송받은 데이터가 담겨있음
                document.getElementById('showResult').innerHTML = xhttp.responseText;
            }
        }
        xhttp.open("GET", '/product/'+data)
        xhttp.send(data)    //서버에 전달할 정보
    }
</script>

    <div id='showResult'>
    </div>

//router
// 비동기 상품 검색
    app.get('/product/:title', function(req, res){
        var title = req.params.title;
        title = "%"+title+"%"

        let conn = mysql.createConnection(conn_info)
        conn.query('select title from sell_product where title like ?',title, (err, result)=>{
            res.json(result)
        })
    })

• 비동기적으로 검색을 하는 코드를 만들어 보았다. 검색어는 onclick 이벤트가 실행되면서 data라는 변수에 담겨서 라우터로 이동한다.
• 라우터에서는 받은 data를 사용하여 원하는 정보를 db에서 찾아 클라이언트로 보내준다.
• 클라이언트에서는 받은 데이터를 DOM객체를 이용하여 화면에 뿌려준다!