비동기 통신, AJAX - javascript

화면은 그대로 있고 서버에서 데이터만 가져와서 작업을 하는 것. 기술

 

ajax가 개발된 이유

 

서버에 부하를 줄이기 위해서. 전체 페이지가 아닌 페이지의 일부분 데이터를 로딩.

 

--------------java script ---------------------------------

 

function createRequest(){
 if(window.XMLHttpRequest){
  //win 7이상 , 크롬 등등
  request = new XMLHttpRequest();
 } else if(window.ActiveXObject){
  //win 7미만
  request = new ActiveXObject("Microsoft.XMLHTTP");
 }
 return request;
 
}

function ajax(){
 //가장먼저 request객체를 얻어와야함.
 request = createRequest();
 
 if(request == null) alert("Unable to create request");
 else {
  //servlet주소를 쏴준다. Project Name
  var url = "test.ajax";
  // 함수 호출.
  request.onreadystatechange = show;
  //실제로 통신을 위해 GET방식으로 열어주는 것.
  //비동기화 안에서도 동기화true와 비동기화 false로 나눠진다.
  request.open("GET", url, true);
  //get방식에서는 주소에 넣어주고 post방식은 아래와 같이 한다.
  request.send(null);
  
  //request.open("POST", url, true);
  //request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  //request.send("value=" + "10" + "&value2=" + "20");
 }
}
function show(){
 if(request.readyState == 4){
  if(request.status == 200){
   //서버에서 printwrite로 심어놓은 값을 받는 것.
   var id = request.responseText;
   document.getElementById("content").innerHTML = "당신의 아이디는? " + id;
  }
 }
}