🧠 What is jQuery?
jQuery is a fast, lightweight, and feature-rich JavaScript library. It simplifies common JavaScript tasks such as DOM manipulation, event handling, animations, and AJAX calls with a simple, easy-to-use syntax.
✅ Why use jQuery?
Cross-browser compatibility
Simplified DOM traversal and manipulation
Easier event handling
Built-in animation support
Simple AJAX calls
🧪 Basic jQuery Syntax
// Basic jQuery syntax
$(document).ready(function() {
$(‘#myButton’).click(function() {
alert(‘Button clicked!’);
});
});
$: jQuery function
$(document).ready(): Ensures DOM is fully loaded
$(‘#myButton’): Selects an element with ID myButton
.click(): Event listener for click events
🔄 What is AJAX?
AJAX stands for Asynchronous JavaScript and XML. It allows web pages to update content asynchronously—fetching data from the server and updating the UI without reloading the page.
📦 AJAX Use Cases:
Submitting forms without reloading
Live search suggestions
Real-time content updates (e.g., chat apps)
Loading additional data as you scroll
⚙️ Using AJAX with jQuery
$.ajax({
url: ‘server.php’,
type: ‘POST’,
data: { name: ‘Ajeet’, email: ‘ajeet@example.com’ },
success: function(response) {
$(‘#result’).html(response);
},
error: function(xhr, status, error) {
console.log(‘Error: ‘ + error);
}
});
🔍 Breakdown:
url: The server script to send the request to
type: HTTP method (GET/POST)
data: Data sent to the server
success: Callback if request succeeds
error: Callback if something goes wrong
📝 Example: Submit Form Without Page Refresh
<form id=”myForm”>
<input type=”text” name=”username” placeholder=”Enter Username” />
<button type=”submit”>Submit</button>
</form>
<div id=”response”></div>
<script>
$(‘#myForm’).submit(function(e) {
e.preventDefault(); // Prevent form from submitting normally
$.ajax({
url: ‘submit.php’,
type: ‘POST’,
data: $(this).serialize(), // Serialize form data
success: function(data) {
$(‘#response’).html(data);
}
});
});
</script>
🚀 Benefits of Using jQuery AJAX
Clean, readable code
No need to write raw XMLHttpRequest
Faster development
Easily handles JSON, XML, HTML responses
Works across all modern browsers
🔚 Conclusion
jQuery and AJAX together make it easy to build interactive, user-friendly web applications. While modern frameworks like React and Vue have taken over many use cases, jQuery remains relevant for quick implementations and legacy systems.