Ajax의 ReadyState 및 상태와 관련된 문제에 대해 토론합니다.

이 글은 Ajax의 ReadyState(상태 값) 및 Status(상태 코드)와 관련된 문제에 대한 정보를 주로 소개합니다. 매우 좋고 참고할만한 가치가 있습니다.

먼저 다음 글을 살펴보세요. 그러면 Ajax의 ReadyState(상태 값) 및 Status(상태 코드)와 관련된 문제에 대해 자세히 소개하겠습니다.

var getXmlHttpRequest = function () {
try{
//主流浏览器提供了XMLHttpRequest对象
return new XMLHttpRequest();
}catch(e){
//低版本的IE浏览器没有提供XMLHttpRequest对象，IE6以下
//所以必须使用IE浏览器的特定实现ActiveXObject
return new ActiveXObject("Microsoft.XMLHTTP");
}
};
var xhr = getXmlHttpRequest();
// readyState 0=>初始化 1=>载入 2=>载入完成 3=>解析 4=>完成
// console.log(xhr.readyState); 0
xhr.open("TYPE", "URL", true);
// console.log(xhr.readyState); 1
xhr.send();
// console.log(xhr.readyState); 1
xhr.onreadystatechange = function () {
// console.log(xhr.status); //HTTP状态吗
// console.log(xhr.readyState); 2 3 4
if(xhr.readyState === 4 && xhr.status === 200){
alert(xhr.responseText);
}
};

1.Ajax: ReadyState(상태 값) 및 상태(상태 코드)

readyState는 AJAX를 실행하면서 경험하는 여러 상태를 의미합니다. 액세스 성공 여부와 관계없이 응답하는 단계는 AJAX 실행 단계로 이해될 수 있습니다.

를 얻기 위한 "readyState"

Status는 AJAX 접속 성공 여부와 상관없이 HTTP 프로토콜에 의해 제출된 정보를 기반으로 서버가 반환하는 HTTP 헤더 정보 코드를 의미합니다.
Overall을 얻으려면 "ajax.status"를 사용하세요. 이해: 상태는 전체 상태를 나타낸다고 간단히 이해될 수 있습니다. 그리고 지위는 이 큰 주 아래에 있는 특정한 작은 지위입니다.

2. ReadyState란 무엇입니까

ReadyState는 현재 XMLHttpRequest 객체의 상태를 식별하는 데 사용되는 XMLHttpRequest 객체의 속성입니다.

readyState에는 0부터 4까지 총 5개의 상태 값이 있습니다. 각 값은 서로 다른 의미를 나타냅니다.

0: 초기화, XMLHttpRequest 개체가 아직 초기화를 완료하지 않았습니다.

1: 로드 중, XMLHttpRequest 개체가 전송을 시작했습니다. 요청

2: 로드가 완료되고 XMLHttpRequest 객체의 요청이 전송됩니다.

3: 구문 분석 중 XMLHttpRequest 객체가 서버의 응답을 읽기 시작합니다.

4: 완료, XMLHttpRequest 객체가 서버 응답을 읽고 종료됩니다

3. 상태란 무엇입니까

상태는 응답 HTTP 상태 코드를 나타내는 XMLHttpRequest 개체의 속성입니다.

HTTP1.1 프로토콜에서 HTTP 상태 코드는 총 5가지 범주로 나눌 수 있습니다.

1xx: 정보 요청이 수신되고 계속됨을 나타내는 응답 클래스 처리

2xx: 작업이 성공적으로 수신되고 이해되었으며 수락되었음을 나타내는 성공 응답 클래스 처리

3xx: 지정된 작업을 완료하기 위해 응답 클래스 리디렉션, 추가 처리 수락해야 합니다

4xx: 클라이언트 오류, 클라이언트 요청에 구문 오류 또는 올바르게 실행 실패가 포함되어 있습니다.

5xx: 서버 오류, 서버가 올바른 요청을 올바르게 실행할 수 없습니다.

100 - 클라이언트가 계속 요청해야 합니다

101 - 클라이언트는 서버가 요청에 따라 HTTP 프로토콜 버전을 변환하도록 요구

200— — 트랜잭션 성공

201 - 새 파일의 URL을 묻는 메시지 표시

202 - 수락 및 처리되었지만 처리가 되지 않았습니다. 완료됨

203 - 반환 정보가 불확실하거나 불완전합니다.

204 - 요청이 수신되었지만 반환되었습니다. 정보가 비어 있습니다.

205 - 서버가 요청을 완료했으며, 사용자 에이전트는 현재 탐색된 파일을 재설정해야 합니다.

206 - 서버가 사용자의 GET 요청 중 일부를 완료했습니다.

300 - 요청한 리소스를 여러 위치에서 사용할 수 있습니다.

301 - 요청 데이터 삭제

302 - 다른 주소에서 찾은 데이터 요청

303 - 고객에게 다른 URL에 액세스하거나 액세스하도록 제안 메소드

304 - 클라이언트가 GET을 수행했지만 파일이 변경되지 않았습니다.

