Usage analysis of document.onreadystatechange event_javascript skills

In the past two days, I have been optimizing a project of the department. One of them is to implement all alerts in the web application using divs. The relevant JavaScript methods have been written. The method is called showDialog. It is not easy to call the showDialog method on the front page. There is no problem, but once the page is submitted, the script is output from the background and the showDialog method is called, problems will occur from time to time. An error that cannot open the Internet site is reported. I set breakpoints in the script to debug, but still cannot find the source of the problem. Finally, I checked online and found that this problem might be caused by the page not being fully loaded, so I modified the code of the background output script and changed it to
document.onreadystatechange=function() { if(document.readyState == 'complete'){ showDialog('Message from web page', 'Username or password is wrong, please re-enter!', 'warning'); } };
Problem solved, everything is OK!

Copy code The code is as follows:

document.onreadystatechange = subSomething;//Execute this method when the page loading status changes .
function subSomething()
{
if(document.readyState == "complete"){ //When the page loading status is complete, enter
//The operation you want to do.
}
}

Description: The onreadystatechange event can identify changes to the readyState attribute.

Some questions about the onreadystatechange attribute
When writing Ajax methods, we often write code similar to this:

Copy code The code is as follows:

When I read this code for the first time, I felt something was wrong, but I couldn’t tell what was wrong. As I learn more about Ajax code, this feeling stays with me.

Later, I understood where this feeling came from.

Look at the startRequest function. We found that xmlHttp.onreadystatechange points to a function, which is triggered when xmlHttpRequest.readyState changes. Let's look at the startRequest function again and imagine the steps of sending the entire request. Now we click a button and trigger a startRequest function. The function goes down. The first step is createXmlHttpRequest(). Its function is to create an xmlHttpRequest object. When it is completed, the value of xmlHttpRequest.readyState is 0 (tracked by window.alert), and the program continues down. xmlHttp.onreadystatechange = handlestatechange. Because the state has not changed (the value of xmlHttpRequest.readyState is 0), the function is not triggered, followed by Open() and Send(). Then, the entire function should not trigger the handlestatechange function from beginning to end. , but why is the result correct?

Later I used window.alert to track the changes in xmlHttp.readystate, and found that this is how it operates. First, after creating an xmlHttpRequest object, the value of xmlHttp.readyState is 0, and then xmlHttp.onreadystatechange = handlestatechange does not run. Next is open(). After this function occurs, the value of xmlHttp.readyState is 1, then there will be a breakpoint at the Open() function, retain the scene, and then return to xmlHttp.onreadystatechange = handlestatechange Run, and then execute the Send() function. After this function occurs, the value of xmlHttp.readyState is 2, and then returns to xmlHttp.onreadystatechange = handlestatechange to run. And so on.

Because the browser can’t really program like object-oriented programming, I found a compromise method, but this method seems nondescript. After thinking for a long time, and discussing with a classmate, I came up with such a solution. result.