在Ajax通话完成后而不是之前或期间弹出的模式信息

时间:2019-04-24 12:35:47

标签: javascript html ajax

在尝试进行Ajax调用时,我试图显示一个模式弹出窗口以显示“ Please Wait”。弹出仅在通话结束后发生。

当我单击我的Web链接时,所有工作正常,除了应该显示“请稍候”的模式弹出窗口在应要求用户等待的时间之后闪烁一秒钟。也就是说,在Ajax调用完成之后而不是之前弹出该模式。

页面加载后,它将调用 AjaxInitialUpdate 。效果很好。

问题是当您单击调用 AjaxChangePassword 的按钮时。

该功能应该打开一个模态,然后与Web服务器联系,然后最终删除模型并调用 AjaxInitialUpdate 函数以刷新整个屏幕。

问题在于 AjaxChangePassword 模式在网络查询完成之前不会弹出(此时,告诉用户没有意义-请稍候)。

现在,我在这里完全是自学成才,所以我可能用错误的名称或术语来称呼事物。我欢迎有任何想法可以使它更好地运行,但是请详细介绍一下,我仍然是Java的新手。

此外,上一次我做任何形式的HTML编程都是在样式表成为流行之路之前,所以我也必须学习它们(并刷新其余所有内容,因此请解释所有答案)详细)。

最后,它的服务器端是用Powershell编写的,并且是单线程的,因此我试图尽可能多地将其放入HTML文件中,而不是调用样式表和图像之类的辅助文件。

<!DOCTYPE html>    
<head>    
<meta http-equiv="X-UA-Compatible" content="IE=edge">    
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />    
<meta http-equiv="Pragma" content="no-cache" />    
<meta http-equiv="Expires" content="0" />    
<meta name="viewport" content="width=device-width, initial-scale=1">    
<style>    

body {font-family: Arial, Helvetica, sans-serif;}    


/* The Modal (background) */    
.modal {    
  display: none; /* Hidden by default */    
  position: fixed; /* Stay in place */    
  z-index: 1; /* Sit on top */    
  padding-top: 100px; /* Location of the box */    
  left: 0;    
  top: 0;    
  width: 100%; /* Full width */    
  height: 100%; /* Full height */    
  overflow: auto; /* Enable scroll if needed */    
  background-color: rgb(0,0,0); /* Fallback color */    
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */    

  /* Believe these are not needed.
     Imported from web site that I copied the code from.
  padding: 8px 8px;    
  outline: none;    
  border: none;    
  border-radius: 115px;        
  box-shadow: 0 3px #999; */    
}    


/* Modal Content */    
.modal-content {    
  background-color: #fefefe;    
  margin: auto;    
  padding: 20px;    
  border: 1px solid #888;    
  width: 70%;    
}    

/* The Close Button */    
.close {    
  color: #aaaaaa;    
  float: right;    
  font-size: 28px;    
  font-weight: bold;    
}    

.close:hover,    
.close:focus {    
  color: #000;    
  text-decoration: none;    
  cursor: pointer;    
}    


#IndividualSystem {    
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;    
  border-collapse: collapse;    
  width: 100%;    
  border: 1;    

}    

#IndividualSystem td, #IndividualSystem th {    

  text-align: left;    
  padding: 8px;    
  color: black    
  border: 1px solid black;    
}    


#IndividualSystem tr {    
  padding-top: 12px;    
  padding-bottom: 12px;    
  text-align: left;    
  background-color: #eeeeee;    
}    

.tab { margin-left: 40px; }    

.button {    
  display: inline-block;    
  padding: 8px 8px;    
  font-size: 12px;    
  cursor: pointer;    
  text-align: center;    
  text-decoration: none;    
  outline: none;    
  color: #fff;    
  background-color: #4CAF50;    
  border: none;    
  border-radius: 15px;        
  box-shadow: 0 3px #999;     
}    

