Here we are going to explain what is ajaxStart() method  or how to use ajaxStart() method or why use ajaxStart () method  or how to show loading message on the web page while the ajax request is being processed  in jQuery with example.


The jQuery ajaxStart() method is used to show “Loading …” or “Please wait …” type of message on the web page while the ajax request is being processed.

To register a handler to be called when first ajax request start, ajaxStart() method can be used.    

Let’s see a demonstration example of ajaxStart() method 


    Layout = null;
<!DOCTYPE html>
    <meta name="viewport" content="width=device-width" />
    <title> ajaxStart() Method</title>
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <input type="button" id="btnpost" value="Load Data" />
    <div id="divAjaxStart" style="font-size:14px; font-weight:bold;"></div>
    <div id="divResult">
        <table id="student">
        </table>    </div>        <script>
        $("#btnpost").click(function () {
         function (data) {
            for (var i = 0; i < data.length;i++) {
              var row = "<tr><td>" + data[i].StudentId + "</td><td>";               row = row +data[i].Name + "</td><td>" + data[i].Marks + "</td></tr>";
                 $('#student tbody').append(row);
        });        });
        $(document).ajaxStart(function() {
   $("#divAjaxStart").text("Loading Start...");



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Jquery.Controllers
    public class TutorialsController : Controller    {
        public ActionResult Index()        {
  return View();        }
        [HttpPost]        public JsonResult GetJsonData()        {
    Students[] obj = new Students[]  
          new Students()  
               StudentId = 1, 
               Name = "NitinTyagi"
               Marks = 400 
          new Students()  
               StudentId = 2, 
               Name = "AshishTripathi"
               Marks = 500 
   return Json(obj, JsonRequestBehavior.AllowGet);
    public class Students    {            public int StudentId { get; set; }            public string Name { get; set; }            public int Marks { get; set; }    }




In the above code example, when ajax request starts, “Loading Start …” is written inside “divAjaxStart” element of the page.

I hope it will help to you.


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

Welcome to SQL Tutorials Point

Don't have an account? Click here to Create a new account, it takes less than a minute.