readyState 0 (uninitialized):request가 초기화되지 않음 1 (loading):(서버와의 연결이 성사됨 2 (loaded):서버가 request를 받음 3 (interactive):(request(요청)을 처리하는 중 4 (complete) :request에 대한 처리가 끝났으며 응답할 준비가 완료됨
통신은 최소 2개의 객체를 통신하는 것이므로 서버의 응답코드도 확인해야한다.
서버의 응답코드 1xx (정보): 요청을 받았으며 프로세스를 계속한다 2xx (성공): 요청을 성공적으로 받았으며 인식했고 수용하였다 3xx (리다이렉션): 요청 완료를 위해 추가 작업 조치가 필요하다 4xx (클라이언트 오류): 요청의 문법이 잘못되었거나 요청을 처리할 수 없다 5xx (서버 오류): 서버가 명백히 유효한 요청에 대해 충족을 실패했다
<script>
v_ajax.onreadystatechange = function () {
if (v_ajax.readyState == 4 && v_ajax.status == 200) {
alert(v_ajax.responseText);
}
}
console.log("체크")
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX시작</title>
</head>
<body>
<script>
// AJAX Asynchronouse JavaScript XML(XML->JSON의 시대)
// 낯설어도 일단 1번은 외워야 함
// 1. 통신객체 생성. 통신을 대신해줄 사람
var v_ajax = new XMLHttpRequest(); // 통신객체생성, 대신 통신해줄 사람
// 2. 통신방법, 어떤것과 연결을 할 것인지, 비동기여부
// v_ajax.open("메소드", "URL", "비동기여부");
// 통신 메소드는 get과 post가 존재
// URL은 일단 우리쪽 서버에 있는 data.txt
// 통신 방식은 무조건 비동기방식
v_ajax.open("get", "data.txt", true); //통신 방식은 무조건 비동기방식
// 3. 실행하라
v_ajax.send();
// 4. 통신객체의 state변화를 체크
v_ajax.onreadystatechange = function () {
// console.log(v_ajax.readyState); //통신객체의 상태값
// 상태값 0,1,2,3에는 관심이 없음
// 완료되었다는 4번에만 관심이 있음
// 통신의 최소 2개의 객체를 통신하는 것이므로 서버의 응답코드도 확인
if (v_ajax.readyState == 4 && v_ajax.status == 200) {
alert(v_ajax.responseText); //서버로부터 전달받은 내용
}
}
// 체크가 먼저 나오기 때문에 비동기 방식임을 알 수 있음
console.log("체크")
</script>
</body>
</html>