.button:hover {background-color: #3e8e41}    

.button:active {    
  background-color: #3e8e41;    
  box-shadow: 1 5px #666;       
  transform: translateY(4px);    
}    

.button2 {    
  display: inline-block;    
  padding: 8px 8px;    
  font-size: 12px;    
  cursor: pointer;    
  text-align: center;    
  text-decoration: none;    
  outline: none;    
  color: #fff;    
  background-color: #000080;    
  border: none;    
  border-radius: 15px;        
  box-shadow: 0 3px #999;     
}    

.button2:hover {background-color: #df330e}    

.button2:active {    
  background-color: #FD2E02;    
  box-shadow: 1 5px #666;       
  transform: translateY(4px);    
}    

#IndividualSystem {    
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;    
  border-collapse: collapse;    
  width: 100%;    
  border: 1;    

}    

</style>    

<Title>Cyber Track</title>    
</head>    

<body>    
<table>    
    <tr>    
        <td>blah</td>    
        <td><h1>Systems and Passwords</H1>    
        <h3>Information within this page is considered confidential.</h3>    
    </td></tr>    
</table>    

<hr>    


<input type="hidden" id="Leftlink" name="Leftlink" value="0">    
<input type="hidden" id="Rightlink" name="Rightlink" value="0">    
<input type="hidden" id="serverID" name="serverID" value="server8\admin-server8">    
<input type="hidden" id="count" name="count" value="10">     <!---  Number of servers per page on server list //-->    

<!-- The Modals #1 -->    

<div id="myModal1" class="modal">    

    <!-- Modal content -->    
        <div class="modal-content">    
            <h4><label id="ModalTextLine1">Loading content from server</label></h4>    
        </div>    
</div>    

<!-- The Modals #2 -->    
<div id="myModal2" class="modal">    
    <!-- Modal content -->    
        <div class="modal-content">    
            <span class="close2">&times;</span>    
            How long do you need the password?    

                <form action='#'>    
                <select name="days">    
                <option value='1' >1 day or less</option>     
                <option value='7'>between 1 and 2 days</option>     
                <option value='7'>between 2 and 7 days</option>     
                <option value='30'>between 7 and 30 days</option>     
                <option value='365' selected>for up to a year.</option>     
                </select>    
                <br>    
                <input type="submit" value="Process Request">    
            </form>    
        </div>    
</div>    

<script>    
// Get the modal    
var modal2 = document.getElementById('myModal2');    

// Get the <span> element that closes the modal    
var span = document.getElementsByClassName("close2")[0];    

// When the user clicks on <span> (x), close the modal    
span.onclick = function() {    
  modal2.style.display = "none";    
}    

// When the user clicks anywhere outside of the modal, close it (or actually, just hide it)    
window.onclick = function(event) {    
  if (modal2.style.display != "none")    
  {    
    if (event.target == modal2) {    
        modal2.style.display = "none";    
    }    
  }    
}    
</script>    

<!-- End Loaded from function -->    

<table id="IndividualSystem">  <!-- IndividualSystem - to define needed style sheet //-->    
<tr>    
    <td style="width: 215px;">Server</td>    
    <td style="width: 259px;"><label ID="DynServerName">Loading</label></td>    
</tr>    
<tr>    
    <td style="width: 215px;">User ID</td>    
    <td style="width: 259px;"><label ID="DynAdminID">Loading</label></td>     
</tr>    
<tr>    
    <td colspan="2"><hr></td>    
</tr>    
<tr>    
    <td style="width: 215px;">Checked out status:</td>    
    <td style="width: 259px;"><label ID="DynLastCheckedout">Loading</label></td>    
</tr>    
<tr>     
    <td style="width: 215px;" valign='top' >Last checked out by:</td>    
    <td style="width: 259px;" valign='top' ><label ID="DynLastCheckedBy">Loading...</label>&nbsp;&nbsp;&nbsp;    
                 <button class="button" onclick="javascript:AjaxCheckOutPassword()" id="PassStatus">Loading</button> <!--  AjaxCheckOutPassword -->    
    </td>    
</tr>    
<tr>    
    <td valign='top' style="width: 215px;">Expected Check In Date:</td>    
    <td valign='top' style="width: 259px;"><label ID="DynExpectedBack">Loading</label></td>    
</tr>    
<tr>    
    <td style="width: 215px;">Date of last password change:</td>    
    <td style="width: 259px;"><label id="DynLastReset">Loading</label>&nbsp;&nbsp;&nbsp;<button class="button2" onclick="AjaxChangePassword()">Force Change Now!</button>    
                  </td>    
</tr>    
<tr>    
    <th colspan="2">Notify:<br>    
        <table border="1" padding = "0" width=100%>    
            <tr>    
                <td width=200>On Use:</td><td><label id="DynEmailCheckOut">Loading</label></td>    
            </tr>    
            <tr>    
                <td width=200>On Checkin:</td><td><label id="DynEmailCheckIn">Loading</label></td>    
            </tr>    
        </table>    
    </th>    
</tr>    
<tr><td colspan="2">    
        <label ID="DynAccountPurpose"></label>    
</td></tr>    

</tbody>    
</table>    

<!-- Page Footer (if any) //-->    

<!-- Page links left/up/right //-->    
<table>    
<tr><td width = 50>    
    <label id="Show-Left">    
        <a class='w3-left w3-btn' href='#' onclick="AjaxNavigate(-1)" text='Prior Server'>    
                     <img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAgABoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9+Wwp/wDrVzHxS+Kmk/B3wfda3rdz9lsbPZ5kvlvJ951QfKis3V1HA7074ofE/SPhD4RvNc1m5+x6fZ7PNl8t5Nu50ReFBJyzgcDv6Dj853k8Zf8ABW/4sgY/sv4d6T0X9zPjzIfX9xNzPae/X+6Ob9naPtJ7GXM5Plgfod8H/jHoXxw8FW3iDw7c/btPvt4WTy5I87JHj6SKp+8jfwj8etddvHp+hrm/hb8L9H+EnhO30PQ7f7JZWe7am93xvdnPLsx6sT1P8q6QcDjbjt8prGPdm0rHjv7Yf7JOj/tW/DuTS9Q/0e6jx5M+Hfyv3sTt8qyIDkRAc9O1fH/7GP7T+t/sN+P4/hD8TB5OnQ5+yXX7t/s+Y5rt/kt45C2WmiHMnGeOMgfpEWJb73H0614v+2N+x1oP7WfgiTT9SBt7+HBtrr94/lZkhZvkWRAciEDn8OldCqc0fZzMJU+WXNA9hsb9NQtVlhfdG2drYIzg4PWp8r/drzb9lv4I3fwH+EWn+HNQ1X+2JrPzM3H2YW+7dNLJ90MwGBIB949Pwr0kx8/d/SsIO2jOjRn/2Q==' alt='go to prior server' height='26' width='32'>    
        </a>    
    </label>    
    &nbsp;    
   </td>    
   <td>    
            <a class='w3-left w3-btn' href='#' onclick="AjaxNavigate(0)" text='Next server'>Return to main list</a>    
   </td>    
   <td width = "50">    
   <label id="Show-Right">    
        <a class='w3-left w3-btn' href='#' onclick="AjaxNavigate(1)" text='Next server'>    
                    <img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAgABoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD97dc1U6Zp000cfnPHt+Tdt3ZIHX8a+Z/2Sv8AgpDpfx98c3/hjWNP/wCEf16Dy/Kt/Pe78zMcsp+ZYVQYSMHk/wAXqK+oihPT8DXx7/wUM/4J8r8Wo4/GXg5fsfi7T85XPmfat/2eH/lrMsabYkf+E5z64NEHGM+WezFUTcbw3PsMgtjj6nNO8pfSvjn/AIJv/wDBRD/hoLTj4b8UDyPFFr99s7vtG43Eg4jhWNdsca9+frmvsPa3/PX/AMdrSdKUHZkQqxmtCPULyK1tXef5YVxuPJ7+3PWvzt/a4/a28S/tm/Ek/Cz4V/vrOX/j7u/3S+ZiKK6T5LmOMjBhlHD+57A/ofqenQ6hbPFP80BxuXkdwRyOetef/Aj9lXwh+zpHer4a077AL7y/NP2iaXds34/1kj4/1jdPWsYqLneey/E0nJqP7vcwv2Ov2OdD/ZM+H/8AZunjzr64/wCPy7zIv2jbJMyfI0jhdolI4PPU+3su5fX9KAdwyRgntmn7hWs6spvmkZwpRjsf/9k=' alt='go to prior server' height='26' width='32'>    
        </a>    
   </label>    
   &nbsp;    
  </td>    
</tr></table>    

<!-- End Page links left/up/right //-->    

<!-- Dynamic JAVA Script Section //-->    

<script>    

// disable our NAV pointers till later where we may re-enable them.    
document.getElementById('Show-Right').style.display = 'none';    
document.getElementById('Show-Left').style.display = 'none';    

//
//  This is the specific function that I need help with.
//  Why does this modal pop up only after the actual query is done?
//    
function AjaxChangePassword(){    

    document.getElementById('myModal1').style.display = "block";    
    document.getElementById('myModal2').style.display = "none";   // Make sure its not poped up..    
    // we need to set item on the modal to explain what we are doing...    
    document.getElementById("ModalTextLine1").innerHTML="Processing password change request.  Please Wait"   

    var xhr = "";    
    var xhr = new XMLHttpRequest();    

    // server will check if values are valid..    
    var Server = document.getElementById("DynServerName").innerHTML;    
    var AdminID = document.getElementById("DynAdminID").innerHTML;    

    xhr.open('GET', 'http://PSShellSrv.mydomain.local:80/CyberPass3/?command=update&sub=change&server=' + Server + '/' + AdminID+'&NoCache=' + ((new Date()).getTime()), true);    

    xhr.responseType = 'text';    

    xhr.onload = function () {    
        console.log('Initail Comment Response onpassword change.');    
        if (xhr.readyState === xhr.DONE) {    
            if (xhr.status === 200) {    
                console.log(xhr.response);    
                console.log("Report password changed.");    
                AjaxInitialUpdate() // password changed, lets refresh.    
            };    
        };    

    };    
    xhr.send(null);    
    document.getElementById('myModal1').style.display = "none";    
};    


// Navigate left and right..    
function AjaxNavigate(link)    
{    

    xx = document.getElementById('Leftlink').value    

    xx = document.getElementById('Rightlink').value    

    if (link == 0)    
    {    
        // Back to the main page.  Get the values that make who we are -- servername and count.    
        var count = document.getElementById('count').value;    
        var CurrentSystem = document.getElementById('serverID').value;    
        var x = '/CyberPass3/?command=homepage&server=' + CurrentSystem + '&count='+ count + '&NoCache=' + ((new Date()).getTime());    

        location.replace('/CyberPass3/?command=homepage&server=' + CurrentSystem + '&count='+ count + '&NoCache=' + ((new Date()).getTime()));    
    }    
    else    
    {    
        if (link == 1)    
        {    
            document.getElementById('serverID').value  = document.getElementById('Rightlink').value    
        } else {            
            document.getElementById('serverID').value = document.getElementById('Leftlink').value    
        }    

        // we've moved left or right.  Lets update.    
        AjaxInitialUpdate()    
    }    

}    

function AjaxCheckOutPassword() {    

                console.log("Checkout Code not yet written");    
};    


function AjaxInitialUpdate() {    
    var xhr = ""    
    var xhr = new XMLHttpRequest();    
    var count = document.getElementById('count').value;    
    var link = document.getElementById('serverID').value    
    document.getElementById('myModal1').style.display = "block";   // show we are updating everything..    
    document.getElementById('myModal2').style.display = "none";   // should already be hidden, but lets make sure..    
    xhr.open('GET', 'http://PSShellSrv.mydomain.local:80/CyberPass3/?command=update&sub=refresh&server=' + link + '&count=' + count + '&NoCache=' + ((new Date()).getTime()), true);    
    xhr.responseType = 'text';    

    xhr.onload = function () {    
        console.log('Initail Response.');    
        if (xhr.readyState === xhr.DONE) {    
            if (xhr.status === 200) {    

                WebFields = xhr.responseText.split("|");    

                document.getElementById("DynServerName").innerHTML = WebFields[0];    
                document.getElementById("DynAdminID").innerHTML = WebFields[1];    
                document.getElementById("DynLastCheckedout").innerHTML = WebFields[2];    
                document.getElementById("DynLastCheckedBy").innerHTML = WebFields[3];    
                document.getElementById("DynExpectedBack").innerHTML = WebFields[4];    
                document.getElementById("DynLastReset").innerHTML = WebFields[5];    
                document.getElementById("PassStatus").innerHTML = WebFields[6];    
                document.getElementById("DynEmailCheckIn").innerHTML = WebFields[7];    
                document.getElementById("DynEmailCheckOut").innerHTML = WebFields[8];    
                // if no comment, don't even dispay the table cells.    
                if (WebFields[9].slice(0,1) == "{" && WebFields[9].slice(-1) == "}" && WebFields[9] != "{}" )    
                {    
                   var res = WebFields[9].split("{");    
                   var res = res[1].split("}")[0];    
                   document.getElementById("DynAccountPurpose").innerHTML = "<tr><td style='width: 474px;' colspan='2'><p><b>Account Comments:</b></p><p class='tab'>" + res + "</p></td></tr>";    
                   }    
                else    
                {    
                    document.getElementById("DynAccountPurpose").innerHTML = "";    
                    console.log("No Comment");    
                };    

                // lets populate the nav buttons..    
                if (WebFields[10] == '\\')    
                {    
                    // hide go left    
                    document.getElementById('Show-Left').style.display = 'none';    
                    document.getElementById("Leftlink").value = "0/0"    
                }    
                else    
                {    
                    //Enable go left    
                    document.getElementById('Show-Left').style.display = 'block';    
                    document.getElementById('Leftlink').value  = WebFields[10];    

                };    


                // lets populate the nav buttons..    
                if (WebFields[11] == "\\")    
                {    
                    // hide go right    
                    document.getElementById('Show-Right').style.display = 'none';    
                    document.getElementById("Rightlink").value = "0/0";    
                }    
                else    
                {    
                    // Enable go right    
                    document.getElementById('Show-Right').style.display = 'block';    
                    document.getElementById("Rightlink").value  = WebFields[11];    
                };    
                document.getElementById('myModal1').style.display = "none";    
            }    
            if (xhr.status === 403) {    
                console.log(xhr.response);    
                document.getElementById("PassStatus").innerHTML = 'Access Denied';    
            }    
            if (xhr.status === 404) {    
                console.log(xhr.response);    
                document.getElementById("PassStatus").innerHTML = 'Unable to load';    
            };    
        }    
        else    
        {    
            document.getElementById("PassStatus").innerHTML = "Failed";    
        };    
};    

xhr.send(null);    

};    

// Now, load the initial value..    
window.onload = AjaxInitialUpdate();    

</script>    

当我调用 AjaxChangePassword()时,我希望在查询之前打开模式。 现在,如果在页面加载后但在启动此功能之前停止服务器,则模态永远不会弹出,然后一旦启动服务器端备份,就会看到查询进入并获得答案,仅然后它会弹出,然后只持续一秒钟。

我所说的方式我做错了什么?

1 个答案:

答案 0 :(得分:0)

当我查看您的代码时,发现在函数AjaxChangePassword中,首先打开模式,然后调用ajax,然后关闭模式,问题是基本上javascript是同步执行的,但是如果存在ajax调用,那么它将异步执行,因此根据您的模态打开,然后调用ajax,直到ajax忙于获取响应之前,下一行将被执行,该行用于模态关闭,这种情况发生在ms的几分之一内,所以您什么也看不到,并且您说过ajax调用模态之后之所以显示,是因为在AjaxChangePassword中,回调方法是AjaxInitialUpdate,并且在此方法中您先打开模式,然后关闭,但是请记住,在此方法中,您在回调方法中已关闭模式,所以它出现了一段时间,根据我的看法,您只需删除即可

document.getElementById('myModal1').style.display = "none";

下面的AjaxChangePassword方法中的这一行已更正为AjaxChangePassword函数

    function AjaxChangePassword(){    

    document.getElementById('myModal1').style.display = "block";    
    document.getElementById('myModal2').style.display = "none";   // Make sure its not poped up..    
    // we need to set item on the modal to explain what we are doing...    
    document.getElementById("ModalTextLine1").innerHTML="Processing password change request.  Please Wait"   

    var xhr = "";    
    var xhr = new XMLHttpRequest();    

    // server will check if values are valid..    
    var Server = document.getElementById("DynServerName").innerHTML;    
    var AdminID = document.getElementById("DynAdminID").innerHTML;    

    xhr.open('GET', 'http://PSShellSrv.mydomain.local:80/CyberPass3/?command=update&sub=change&server=' + Server + '/' + AdminID+'&NoCache=' + ((new Date()).getTime()), true);    

    xhr.responseType = 'text';    

    xhr.onload = function () {    
        console.log('Initail Comment Response onpassword change.');    
        if (xhr.readyState === xhr.DONE) {    
            if (xhr.status === 200) {    
               document.getElementById('myModal1').style.display = "none";  
                console.log(xhr.response);    
                console.log("Report password changed.");    
                AjaxInitialUpdate() // password changed, lets refresh.    
            };    
        };    

    };    
    xhr.send(null);  
}; 

并检查。我可能错了,但请检查一下。