Ajax에서 ReadyState와 status를 사용하는 것의 차이점은 무엇입니까?
- php中世界最好的语言원래의
- 2018-04-02 10:06:201661검색
이번에는 Ajax에서 ReadyState와 Status를 사용할 때의 차이점과 Ajax에서 ReadyState와 Status를 사용할 때의 주의사항에 대해 알려드리겠습니다.
이전 기사에서는 jquery의 ajax 비동기 및 동기화 분석과 일부 예외 처리에 대해 설명했는데, ajax의 ReadyState와 상태에 대해 명확하게 설명되지 않은 것 같습니다. 오늘은 ajax 상태에 대해 이야기해 보겠습니다.
jquery ajax 함수 소스 코드는 다음과 같습니다.
var getXmlHttpRequest = function () {
if (window.XMLHttpRequest) {
//主流浏览器提供了XMLHttpRequest对象
return new XMLHttpRequest();
}
else if (window.ActiveXObject) {
//低版本的IE浏览器没有提供XMLHttpRequest对象
//所以必须使用IE浏览器的特定实现ActiveXObject
return new ActiveXObject("Microsoft.XMLHTTP");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
//获取成功后执行操作
//数据在xhr.responseText
}
};
xhr.open("TYPE", "URL", true);
xhr.send("");
readyState란 무엇입니까
ReadyState는 현재 XMLHttpRequest 객체의 상태를 식별하는 데 사용되는 XMLHttpRequest 객체의 속성입니다.
ReadyState에는 0부터 4까지 총 5개의 상태 값이 있습니다. 각 값은 다음 표와 같이 서로 다른 의미를 나타냅니다.
0 초기화되지 않은 상태: 이때 XMLHttpRequest 객체가 생성되었습니다
1 준비 전송 상태: 이때 XMLHttpRequest 객체의 open 메소드가 호출되었으며 XMLHttpRequest 객체가 서버에 요청을 보낼 준비가 되었습니다. 2 전송 상태: 이 시점에서 서버를 통해 요청이 전송되었습니다. 하지만 아직 응답을 받지 못했습니다.
3 수신 상태: 이때 HTTP 응답 헤더 정보는 수신되었으나 메시지 본문 부분은 완전히 수신되지 않았습니다.
4 응답 완료 상태: 이 상태입니다. 시간이 지나면 HTTP 응답이 완료되었습니다. 수신
상태란 무엇입니까 상태는 XMLHttpRequest 개체의 속성으로, 응답의
HTTP 상태 코드를 나타냅니다. HTTP1.1 프로토콜에서 HTTP 상태 코드는 다음 표와 같이 5가지 범주로 나눌 수 있습니다.
1XX 서버는 요청을 수신하고 계속 처리해야 합니다. 예를 들어, 101 상태 코드는 서버가 클라이언트에게 더 높은 버전의 HTTP 프로토콜을 사용하도록 알린다는 것을 의미합니다.
2XX 요청이 성공했습니다. 예를 들어, 200 상태 코드는 요청에서 예상하는 응답 헤더 또는 데이터 본문이 이 응답과 함께 반환된다는 것을 나타냅니다. 3XX 리디렉션. 예를 들어, 302 상태 코드는 임시 리디렉션을 나타냅니다. 요청에는 새 URL 주소가 포함되며 클라이언트는 새 주소에 대해 GET 요청을 보냅니다.
4XX 클라이언트 오류. 예를 들어 404 상태 코드는 클라이언트가 요청한 리소스가 존재하지 않음을 나타냅니다.
5XX 서버 오류. 예를 들어, 500 상태 코드는 서버가 응답을 완료하지 못하는 예상치 못한 상황에 직면했음을 나타냅니다. 일반적으로 이 문제는 프로그램 코드에 오류가 발생할 때 발생합니다.
질문하기
onreadystatechange의 함수 구현에서 ReadyState와 상태를 동시에 결정해야 하는 이유는 무엇입니까?
readyState === 4가 이미 요청 응답이 성공했음을 나타냈음을 알고 있습니다. 후속 상태가 필요한 이유는 무엇입니까? 질문을 염두에 두고 몇 가지 실험을 시작해 보겠습니다.
readyState만 사용하여 판단하세요
javascript
측의 구현 코드는 다음과 같습니다.
var getXmlHttpRequest = function () {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
alert(xhr.responseText);
}
};
xhr.open("GET", "/data.aspx", true);
xhr.send("");
서버 측에서 예외를 발생시킵니다:
public partial class data : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
throw new Exception("Error");
}
}
자바스크립트 코드를 실행하면 프롬프트 창이 다음과 같이 나타납니다.
서비스 응답 오류가 발생했지만 여전히 정보가 반환되어 원하는 결과가 아닙니다. Open Fiddler 모니터링을 보면 data.aspx가 500 응답을 반환하는 것을 볼 수 있는데, Readystate만을 사용하여 판단하기 때문에 반환된 결과가 500인지 200인지는 상관하지 않습니다. 응답이 성공적으로 반환되기만 하면 다음은 javascript 코드가 실행되면 예측할 수 없는 다양한 오류가 발생합니다. 따라서 단지 ReadyState를 사용하여 판단하는 것은 작동하지 않습니다.
다른 관점에서 생각해 보면 상태 코드가 200을 반환하면 응답이 성공한 것입니다. 그러면 ReadyState를 사용하지 않고 상태만 사용하여 판단할 수는 없을까요? 좋습니다. 질문을 염두에 두고 실험을 계속해 보겠습니다.
상태만 사용해 판단하세요
JavaScript 측 코드는 다음과 같이 구현됩니다.
var getXmlHttpRequest = function () {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.status === 200) {
alert("readyState=" + xhr.readyState + xhr.responseText);
}
};
xhr.open("GET", "/data.aspx", true);
xhr.send("");
事实上，结果却不像预期那样。响应码确实是返回了200，但是总共弹出了3次窗口！第一次是“readyState=2”的窗口，第二次是“readyState=3Test”的窗口，第三次是“readyState=4Test”的窗口。由此，可见onreadystatechange函数的执行不是只在readyState变为4的时候触发的，而是readyState的每次变化都会触发，所以就出现了前面说的那种情况。可见，单独使用status判断也是行不通的。
进一步思考
由上面的试验，我们可以知道判断的时候readyState和status缺一不可。那么readyState和status的先后判断顺序会不会有影响呢？我们可以将status调到前面先判断，代码如 xhr.status === 200 && xhr.readyState === 4。
事实上，这对于最终的结果是没有影响的，但是中间的性能就不同了。由上一个试验我们知道，readyState的每次变化都会触发onreadystatechange函数，假如先判断status，那么每次都会多判断一次status的状态。虽然性能上影响甚微，不过我们还是应该抱着追求极致代码的想法，把readyState的判断放在前面。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 Ajax에서 ReadyState와 status를 사용하는 것의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!