Home >Web Front-end >JS Tutorial >Simple implementation of Ajax to display progress during request

Simple implementation of Ajax to display progress during request

亚连Original: 2018-05-24 17:35:322398browse

ajax technology is used very frequently in web applications. This article uses asp.net MVC as an example to provide a simple implementation method. How is ajax implemented to display a progress bar during the request process? This article is shared with everyone through a combination of code and text description.

Ajax is used more and more frequently in Web applications. In the process of making Ajax calls, there is generally this approach: display a GIF image animation to indicate that the background is working, and at the same time prevent the user from operating this page (for example, the Ajax request is triggered by a certain button, and the user cannot frequently click the button to generate multiple concurrent Ajax request); after the call is completed, the picture disappears and the current page is re-edited. The following figure is an example. The page loads data through an Ajax request through a Load link (left). When the user clicks the link, the Ajax request starts, the GIF image displays the "Loading" status, and the current page is "covered" to prevent the user from continuing to click the Load button (middle); the Ajax request is completed and the response result is returned, and the result is presented. At the same time, the GIF image and the "mask" disappear at the same time (right).

Source code download

Here I also take the ASP.NET MVC application as an example to provide a simple implementation method. Our GIF images and e388a4556c0f65e1904146cc1a846bee as masks are defined in the layout file, and the corresponding CSS is customized for them. The z-index of GIF and maske388a4556c0f65e1904146cc1a846bee are set to 2000 and 1000 respectively (this is arbitrary, as long as the maske388a4556c0f65e1904146cc1a846bee can cover the current page and the GIF image is displayed on the top layer). The latter can cover the entire page by setting position, top, bottom, left and right, and set its background to black.

  <!DOCTYPE html>
  <html>
    <head>
      <title>@ViewBag.Title</title>  
      <style type="text/css">
        .hide{displaynone }
        .progress{z-index }
        .mask{position fixed;top ;right ;bottom ;left ; z-index ; background-color #}
      </style>   
      ...
    </head>
    <body> 
      <p>@RenderBody()</p>
      <img id="progressImgage" class="progress hide" alt="" src="@Url.Content("~/Images/ajax-loader.gif")"/>
      <p id="maskOfProgressImage" class="mask hide"></p>
    </body>
  </html>

Then we define another method ajax2 for jQuery to implement Ajax calling through the following code, which still calls $. ajax(options) implements Ajax calls. In the ajax2 method, we "encapsulate" the complete attribute of the options parameter, so that the displayed GIF image and maske388a4556c0f65e1904146cc1a846bee can be hidden. At the same time, the async attribute of options is overridden, so that it is always executed asynchronously, because only in this way can the browser not be locked and GIF can be displayed normally. Before calling $.ajax(options) to make an Ajax request, we display the GIF image and mask e388a4556c0f65e1904146cc1a846bee and position it in the center. The transparency of the maske388a4556c0f65e1904146cc1a846bee is set accordingly, so the effect shown above (middle) will appear.

 <!DOCTYPE html>
  <html>
    <head>
      ...
      <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-...min.js")"></script>
      <script type="text/javascript">
        $(function () {
          $.ajax = function (options) {
            var img = $("#progressImgage");
            var mask = $("#maskOfProgressImage");
            var complete = options.complete;
            options.complete = function (httpRequest, status) {
              img.hide();
              mask.hide();
              if (complete) {
                complete(httpRequest, status);
              }
            };
            options.async = true;
            img.show().css({
              "position" "fixed",
              "top" "%",
              "left" "%",
              "margin-top" function () { return - * img.height() / ; },
              "margin-left" function () { return - * img.width() / ; }
            });
            mask.show().css("opacity", ".");
            $.ajax(options);
          };
        });
      </script>
    </head>
    ...
  </html>

Now when making Ajax calls, you only need to call $.ajax2. As shown below is the "Load" in the example "The registration code of the click event of the link:

  <a href="#" id="load">Load</a>
  <p id="result"></p>
  <script type="text/javascript">
    $("#load").click(function () {
      $.ajax ({
        url &#39;@Url.Action("GetContacts")&#39;,
        success function(result)
        {
          $("#result").html(result);
        }
      });
    });
  </script>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

jquery implementation class that obtains information from the background through AJAX and displays it on the table

SSH Jquery Ajax framework integration

The above is the detailed content of Simple implementation of Ajax to display progress during request. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jquery implementation class that obtains information from the background through AJAX and displays it on the tableNext article：jquery implementation class that obtains information from the background through AJAX and displays it on the table

See more

Simple implementation of Ajax to display progress during request

Related articles