document.onreadystatechange event_javascript 스킬 활용 분석

지난 이틀 동안 나는 부서의 프로젝트를 최적화하고 있는데 그 중 하나는 div를 사용하여 웹 애플리케이션에 모든 경고를 구현하는 것입니다. 해당 메서드는 showDialog라는 것입니다. 프론트 페이지에서 showDialog 메소드를 호출하면 문제가 없지만 일단 페이지가 제출되면 백그라운드에서 스크립트가 출력되고 showDialog 메소드가 호출되면 인터넷을 열 수 없는 오류가 가끔 발생합니다. 디버깅을 위해 스크립트에 중단점을 설정했지만 여전히 문제의 원인을 찾을 수 없습니다. 마지막으로 온라인으로 확인한 결과 페이지가 완전히 로드되지 않아 이 문제가 발생할 수 있다는 것을 발견하여 코드를 수정했습니다. 백그라운드 출력 스크립트를
document.onreadystatechange=function() { if(document.readyState == 'complete'){ showDialog('웹 페이지의 메시지', '사용자 이름 또는 비밀번호가 잘못되었습니다. 다시 입력하세요. enter!', 'warning'); } };
문제가 해결되었습니다.

코드 복사

document.onreadystatechange = subSomething;//페이지 로딩 상태가 변경되면 이 메소드를 실행합니다.
function subSomething()
{
if(document.readyState == "complete"){ //페이지 로딩 상태가 완료되면
을 입력하세요//하고 싶은 작업을 입력하세요.
}
}

설명: onreadystatechange 이벤트는 ReadyState 속성에 대한 변경 사항을 식별할 수 있습니다.

onreadystatechange 속성에 대한 몇 가지 질문
Ajax 메소드를 작성할 때 다음과 유사한 코드를 작성하는 경우가 많습니다.

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

처음 이 코드를 읽었을 때 뭔가 잘못된 것 같았지만 무엇이 잘못되었는지 알 수 없었습니다. Ajax 코드에 대해 더 많이 배울수록 이런 느낌은 계속 남아 있습니다.

나중에 이 느낌이 어디서 오는지 알게 됐어요.

startRequest 함수를 살펴보세요. 우리는 xmlHttp.onreadystatechange가 xmlHttpRequest.readyState가 변경될 때 트리거되는 함수를 가리키는 것을 발견했습니다. startRequest 함수를 다시 살펴보고 전체 요청을 보내는 단계를 상상해 봅시다. 이제 버튼을 클릭하고 startRequest 함수를 트리거합니다. 첫 번째 단계는 createXmlHttpRequest()입니다. 해당 함수는 xmlHttpRequest 객체를 생성하는 것입니다. 완료되면 xmlHttpRequest.readyState의 값은 0(window.alert에 의해 추적됨)이고 프로그램은 계속됩니다. .onreadystatechange = handlerstatechange. 상태가 변경되지 않았으므로(xmlHttpRequest.readyState 값이 0임) 함수가 트리거되지 않고 Open() 및 Send()가 이어집니다. 시작부터 끝까지, 그런데 왜 결과가 정확합니까?

나중에 window.alert를 사용하여 xmlHttp.readystate의 변경 사항을 추적한 결과 이것이 작동하는 방식을 발견했습니다. 먼저 xmlHttpRequest 객체를 생성한 후 xmlHttp.readyState의 값이 0이 되고 xmlHttp.onreadystatechange = handlerstatechange가 실행되지 않습니다. 다음은 open()입니다. 이 함수가 발생한 후 xmlHttp.readyState의 값이 1이 되면 Open() 함수에 중단점이 생기고 장면을 유지한 후 xmlHttp.onreadystatechange = handlerstatechange로 돌아가 실행됩니다. Send() 함수를 실행하면 이 함수가 발생한 후 xmlHttp.readyState의 값이 2가 되고 xmlHttp.onreadystatechange = handlerstatechange로 반환되어 실행됩니다. 등.

브라우저에서는 객체지향 프로그래밍처럼 실제로 프로그래밍할 수 없기 때문에 절충 방법을 찾았지만 이 방법은 설명이 없는 것 같아서 오랜 시간 고민하고 학급 친구와 논의한 끝에 이런 것을 생각해 냈습니다. 결과.