javascript - 如何使客户端请求保持事件状态以延迟jsf中服务器的响应

Question

我的 JSF 页面中有一个 p:commandButton。当用户单击时，会从数据库中检索大量数据并将其写入 excel 文件并作为响应返回给用户。这可能需要长达数小时的时间。但是在使用 IE 将近一个小时后，它显示“无法加载页面”错误消息，即使进程仍在服务器端运行。我知道这是由于客户端对服务器预期响应时间的配置而发生的。它因浏览器而异。

即使很艰难，我在计算期间不断从服务器向客户端发送 ajax 更新，以向用户显示已处理数据的百分比并且它有效但我的客户端仍然死机。此外，我的 JSF 页面上有一个 p:progressBar，它还显示了每个更新间隔的百分比。

如何通过代码让我的客户保持活力？以便在发送请求后，可以长时间等待响应。

我们有不同的用户使用不同的浏览器。我需要一个适用于所有主要浏览器的解决方案。这是我的代码。

<p:dialog id="alert-exp-info-dialog"
          widgetVar="alertExpInfoDialog">

    <p:ajax event="close"
            listener="#{bean.onExportDialogClose}"
            process="@this"
            update=":alert-exp-info-form"
            immediate="true" />

    <h:form id="alert-exp-info-form">

        <h:outputFormat id="alert-exp-detail"
                        value="So info for user">
            <f:param value="#{bean.exportedAlertsCount}" />
            <f:param value="#{bean.totalExportableAlerts}" />
        </h:outputFormat>

        <p:progressBar id="alert-exp-progress" 
                        widgetVar="alertExpProgress"  
                        value="#{bean.exportProgress}" 
                        labelTemplate="{value}%"
                        interval="3000"
                        ajax="true">
                <p:ajax event="complete" 
                        listener="# {bean.onExportComplete}"/>
                <f:event type="preValidate" 
                        update="alert-exp-abort-btn" 
                        listener="#{bean.updateComponents}" />
        </p:progressBar>

        <h:panelGroup id="alert-exp-button-panel">
        <p:commandButton id="alert-exp-proceed-btn"
                        value="Process"
                        action="#{bean.doCalculation}"
                        onclick="alertExpProgress.start();"
                        ajax="false">
            <p:ajax update="alert-exp-button-panel" />
        </p:commandButton>
        </h:panelGroup>

    </h:form>

</p:dialog>

public void doCalculation()
{
    FacesContext context = FacesContext.getCurrentInstance();
    //Too long calculation...
    for ( loop )
    {
    ...
    ...
    }
    //Finally writing excel file on responce
    context.setResponseContentType( "application/vnd.openxmlformats- officedocument.spreadsheetml.sheet" );
    context.setResponseHeader( "Expires", "0" );
    context.setResponseHeader( "Cache-Control", "must-revalidate, post-  check=0, pre-check=0" );
    context.setResponseHeader( "Pragma", "public" );
    context.setResponseHeader( "Content-disposition", "attachment;filename=" + ( fileName.endsWith( ".xlsx" ) ? fileName : fileName + ".xlsx" ) );
    context.addResponseCookie( Constants.DOWNLOAD_COOKIE, "true", new HashMap<String, Object>() );

    OutputStream out = context.getResponseOutputStream();
    generatedExcel.write( out );
    out.close();
    context.responseFlushBuffer();
    context.responseComplete();
}  

public void updateComponents()
{
    RequestContext.getCurrentInstance().update( "alert-exp-info-form:alert-    exp-detail" );
}

public void onExportComplete()
{
    RequestContext context = RequestContext.getCurrentInstance();
    context.execute("alertExpInfoDialog.hide();");
}

Answer 1

我通过 ajax 触发长时间处理解决了这个问题，最后通过单独的按钮单击下载生成的 excel 文件。