Ajax shows a simple implementation of progress in the request process _ajax related

Ajax is used more and more frequently in Web applications. In the process of making Ajax calls, it is common practice to display an animated GIF picture showing that the background is working, while preventing the user from manipulating the page (e.g., Ajax requests are triggered by a button, and users cannot frequently click the button to produce multiple concurrent AJAX requests); After the call is complete, the picture disappears, The current page runs the edit again. The following figure, for example, loads data (left) in an AJAX request through a load link in the page. When the user clicks on the link, the AJAX request begins, the GIF image displays the "Loading" status, and the current page is "covered" to prevent the user from continuing to click the Load button (in), the AJAX request completes the result of the return response, and the GIF picture and the mask Disappears at the same time (right).

SOURCE download

Here I also take the ASP.net MVC application as an example to provide a simple way of implementation. Our GIF pictures and <div> as masks are defined in the layout file and customized with the corresponding CSS. The GIF and mask <div> Z-index are set to 2000 and 1000 respectively (this arbitrary, as long as the mask of <div> to cover the current page, GIF image display on the top). The latter can cover the entire page by setting position, top, bottom, left, and right, and set its background to black.

  <! DOCTYPE html>
   
 

Then we define another method for jquery to implement the Ajax invocation by using the following code, which still calls $.ajax (options) to implement the AJAX call AJAX2. In the Ajax2 method we "encapsulate" the options parameter complete property so that the displayed GIF image and mask <div> can be hidden. It also overrides the Async attribute of the options, which is always performed asynchronously, because the only way the browser can be locked is to be able to display the GIF properly. Before invoking $.ajax (options) for AJAX requests, we display GIF pictures and masks <div> and position them in the middle. Mask <div> Transparency is set accordingly, so the effect of the above image (in) appears.

 <! DOCTYPE html>  

So now it's time to invoke the Ajax call $.ajax2, as shown below is the registration code for the Click event of the "Load" link in the instance:

  <a href= "#" id= "Load" >Load</a>
  <div id= "result" ></div>
  <script type= "text/" JavaScript ">
    $ (" #load "). Click (function () {
      $.ajax ({
        url ' @Url. Action (" getcontacts ") ',
        success function (Result)
        {
          $ (' #result '). HTML (result);
        }
      }
  ); </script>