Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how ajax displays background processing progress in real time". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "how ajax displays background processing progress in real time".

There are more and more ajax applications, and most ajax processing displays a "loading..." in the foreground, then submits the data to the server for processing, and displays "processed" after processing. Can we make ajax more friendly and show the progress of server processing in real time? This is especially important in long-running requests, such as uploading files, sending emails, and processing data in batches. Of course the answer is yes, otherwise you wouldn't have written this, would you, ^ _ ^.

Existing problems:

To solve the above functions, you need to solve the following problems:

1. How the server passes part of the response to the browser after processing part of the data.

2. How can the browser handle some of the data passed by the server and maintain the http connection until the processing is complete.

To solve the first problem, use flush to allow response to be rendered in blocks. For details, please refer to my essay "flush lets pages be divided into blocks and rendered step by step".

For the second problem, you need to use the readyState state of XMLHttpRequest. W3C defines the following values for readyState:

UNSENT = 0; / / No request was sent

OPENED = 1; / / http connection has been opened

HEADERS_RECEIVED = 2; / / received response header

LOADING = 3; / / actually receive response body

DONE = 4; / / request received

I believe that status 4 is used every day, and what we need here is status 3.

Example:

Cut the crap, code examples are more useful than any textual explanation. We assume that one processing of the server takes 6 seconds, one record per second, and a total of six records are processed. We need the client to display the processing progress (including text and progress bar) every time the server processes one piece of data.

Server-side code (the following JSP code):

The copy code is as follows:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.