TIL(Web)-2020.12.17(ajax)

오늘은 비동기 통신방식인 ajax를 학습하였습니다

Today I Learned

• AJAX

페이지 요청하기

• 동기형 요청

function showDialog(url){
    var request = new [window.]XMLHttpRequest();
    //var request = new ActiveXObjext("Microsoft.XMLHTTP");
    request.open("GET",url,false);
    request.send(null);
    
    alert(request.responseText);
}

• XMLHttpRequest : window객체가 갖고있는 통신을 위한 메소드
  • XML에서 Http로 Request(요청)를 하여 정보를 가져올 수 있도록 하는 기능
• cross origin : 외부 서버에 접근하는걸 차단함. 헤더에 cross origin을 허가하는 정보가 있다면 가능.(허가는 제공자가 해주는것)
  • local <-> local (O)
  • local <-> naver (X)
• xhr.open("GET","/data.txt",false);
  • get방식으로 data.txt경로에 요청한다.
  • false : 동기, true : 비동기
• 비동기형 요청
  • 요청을 하고, 다른일을 하다가 요청이 완료되었을때 그 일을 수행하게끔 함.
  • 그 일을 수행하게끔 위임 된 함수를 콜백(callback)함수라고 함.
  • xhr.onreadystatechange : xhr의 readyState의 상태가 변화할때 실행함
    • xhr.readyState
      • 0 : unsent
      • 1 : opened
      • 2 : headers received
      • 3 : loading
      • 4 : done

오늘은 ajax 에 대하여 학습하였습니다.