305 - 요청한 리소스는 서버가 지정한 주소에서 가져와야 합니다.

306 - 이전 버전의 HTTP에서 사용된 코드이며 더 이상 사용되지 않습니다. 현재 버전에서는

307 - 요청한 리소스가 일시적으로 삭제된다는 선언

400 - — 구문 오류 등 잘못된 요청

401 — 요청 승인 실패

402 — 유효한 ChargeTo 헤더 응답이 유지됨

403 — 요청하지 않음 allowed

404 — 파일, 쿼리 또는 URL을 찾을 수 없습니다.

405 — 요청 라인 필드에서 사용자가 정의한 메서드가 허용되지 않습니다.

406 - 사용자가 보낸 수락 드래그에 따라 요청한 리소스에 액세스할 수 없습니다.

407 - 401과 유사하게, 사용자는 먼저 프록시 서버에서 승인을 받아야 합니다.

408 - 클라이언트 클라이언트가 사용자가 지정한 시간 내에 요청을 완료하지 않았습니다.

409 - 현재 리소스에 대해 요청을 완료할 수 없습니다. status

410 - 이 리소스는 더 이상 서버에 존재하지 않으며 추가 참조 주소도 없습니다

411 - 서버가 사용자 정의 콘텐츠 길이 속성 요청을 거부합니다.

412 - 현재 하나 이상의 요청 헤더 필드가 올바르지 않습니다. 요청

413 - 요청한 리소스가 서버가 허용하는 것보다 큽니다.

414 - 요청한 리소스 URL이 서버가 허용하는 길이보다 깁니다.

415 - 요청한 리소스가 요청 항목 형식을 지원하지 않습니다.

416 - 요청에 다음이 포함됩니다. Range 요청 헤더 필드, 현재 요청 리소스 범위 내에 범위 표시 값이 없고 요청에 If-Range 요청 헤더 필드가 포함되어 있지 않습니다.

417 ——서버가 Expect 헤더 필드에 지정된 기대치를 충족하지 않습니다. 요청의 경우, 다음 단계 서버가 요청을 충족하지 못할 수 있습니다.

500 ——서버에서 내부 오류가 발생했습니다.

501 ——서버가 요청한 기능을 지원하지 않습니다.

502 ——시스템 과부하를 방지하기 위해 서버를 일시적으로 사용할 수 없습니다.

503 ——서버가 유지 관리를 위해 과부하 또는 일시 중지되었습니다.

504 ——게이트웨이 과부하, 서버가 다른 게이트 또는 서비스를 사용하여 사용자에게 응답하고 대기 시간 설정 값이 더 깁니다.

505 - 서버가 요청 헤더에 지정된 HTTP 버전을 지원하지 않거나 지원을 거부합니다

4.思考问题：为什么onreadystatechange的函数实现要同时判断readyState和status呢？

第一种思考方式：只使用readyState

var getXmlHttpRequest = function () {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
};
var xhr = getXmlHttpRequest();
xhr.open("get", "1.txt", true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
alert(xhr.responseText);
}
};

服务响应出错了，但还是返回了信息，这并不是我们想要的结果

如果返回不是200，而是404或者500，由于只使用readystate做判断，它不理会放回的结果是200、404还是500，只要响应成功返回了，就执行接下来的javascript代码，结果将造成各种不可预料的错误。所以只使用readyState判断是行不通的。

第二种思考方式：只使用status判断

var getXmlHttpRequest = function () {
try{
return new XMLHttpRequest();
}catch(e){
return new ActiveXObject("Microsoft.XMLHTTP");
}
};
var xhr = getXmlHttpRequest();
xhr.open("get", "1.txt", true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.status === 200) {
alert("readyState=" + xhr.readyState + xhr.responseText);
}
};

事实上，结果却不像预期那样。响应码确实是返回了200，但是总共弹出了3次窗口！第一次是“readyState=2”的窗口，第二次是“readyState=3”的窗口，第三次是“readyState=4”的窗口。由此，可见onreadystatechange函数的执行不是只在readyState变为4的时候触发的，而是readyState（2、3、4）的每次变化都会触发，所以就出现了前面说的那种情况。可见，单独使用status判断也是行不通的。

5.由上面的试验，我们可以知道判断的时候readyState和status缺一不可。那么readyState和status的先后判断顺序会不会有影响呢？我们可以将status调到前面先判断，代码如 xhr.status === 200 && xhr.readyState === 4

事实上，这对于最终的结果是没有影响的，但是中间的性能就不同了。由试验我们知道，readyState的每次变化都会触发onreadystatechange函数，假如先判断status，那么每次都会多判断一次status的状态。虽然性能上影响甚微，不过还是应该抱着追求极致代码的想法，把readyState的判断放在前面。

xhr.readyState === 4 && xhr.status === 200

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

全面解析$.Ajax()方法参数（图文教程）

IE8下Ajax缓存问题及解决办法

浅谈ajax请求技术

위 내용은 Ajax의 ReadyState 및 상태와 관련된 문제에 대해 토론합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!