ajax 문법

자바스크립트로 ajax쓰기

 

1.get방식

function send(){

  var xhr = new XMLHttpRequest();

  xhr.open("GET", "data.jsp"); //데이터를 전달할 때에는 "data.jsp?쿼리스트링"으로 전달.

  xhr.send();

 

  xhr.onreadystatechange = function(){ //현재 상태가 변경될 때마다 함수 실행
    if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){ //준비 상태가 done일 때와 성공했을 때만 들어옴.
      document.getElementById("result").innerHTML = xhr.responseText;
    }
  }

}

 

2.post방식

function send(){

  var xhr = new XMLHttpRequest();

  xhr.open("POST", "data.jsp");

  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //form데이터로 전송하는 방식
//전달해야 할 데이터의 타입을 정해줘야 함.

//form데이터(form태그에서 input태그에 작성한 것처럼 보낸다), json, xml 자주 쓰이는 방식.
//content-type: 헤더의 속성

  xhr.send(""); //전달할 데이터 작성, 전송하는 방식에 따라 데이터 쓰는 형식도 맞춰서 보내야 함.

                          form데이터 방식 > "name1=유재석&name2=박명수"

                          josn 방식 > "{name: '유재석'}"

 

  xhr.onreadystatechange = function(){ //현재 상태가 변경될 때마다 함수 실행
    if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){ //준비 상태가 done일 때와 성공했을 때만 들어옴.
      document.getElementById("result").innerHTML = xhr.responseText;
    }
  }

}

 

제이쿼리(jQuery)로 ajax쓰기