jQuery AJAX and HTTP Requests

Level: Beginner

ℹ️ What You'll Learn

• What jQuery AJAX and HTTP Requests means in jQuery
• Why this topic matters in real web pages
• How to use it with School Management System examples
• Common beginner mistakes to avoid
• How to explain this topic in interviews

Why This Matters

jQuery AJAX and HTTP Requests is part of the practical frontend foundation. You will use it when building forms, tables, dashboards, reports, and API-connected screens for ASP.NET Core or full-stack projects.

AJAX = Asynchronous JavaScript and XML. Make HTTP requests without page reload.

jQuery has $.ajax(), $.get(), $.post() methods. Modern: Use fetch() API instead.

The Problem

Beginners often copy jQuery code without understanding what each line does. In a real School Management System, that leads to pages that are hard to maintain, hard to debug, or confusing for users. This lesson focuses on understanding the pattern first, then applying it in small practical examples.

$.ajax() — Full Control

// Complete AJAX request
$.ajax({
  url: '/api/students',
  type: 'GET',           // HTTP method
  dataType: 'json',      // Expected response type
  success: function(data) {
    console.log('Success:', data);
  },
  error: function(error) {
    console.log('Error:', error);
  }
});

success called on success. error called on failure.

// POST request with data
$.ajax({
  url: '/api/students',
  type: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({
    name: 'Ravi Kumar',
    email: 'ravi@example.com',
    className: '10'
  }),
  success: function(response) {
    alert(response.name + ' registered');
  },
  error: function(xhr, status, error) {
    alert('Error: ' + error);
  }
});

contentType: 'application/json' tells server data is JSON. data: JSON.stringify(obj) converts object to JSON string.

Shorthand Methods

// $.get() — GET request
$.get('/api/students', function(data) {
  console.log(data);
});

// $.post() — POST request
$.post('/api/students', {
  name: 'Ravi',
  email: 'ravi@example.com'
}, function(response) {
  console.log(response);
});

// Both take URL, data, success callback

Shorthand simpler for basic requests. $.ajax() for complex needs.

Handling Responses

$.ajax({
  url: '/api/students/101',
  dataType: 'json',
  success: function(data) {
    // data = JavaScript object (auto-parsed from JSON)
    console.log(data.name);
    console.log(data.className);
  }
});

// Equivalent vanilla JavaScript (Fetch API)
fetch('/api/students/101')
  .then(response => response.json())
  .then(data => {
    console.log(data.name);
  });

jQuery auto-parses JSON. Fetch requires .json() call.

Error Handling

$.ajax({
  url: '/api/students',
  type: 'GET',
  success: function(data) {
    console.log('Success:', data);
  },
  error: function(xhr, status, errorThrown) {
    console.log('Status:', xhr.status);        // 404, 500, etc.
    console.log('Error:', errorThrown);        // Error message
    console.log('Response:', xhr.responseText); // Server response
  }
});

xhr = XMLHttpRequest object. Has status, responseText properties.

Loading States

$('#submitBtn').click(function() {
  // Disable button, show loading
  $(this).prop('disabled', true).text('Registering...');

  $.ajax({
    url: '/api/students',
    type: 'POST',
    data: { name: 'Ravi', email: 'ravi@example.com' },
    success: function(response) {
      alert('Success!');
    },
    error: function() {
      alert('Error');
    },
    complete: function() {
      // Always runs (success or error)
      $('#submitBtn').prop('disabled', false).text('Register');
    }
  });
});

complete runs after success or error. Good for cleanup (hide loading, enable buttons).

SMS Example — Fetch Students

function loadStudents() {
  $.ajax({
    url: '/api/students',
    type: 'GET',
    dataType: 'json',
    success: function(students) {
      const tbody = $('#studentTable tbody');
      tbody.empty();

      $.each(students, function(index, student) {
        const row = `
          <tr data-studentId="${student.id}">
            <td>${student.rollNumber}</td>
            <td>${student.name}</td>
            <td>${student.email}</td>
            <td>${student.className}</td>
            <td><span class="status-${student.status.toLowerCase()}">${student.status}</span></td>
            <td><button class="delete-btn" data-id="${student.id}">Delete</button></td>
          </tr>
        `;
        tbody.append(row);
      });

      $('#studentCount').text(students.length);
    },
    error: function(xhr) {
      alert('Error loading students: ' + xhr.status);
    }
  });
}

