AJAX का Introduction
In this page:
$.ajax({
url: "url",
method: "GET",
success: function(data) {
// use data
},
error: function() {
// handle failure
}
});AJAX क्या है?
AJAX किसी page को background में full page reload के बिना server से data request करने देता है; jQuery browser के raw AJAX API को एक simpler, ज़्यादा consistent interface में wrap करता है जो सभी browsers पर एक जैसा काम करता है।
उदाहरण: What is AJAX?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Load</button>
<script>
$("#btn").on("click", function() {
$.ajax({url: "data.php", success: function(data) {
console.log("Received:", data);
}});
});
</script>
</body>
</html>AJAX Method
$.ajax() method url, method, data, success, और error जैसे options वाला एक configuration object accept करता है, आपको यह exactly control करने की पूरी power देते हुए कि request कैसे बनाई और handle की जाए।
उदाहरण: AJAX Method
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.ajax({
url: "data.php",
method: "GET",
success: function(data) { console.log(data); },
error: function() { console.log("Request failed"); }
});
</script>
</body>
</html>Returned Data Handle करना
एक successful request अपना returned data success callback को pass करती है, जहाँ आप इसे page update करने के लिए इस्तेमाल कर सकते हैं -- इसे DOM में insert करना, कोई list भरना, या content बदलना।
उदाहरण: Handling Returned Data
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"></ul>
<script>
$.ajax({url: "data.php", success: function(data) {
$("#list").append("<li>" + data.message + "</li>");
}});
</script>
</body>
</html>AJAX Error Handling
Network requests कई कारणों से fail हो सकती हैं -- एक dropped connection, एक server error, एक bad URL -- इसलिए error callback आपको failure पर कुछ भी दिखाए बिना छोड़ने के बजाय एक friendly message दिखाने देता है।
उदाहरण: AJAX Error Handling
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.ajax({
url: "data.php",
success: function(data) { console.log(data); },
error: function() { console.log("Something went wrong, please try again"); }
});
</script>
</body>
</html>एक छोटे Project में AJAX
AJAX उन छोटे interactive pages के लिए उपयोगी है जहाँ हर चीज़ पहले से load करना बेकार होगा, जैसे सिर्फ तभी extra details fetch करना जब user click करे।
उदाहरण: AJAX in a Small Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="showMore">Show More</button>
<div id="details"></div>
<script>
$("#showMore").on("click", function() {
$.ajax({url: "data.php", success: function(data) {
$("#details").text(data.message);
}});
});
</script>
</body>
</html>- यह उम्मीद करना कि
$.ajax()data सीधे return करेगा जैसेconst d = $.ajax(...), जबकि request asynchronous है और data सिर्फsuccessया.done()में आता है। - ऐसा code इस्तेमाल करना जो
$.ajax()call के तुरंत बाद response पर depend करता है, जो response आने से पहले चल जाता है। - एक
errorcallback भूल जाना ताकि badurlजैसी failed requests silently fail हो जाएँ और user को कुछ न दिखे।
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: