자바스크립트 비동기 Ajax 기본코드

자바스크립트 비동기 Ajax 기본코드

자바스크립트 비동기 통신에서 많이 사용하고 있는 Ajax 기본코드입니다. 이 코드를 기본으로 여기에서 살을 더 붙여 나가면 되는 것입니다.

서버에게 서버에 존재하는 cadalog.xml 이라는 파일의 내용을 보내달라는 내용입니다.

먼저 cadalog.xml 파일의 내용을 보겠습니다.

<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
  <CD>
    <TITLE>Hide your heart</TITLE>
    <ARTIST>Bonnie Tyler</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS Records</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1988</YEAR>
  </CD>
</CATALOG>

아래는 클라이언트측에서 서버에게 요청하는 index.html 파일입니다.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <h2>The XMLHttpRequest Object</h2>
  <ul id="demo"></ul>

  <script>
    var xhttp, xmlDoc, txt, x, i;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
      if(this.readyState == 4 && this.status == 200){
        xmlDoc = this.responseXML;
        txt = '';
        x = xmlDoc.getElementsByTagName('ARTIST');
        
        for(i=0;i<x.length;i++){
          txt = txt +'<li>' + x[i].childNodes[0].nodeValue + '</li>';
        }
        document.getElementById('demo').innerHTML = txt;
      }
    }

    xhttp.open("GET","cd_catalog.xml",true);
    xhttp.send();
  </script>
</body>
</html>

XMLHttpRequest 기본 코드

위의 1~5까지가 기본 코드이니 이것을 먼저 입력하고 나머지는 작업 순서에 따라 살을 붙여 나가면 된다.

  • 1번 : 서버에게 내가 지금 요청을 보낼거라는 신호를 변수에 담는다.
  • 2번 : 서버야 준비가 되었니 준비 되었으면 나에게 신호를 보내줘.
  • 3번 : 만약 서버에 준비가 완료되었고(4), 내가 요청한 파일이 존재하면(200) .. 아래 작업 수행
  • 4번 : 내가 요청할 파일은 “yy.xml”이고 get방식으로 요청하는 것이고, 비동기(true)로 작업해줘~ false이면 동기식으로 작업하라는 말인가? 이건 아직 잘 몰라요.

5번 : 요청한 내용을 보내줘.

코드 작성 순서는 1번,2번,4번,5번 일단 써놓고 3번부터 작업 순서대로 하면 됨.

Tags: , , ,

답글 남기기

4 + 8 =