// Create student
$('#studentForm').on('submit', function(event) {
  event.preventDefault();

  const formData = {
    rollNumber: $('#rollNumber').val(),
    name: $('#name').val(),
    email: $('#email').val(),
    className: $('#className').val()
  };

  $('#submitBtn').prop('disabled', true).text('Registering...');

  $.ajax({
    url: '/api/students',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(formData),
    success: function(response) {
      alert(response.name + ' registered!');
      $('#studentForm')[0].reset();
      loadStudents();
    },
    error: function(xhr) {
      alert('Error: ' + (xhr.responseText || 'Unknown error'));
    },
    complete: function() {
      $('#submitBtn').prop('disabled', false).text('Register');
    }
  });
});

// Delete student
$('#studentTable tbody').on('click', '.delete-btn', function(event) {
  event.preventDefault();

  const studentId = $(this).data('id');
  const name = $(this).closest('tr').find('td:nth-child(2)').text();

  if (confirm(`Delete ${name}?`)) {
    $.ajax({
      url: '/api/students/' + studentId,
      type: 'DELETE',
      success: function() {
        alert('Student deleted');
        loadStudents();
      },
      error: function(xhr) {
        alert('Error: ' + xhr.status);
      }
    });
  }
});

// Initialize
$(document).ready(function() {
  loadStudents();
});

$.each() — Loop Through Data

// Loop through array
$.each(students, function(index, student) {
  console.log(index, student.name);
});

// Equivalent vanilla JavaScript
students.forEach((student, index) => {
  console.log(index, student.name);
});

$.each() rarely used anymore. Modern: use .forEach().

jQuery vs Fetch API

Need	jQuery AJAX	Fetch API
Simple GET	$.get()	fetch()
POST	$.ajax() / $.post()	fetch() + headers
Response parsing	Auto JSON	.json() call
Error handling	error callback	.catch()
Loading states	beforeSend, complete	Manual
Browser support	Old browsers	Modern only

Fetch API more verbose but standard. jQuery AJAX shorter but library-dependent.

Key Takeaways

• $.ajax() — complete control over requests
• $.get(), $.post() — shortcuts for simple requests
• success, error, complete callbacks
• dataType: 'json' auto-parses response
• jQuery AJAX works, but Fetch API is modern standard
• For new code: use Fetch API (no library needed)

💡 Backend Developer Tip

jQuery AJAX built on XMLHttpRequest (older standard). Fetch API is modern replacement. If using jQuery for other reasons, AJAX works fine. But for new projects, Fetch is cleaner and has no dependencies.

⚠️ AJAX Common Mistakes

1. Not setting contentType — Server doesn't know data is JSON
2. Forgetting JSON.stringify() — Sends object as string instead of JSON
3. Not checking response status — Success callback runs even on error sometimes
4. Missing error handler — No way to know request failed
5. Blocking UI during request — No loading state feedback

🤖Use AI to Learn Faster

Use ChatGPT, Claude, or Copilot to go deeper on jQuery AJAX. Try these prompts:

• "How does $.ajax() compare to Fetch?"
• "When use $.get() vs $.post()?"
• "What's dataType: 'json' for?"
• "Quiz me on jQuery AJAX"

💡 Tip: After reading this article, paste your own code into AI and ask "What could go wrong here and why?" — fastest way to find edge cases and deepen understanding.

Quick Definitions

• jQuery AJAX and HTTP Requests - The main concept explained in this lesson.
• Selector/element/data - The page item or value you work with while applying this concept.
• Real project usage - How this appears in forms, tables, dashboards, or API-connected pages.

Common Mistakes

• Copying code without understanding what each line does
• Forgetting to test with real School Management System data
• Ignoring mobile screens and accessibility
• Mixing structure, styling, and behavior in a confusing way
• Not checking browser DevTools when something does not work

Practice Task

Create a small School Management System example using jQuery AJAX and HTTP Requests. Keep it simple first, then improve it step by step.

Suggested practice:

1. Build a small student-related screen or component.
2. Use clear names for elements, classes, variables, or functions.
3. Test one success case and one failure case.
4. Explain the code in your own words.
5. Rebuild it once without looking at the article.

Quick Revision

Question	Answer
What is the main idea?	Understand and apply jQuery AJAX and HTTP Requests in a real page.
Where is it used?	Student forms, reports, dashboards, and admin screens.
What should beginners focus on?	Clear structure, small examples, and repeated practice.
What is the best debugging habit?	Inspect the page in browser DevTools and test one change at a time.

🎯 How would you explain jQuery AJAX and HTTP Requests in an interview?

jQuery AJAX and HTTP Requests is a practical jQuery concept used to build clear, maintainable web pages. I would explain what problem it solves, show a small example, and mention one common mistake beginners should avoid.

🎯 Where is this used in a real project?

It is used in screens like student registration, attendance entry, marks reports, dashboards, and API-connected admin pages.

Next Article

jQuery DOM Manipulation ->