ajax() से Low-Level AJAX
ajax() method आपको किसी AJAX request पर detailed control देता है। आप खुद URL, method, data, और callbacks set कर सकते हैं।
In this page:
Syntax
$.ajax({
url: "url",
type: "GET",
data: { key: "value" },
dataType: "json",
success: function (response) { /* ... */ },
error: function (xhr, status, error) { /* ... */ }
});1. ajax() क्या है?
$.ajax() वह low-level method है जिस पर हर jQuery AJAX shortcut ($.get, $.post, $.getJSON) असल में internally बना है। इसे सीधे इस्तेमाल करना हर configuration option पर पूरा control देता है।
उदाहरण: 1. What is ajax()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$(document).ajaxError(function(event, xhr, settings) {
$("#output").append($("<div>").text("Request failed: " + settings.url));
});
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$.ajax({url: "data.php", success: function(data) {
$("#output").text(JSON.stringify(data));
}});
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>2. GET Requests
GET तब इस्तेमाल करें जब आपको सिर्फ server से data पढ़ना हो, जैसे products की एक list या किसी user की profile fetch करना। Response success callback में आता है।
उदाहरण: 2. GET Requests
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$(document).ajaxError(function(event, xhr, settings) {
$("#output").append($("<div>").text("Request failed: " + settings.url));
});
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$.ajax({url: "data.php", method: "GET", success: function(data) {
$("#output").text(JSON.stringify(data));
}});
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>3. POST Requests
POST तब इस्तेमाल करें जब आप server को data भेज रहे हों कुछ create या update करने के लिए, जैसे एक form submit करना या एक comment save करना। data option values रखता है।
उदाहरण: 3. POST Requests
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$(document).ajaxError(function(event, xhr, settings) {
$("#output").append($("<div>").text("Request failed: " + settings.url));
});
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$.ajax({url: "data.php", method: "POST", data: {name: "Alice"}, success: function(response) {
$("#output").text(JSON.stringify(response));
}});
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>4. Request Options
ajax() method URL और data के अलावा भी कई configuration options accept करता है। timeout limit करता है कि कितनी देर wait करना है इससे पहले कि give up कर दिया जाए, dataType jQuery को बताता है।
उदाहरण: 4. Request Options
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$(document).ajaxError(function(event, xhr, settings) {
$("#output").append($("<div>").text("Request failed: " + settings.url));
});
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$.ajax({
url: "data.php",
timeout: 5000,
dataType: "json",
success: function(data) { $("#output").text(JSON.stringify(data)); }
});
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>5. Errors Handle करना
error callback तब fire होता है जब भी request fail हो जाती है — एक network problem, एक timeout, या एक server error status। यह jqXHR object receive करता है, एक status text।
उदाहरण: 5. Handling Errors
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$.ajax({
url: "data.php",
error: function(jqXHR, statusText, errorMsg) {
$("#output").text(String(statusText) + " " + errorMsg);
}
});
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
methodयाtypeset करना भूल जाना, ताकि request default रूप से GET हो जाए जबकि POST intended था।dataके साथ एक object भेजना लेकिन server JSON की उम्मीद करता है, जब इसके लिएcontentType: "application/json"औरJSON.stringify(...)चाहिए।dataType: "json"set करना जब server कुछ और return करता है, जोerrorcallback को trigger कर देता है भले ही request succeed हुई हो।
🔒
Chapter Quiz — Complete all 4 topics to unlock
0/4 topics done
Complete these topics first: