자바스크립트 ajax의 5가지 상태 소개_기본지식

"Pragmatic ajax (dynamic website staticization) A Web 2.0 Primer"에서 우연히 ReadyStae status에 대한 소개를 보았는데, 이 소개가 매우 실용적이라고 느꼈습니다.

0: (초기화되지 않음) send( ) 메서드가 아직 호출되지 않았습니다.
1: (로드 중) send( ) 메소드가 호출되었으며 요청이 진행 중입니다.
2: (로드됨) send( ) 메소드가 완료되었으며 전체 응답이 수신되었습니다.
3: (대화형) 응답이 구문 분석 중입니다.
4: (완료) 응답이 구문 분석되어 수집 준비가 되었습니다.

0 - (초기화되지 않음) send() 메소드가 아직 호출되지 않았습니다
1 - (로드 중) send() 메소드가 호출되었으며 요청이 전송되고 있습니다
2 - (로딩 완료) send() 메소드가 실행되었으며 모든 응답 내용이 수신되었습니다.
3 - (대화형) 응답 콘텐츠 구문 분석
4 - (완료) 응답 콘텐츠 구문 분석이 완료되었으며 클라이언트에서 호출할 수 있습니다

대부분의 다른 책에서는 이러한 5가지 ReadyState 상태에 대해 명확하지 않습니다. 예를 들어, "Foundations of ajax(Static Dynamic Website)"에서 책의 표 2-2에는 단순히 상태의 "이름"만 나열되어 있습니다. 요청 상태는 0 = 초기화되지 않음, 1입니다. = 로드 중, 2 = 로드됨, 3 = 대화형, 4 = 완료. 그러나 "ajax (dynamic website staticization) in Action"에는 이 5가지 상태에 대한 자세한 내용이 전혀 언급되지 않은 것 같습니다. "Professional ajax(정적 웹 사이트 정적화)"는 만족스럽지 않지만 여전히 장점이 있습니다.

readyState에는 5가지 가능한 값이 있습니다.
0(초기화되지 않음): 객체가 생성되었지만 open() 메서드가 호출되지 않았습니다.
1(로드 중): open() 메서드가 호출되었지만 요청이 전송되지 않았습니다.
2(로드됨): 요청이 전송되었습니다.
3(대화형)
부분 응답을 받았습니다. 4(완료): 모든 데이터를 수신하고 연결이 종료되었습니다.

ReadyState에는 5개의 가능한 값이 있습니다.
0 (초기화되지 않음): (xml(표준화가 가까워지고 있음) HttpRequest) 객체가 생성되었지만 open() 메서드가 호출되지 않았습니다.
1(로드 중): open() 메서드가 호출되었지만 아직 요청이 전송되지 않았습니다.
2(로딩 완료): 요청이 전송되었습니다.
3(대화형): 부분 응답 데이터를 수신할 수 있습니다.
4(완료): 모든 데이터를 수신하고 연결이 종료되었습니다.

"Ajax(정적 웹 사이트 정적화) 이해: JavaScript를 사용하여 리치 인터넷 애플리케이션 생성"에서는 다음 표를 사용하여 설명합니다.

readyState 상태 코드
xml 상태(표준화가 가까워지고 있음) HttpRequest 객체
(0) 초기화되지 않음
초기화되지 않음 객체가 생성되었지만 초기화되지 않았습니다. (open 메소드가 호출되지 않았습니다.)
(xml (표준화가 가까워지고 있음) HttpRequest) 객체가 생성되었으나 초기화되지 않았습니다(아직 open 메소드가 호출되지 않았습니다).
(1) 로딩 중
Loading 객체가 생성되었으나 send 메소드가 호출되지 않았습니다.
(xml (표준화가 가까워지고 있음) HttpRequest) 객체가 생성되었으나 아직 send 메소드가 호출되지 않았습니다.
(2) 로드됨
로딩 완료 send 메소드를 호출했으나 아직 상태 및 헤더를 확인할 수 없습니다.
전송 메소드가 호출되었으며 (HTTP 응답) 상태 및 헤더를 아직 사용할 수 없습니다.
(3) 인터랙티브
상호 작용 일부 데이터가 수신되었습니다. 이 상태에서 부분적인 결과를 얻기 위해 responseBody 및 responseText 속성을 호출하면 상태 및 응답 헤더를 완전히 사용할 수 없기 때문에 오류가 반환됩니다.
일부 데이터가 수신되었습니다. 그러나 이때 부분적인 결과를 얻기 위해 responseBody 및 responseText 속성을 호출하면 아직 상태 및 응답 헤더를 완전히 사용할 수 없기 때문에 오류가 발생합니다.
(4) 완료
완료 모든 데이터가 수신되었으며, 완전한 데이터는 responseBody 및 responseText 속성에서 사용할 수 있습니다.
모든 데이터가 수신되었으며 responseBody 및 responseText 속성에서 전체 데이터를 추출할 수 있습니다.

위 책들에서 ReadyState의 5가지 상태에 대한 소개에 따르면, 수신된 데이터에 대한 분석을 언급하고 있기 때문에 "Pragmatic ajax (dynamic website staticization) A Web 2.0 Primer"가 더 정확하다고 생각합니다. 다른 책에서도 언급한 바 있는데, 이것이 "(2) 로딩 완료"와 "(4) 완료" 사이의 필수 변환 과정, 즉 그 임무가 무엇인지로 "(3) 상호작용" 단계가 존재하는 이유이다. 정리하자면, 이러한 상태를 '상태:과제(목표) 과정 수행(또는 특성)'이라는 표현 방식으로 정의하는 것이 보다 정확하고 이해하기 쉬운 이상적인 설명 방법이 되어야 한다고 생각합니다. 현재 테스트 내용을 요약하면 다음과 같습니다.

readyState 상태설명

(0) 초기화되지 않음
이 단계에서는 xml(표준화가 가까워지고 있음) HttpRequest 객체가 생성되었는지 확인하고 open() 메소드를 호출하여 초기화 해제를 준비합니다. 값이 0이면 개체가 이미 존재한다는 의미입니다. 그렇지 않으면 브라우저에서 개체가 존재하지 않는다는 오류를 보고합니다.

(1)로드
이 단계에서는 xml(표준화가 가까워지고 있음) HttpRequest 객체가 초기화됩니다. 즉, open() 메소드가 호출되고 매개변수(method, url, true)에 따라 객체 상태가 설정됩니다. 그리고 send() 메서드를 호출하여 서버에 요청 보내기를 시작합니다. 값 1은 요청이 서버로 전송되고 있음을 나타냅니다.

(2) 로딩 완료
서버로부터 응답 데이터를 받는 단계입니다. 그러나 얻은 것은 서버 응답의 원시 데이터일 뿐이며 클라이언트에서 직접 사용할 수 없습니다. 값 2는 모든 응답 데이터가 수신되었음을 나타냅니다. 그리고 데이터 분석의 다음 단계를 준비하세요.

(3)상호작용
수신된 서버 측 응답 데이터를 구문 분석하는 단계입니다. 즉, 서버 측 응답 헤더에서 반환된 MIME 유형에 따라 데이터는 responseBody, responseText 또는 responsexml(표준화가 가까워지고 있음) 속성을 통해 접근할 수 있는 형식으로 변환되어 호출 준비가 됩니다. 고객. 상태 3은 데이터가 구문 분석되고 있음을 나타냅니다.

(4) 완료
이 단계에서는 모든 데이터가 클라이언트에서 사용할 수 있는 형식으로 파싱되어 파싱이 완료된 것을 확인합니다. 값 4는 데이터 구문 분석이 완료되었으며 xml(표준화가 가까워지고 있음) HttpRequest 객체의 해당 속성을 통해 데이터를 얻을 수 있음을 나타냅니다.

요약하면 전체 xml의 라이프사이클(표준화가 가까워지고 있음) HttpRequest 객체에는 다음 단계가 포함되어야 합니다.
생성 - 요청 초기화 - 요청 보내기 - 데이터 수신 - 데이터 구문 분석 - 완료

특정 애플리케이션에서는 ReadyState의 5가지 상태(xml 라이프 사이클의 다양한 단계(표준화가 가까워지고 있음) HttpRequest 객체)의 의미를 명확히 함으로써 Ajax(동적 웹 사이트 정적화)의 핵심 미스터리를 제거할 수 있습니다. ) 의미(불분명한 단어 뒤에 숨은 이유는 사물을 신비롭게 만들고 신비감을 조성하기 위한 것, 또는 "사람들을 기절하게 하고 사람들에게 깨닫게 하기 위한 것"입니다.) 본질을 빠르게 파악하는 것은 학습에 대한 좌절을 줄이고 자아를 향상시키는 데 매우 유익합니다. -신뢰.

예를 들어 다음 예를 통해:

코드 복사 코드는 다음과 같습니다.

//배열선언
var states = ["초기화 중...",
"요청 초기화 중...성공했습니다!
요청을 보내는 중...",
"성공!
데이터를 받는 중...",
"됐어요!
데이터를 구문 분석하는 중...",
"됐어요!
”];

//콜백 함수 내부의 코드 조각
if (xml(표준화가 가까워지고 있습니다)Http.readyState==4)
{
var span = document.createElement("span");
span.innerHTML = states[xml(표준화가 가까워지고 있음)Http.readyState];
document.body.appendChild(span);

if (xml(표준화가 가까워지고 있음)Http.status == 200)
{
var xml (표준화가 가까워지고 있습니다) doc = xml (표준화가 가까워지고 있습니다) Http.responsexml (표준화가 가까워지고 있습니다)
//기타 코드
}

//메모리 누수를 방지하려면 파기하는 것을 잊지 마세요
xml (표준화가 가까워지고 있음)Http = null;
}그밖에{
var span = document.createElement("span");
span.innerHTML = states[xml(표준화가 가까워지고 있음)Http.readyState];
document.body.appendChild(span);
}결과는 다음과 같습니다.

요청 초기화 중...성공!
요청을 보내는 중...성공했습니다!
데이터 수신 중... 완료!
데이터를 구문 분석하는 중... 완료되었습니다!

우리는 xml(표준화가 가까워지고 있음) HttpRequest 개체가 각 단계에서 수행하는 작업을 쉽게 이해할 수 있습니다. 따라서 Ajax(동적 웹 사이트 정적화)의 핵심 부분을 정말 간단하고 명확하게 이해하는 것이 쉽습니다.