Ajax에서 ReadyState와 상태를 사용하는 방법

이번에는 Ajax에서 ReadyState와 Status를 사용하는 방법을 알려드리겠습니다. Ajax에서 ReadyState와 Status를 사용할 때 주의사항은 무엇인가요?

먼저 다음 코드를 보고 Ajax의 ReadyState(상태 값) 및 상태(상태 코드)와 관련된 문제에 대해 자세히 소개합니다.

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 실행 단계로 이해하면 됩니다. "ajax.readyState"

status 획득은 AJAX 접속 성공 여부에 관계없이 HTTP 프로토콜에 의해 제출된 정보를 기반으로 서버에서 반환되는 HTTP 헤더 정보 코드를 의미합니다.
전체적인 이해 얻기: 상태가 전반적인 상태를 나타낸다고 간단히 이해될 수 있습니다. 그리고 지위는 이 큰 주 아래에 있는 특정한 작은 지위입니다.

2. ReadyState란 무엇입니까

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

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

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

1: 로드 중, XMLHttpRequest 개체가 요청 보내기를 시작했습니다.

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

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

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

3. 상태란 무엇입니까

status는 응답 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 - 요청이 허용되지 않음

404 - 파일, 쿼리 또는 URL이 발견되지 않음

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

406——에 따르면 사용자가 보낸 수락 드래그, 요청한 리소스에 액세스할 수 없습니다

407——类似401，用户必须首先在代理服务器上得到授权

408——客户端没有在用户指定的饿时间内完成请求

409——对当前资源状态，请求不能完成

410——服务器上不再有此资源且无进一步的参考地址

411——服务器拒绝用户定义的Content-Length属性请求

412——一个或多个请求头字段在当前请求中错误

413——请求的资源大于服务器允许的大小

414——请求的资源URL长于服务器允许的长度

415——请求资源不支持请求项目格式

416——请求中包含Range请求头字段，在当前请求资源范围内没有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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Ajax+Struts2怎么实现用户输入验证码校验功能

Ajax怎么实现点击时不断开数据加载列表

위 내용은 Ajax에서 ReadyState와 상태를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!