AJAX

일반 Http통신(동기식 통신)

• 요청시에는 컨텐츠가 표시되지 않음
  • 새 요청을 보낼 수 없음
• 서버와 클라이언트가 동기식 통신을 하기 때문에 
  • 화면 전체가 리로딩 된다. 
    • 컨텐츠가 표시되지 않은다. 
    • 따로 누를 수 있는게 없다. 
  • 응답이 올 때까지 대기상태이다. 
  • 요청->응답->요청->응답의 순서로만 동작한다. 
• 무조건 응답이 와야한다. 
• 서버도 요청이 오지 않으면 응답을 보낼 수 없다. 
• 웹브라우저가 요청보내기와 응답받기를 담당한다. 
• 전체에서 이 방식을 사용한다. 

• 

  컨텐츠가 표시되지 않는 시간이 존재하지 않는다. 
• 화면표시가 되어 있기 때문에 언제든지 새로운 요청을 할 수 있다. 
• 화면전체가 리로딩 되지 않는다. 
• 요청에 대한 응답을 기다리지 않고, 새요청을 웹서버로 보낼 수 있다. 
• 요청->응답->요청->응답 순서를 지켜서 서버와 통신할 필요가 없다. 
  • 요청은 2번이상 가능하다. 
• XHR은 보내기/응답받기를 담당한다. 
• 서버와 클라이언트가 비동기식 통신을 한다. 
• 화면의 특정 부분을 바꾸고싶을때, html일부분을 갱신하고 싶을 때 사용한다. 
  • 검색창부분만 특정부분으로 갱신할 때 처럼 사용한다. 

XMLHttpRequest로 웹 서버와 비동기식 통신하기 

• function renAjax(){
  
  //서버와 비동기식 통신 시작
  //1.XMLHttpRequest 객체 
  var xhr = new XMLHttpRequest();
  
  //2. XMLHttpRequest객체의 상태가 변할 때마다 실행할 메소드 등록하기 
  xhr.onreadystatechange = function(){
  if(xhr.readystate == 4 && xhr.status == 200){
  
  //5. XMLHttpRequest의 responseText프로퍼티에 저장된 응답데이터를 가져오기 
  var jsonText = xhr.responseTexr;
  
  //6.jsonText를 자바스크립트 객체/ 배열로 변환하기 
  var products = JSON.parse(jsonText);
  
  //7.응답데이터로 HTML컨텐츠를 생성하기 
  var htmlContent="";
  products.forEach(item => {
  htmlContent+= "<tr>";
  htmlContent+= "<td>"+item.no+"</td>";
  htmlContent+= "<td>"+item.name+"</td>";
  htmlContent+= "<td>"+item.company+"</td>";
  htmlContent+= "<td>"+item.price+"</td>";
  htmlContent+= "<td>"+item.discountPrice+"</td>";
  htmlContent+= "<tr>";
  });
  // 8.생성된 HTML컨텐츠를 화면의 특정부분에 추가한다.
  var tbody = document.querySelector("#table-products tbody");
  tbody.innerHTML = htmlContent;
  }}
  
  
  //3.XMLHttpRequest객체 초기화 
  xhr.open("GET","/script2/product/list.hta");//JSON형태로 저장되어있는 장소
  
  //4.웹서버로 요청보내기 
  xhr.send();