मूल अजाक्स का उपयोग करना:
-
सर्वर साइड और क्लाइंट साइड की कुछ बुनियादी धारणाएं;
-
कुछ बुनियादी जावास्क्रिप्ट (jquery) धारणाओं को नेड करें;
-
और कुछ html और जावास्क्रिप्ट मूल बातें।
पहले भाग के लिए:
सर्वर-साइड प्रोग्रामिंग कोड लिख रहा है जो सर्वर द्वारा समर्थित भाषाओं का उपयोग करते हुए सर्वर पर चलता है (जैसे जावा, पीएचपी, सी #; कोड लिखना संभव है जो जावास्क्रिप्ट में सर्वर-साइड पर निष्पादित होता है)। क्लाइंट-साइड प्रोग्रामिंग कोड लिख रहा है जो क्लाइंट पर चलेगा, और उन भाषाओं में किया जाता है जिन्हें ब्राउज़र द्वारा निष्पादित किया जा सकता है, जैसे कि जावास्क्रिप्ट, एचटीएमएल और सीएसएस।
दूसरे के लिए:
अजाक्स jQuery कोर घोषित करने के लिए महत्वपूर्ण है।
उदाहरण:
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
अंतिम संस्करण jQuery Core का उपयोग करें।
AJAX कौन काम करता है, इसकी धारणा रखें।
अजाक्स इन चरणों को करते हुए काम करता है:
- वेब पेज में एक घटना होती है (पेज लोड हो जाता है, एक बटन क्लिक किया जाता है)
- JavaScript द्वारा XMLHttpRequest ऑब्जेक्ट बनाया गया है
- XMLHttpRequest ऑब्जेक्ट वेब सर्वर को एक अनुरोध भेजता है
- सर्वर अनुरोध को संसाधित करता है
- सर्वर वेब पेज पर वापस प्रतिक्रिया भेजता है
- प्रतिक्रिया जावास्क्रिप्ट द्वारा पढ़ी जाती है
- जावास्क्रिप्ट द्वारा उचित कार्रवाई (जैसे पेज अपडेट) की जाती है
अधिक जानकारी के लिए इस लिंक का उपयोग करें:https://www.w3schools.com/xml/ajax_intro.asp
अनुरोध को कॉन्फ़िगर करें:
यूआरएल:
टाइप करें:स्ट्रिंग
विवरण:एक स्ट्रिंग जिसमें URL होता है जिस पर अनुरोध भेजा जाता है।
डेटा:
टाइप करें:PlainObject या String या Array
विवरण:सर्वर को भेजा जाने वाला डेटा। इसे एक क्वेरी स्ट्रिंग में बदल दिया जाता है, यदि पहले से कोई स्ट्रिंग नहीं है। यह GET-अनुरोधों के लिए url में संलग्न है। इस स्वचालित प्रसंस्करण को रोकने के लिए प्रक्रियाडेटा विकल्प देखें। ऑब्जेक्ट की/वैल्यू पेयर होना चाहिए। यदि मान एक ऐरे है, तो jQuery पारंपरिक सेटिंग (नीचे वर्णित) के मूल्य के आधार पर एक ही कुंजी के साथ कई मानों को क्रमबद्ध करता है।
डेटा टाइप (डिफ़ॉल्ट:इंटेलिजेंट गेस (xml, json, script, या html)):
टाइप करें:स्ट्रिंग
विवरण:डेटा का वह प्रकार जिसकी आप सर्वर से वापस अपेक्षा कर रहे हैं। यदि कोई निर्दिष्ट नहीं है, तो jQuery प्रतिक्रिया के एमआईएम प्रकार के आधार पर इसका अनुमान लगाने का प्रयास करेगा (एक एक्सएमएल एमआईएम प्रकार एक्सएमएल उत्पन्न करेगा, 1.4 में जेएसओएन एक जावास्क्रिप्ट ऑब्जेक्ट उत्पन्न करेगा, 1.4 स्क्रिप्ट में स्क्रिप्ट निष्पादित करेगा, और कुछ भी होगा एक स्ट्रिंग के रूप में लौटा)। उपलब्ध प्रकार (और आपके सफलता कॉलबैक के पहले तर्क के रूप में पारित परिणाम) हैं:
xml:एक XML दस्तावेज़ देता है जिसे jQuery के माध्यम से संसाधित किया जा सकता है।
html:HTML को सादे पाठ के रूप में लौटाता है; शामिल स्क्रिप्ट टैग का मूल्यांकन DOM में डालने पर किया जाता है।
स्क्रिप्ट:जावास्क्रिप्ट के रूप में प्रतिक्रिया का मूल्यांकन करता है और इसे सादे पाठ के रूप में लौटाता है। क्वेरी स्ट्रिंग पैरामीटर, _=[TIMESTAMP] को URL में जोड़कर कैशिंग अक्षम करता है, जब तक कि कैश विकल्प सत्य पर सेट न हो। नोट:यह दूरस्थ-डोमेन अनुरोधों के लिए POST को GET में बदल देगा।
json:प्रतिक्रिया का मूल्यांकन JSON के रूप में करता है और एक JavaScript ऑब्जेक्ट देता है। क्रॉस-डोमेन "json" अनुरोधों को "jsonp" में तब तक परिवर्तित किया जाता है जब तक कि इसके अनुरोध विकल्पों में अनुरोध मेंjsonp:false शामिल न हो। JSON डेटा को सख्त तरीके से पार्स किया जाता है; किसी भी विकृत JSON को अस्वीकार कर दिया जाता है और एक पार्स त्रुटि फेंक दी जाती है। JQuery 1.9 के अनुसार, एक खाली प्रतिक्रिया को भी अस्वीकार कर दिया जाता है; सर्वर को इसके बजाय शून्य या {} की प्रतिक्रिया वापस करनी चाहिए। (उचित JSON फॉर्मेटिंग के बारे में अधिक जानकारी के लिए json.org देखें।)jsonp:JSONP का उपयोग करके JSON ब्लॉक में लोड होता है। एक अतिरिक्त "?callback=?" जोड़ता है कॉलबैक निर्दिष्ट करने के लिए अपने यूआरएल के अंत में। क्वेरी स्ट्रिंग पैरामीटर, "_=[TIMESTAMP]" को URL में जोड़कर कैशिंग को अक्षम करता है, जब तक कि कैश विकल्प true.text पर सेट न हो:एक सादा पाठ string.multiple, स्थान-पृथक मान:jQuery 1.5 के अनुसार, jQuery सामग्री-प्रकार शीर्षलेख में जो कुछ प्राप्त हुआ है उससे डेटा टाइप को कनवर्ट करें जो आपको चाहिए। उदाहरण के लिए, यदि आप चाहते हैं कि टेक्स्ट प्रतिक्रिया को एक्सएमएल माना जाए, तो डेटा टाइप के लिए "टेक्स्ट एक्सएमएल" का उपयोग करें। आप एक JSONP अनुरोध भी कर सकते हैं, इसे टेक्स्ट के रूप में प्राप्त कर सकते हैं, और jQuery द्वारा XML के रूप में व्याख्या की गई है:"jsonp text xml"। इसी तरह, एक शॉर्टहैंड स्ट्रिंग जैसे "jsonp xml" पहले jsonp से xml में कनवर्ट करने का प्रयास करेगी, और ऐसा न होने पर, jsonp से टेक्स्ट में और फिर टेक्स्ट से xml में कनवर्ट करने का प्रयास करेगी।
टाइप करें (डिफ़ॉल्ट:'GET'):
टाइप करें:स्ट्रिंग
विवरण:अनुरोध के लिए उपयोग की जाने वाली HTTP विधि (जैसे "POST", "GET", "PUT")। (संस्करण जोड़ा गया:1.9.0)
सफलता:
प्रकार:फ़ंक्शन (कुछ भी डेटा, स्ट्रिंग टेक्स्टस्टैटस, jqXHR jqXHR)
विवरण:अनुरोध सफल होने पर कॉल किया जाने वाला फ़ंक्शन। फ़ंक्शन को तीन तर्क दिए जाते हैं:सर्वर से लौटाया गया डेटा, डेटा टाइप पैरामीटर या डेटाफ़िल्टर कॉलबैक फ़ंक्शन के अनुसार स्वरूपित, यदि निर्दिष्ट हो; स्थिति का वर्णन करने वाली एक स्ट्रिंग; और jqXHR (jQuery 1.4.x, XMLHttpRequest में) ऑब्जेक्ट। JQuery 1.5 के अनुसार, सफलता सेटिंग कार्यों की एक सरणी को स्वीकार कर सकती है। प्रत्येक समारोह को बारी-बारी से बुलाया जाएगा। यह एक अजाक्स घटना है।
कॉन्फ़िगरेशन के बारे में अधिक जानकारी के लिए लिंक का उपयोग करें:http://api.jquery.com/jquery.ajax /
उदाहरण:
अजाक्स:
$.ajax({
url: 'test.php',
type: 'POST',
datatype: 'Json',
data: {'var1': val_1, 'var2': val_2},
success: function (response) {
$('.search-results').html(response);
}
});
पीएचपी:
$val = $_POST['var1'];//recive the values from ajax
$val = $_POST['var2'];
...// The code to recive and create html code.
echo json_encode($html);//send values back to the main page.
तीसरे और अंतिम भाग के लिए:
- एचटीएमएल से जावास्क्रिप्ट फ़ंक्शन को कैसे कॉल करें और दोनों के बीच पैरामीटर पास करें। इस लिंक का प्रयोग करें:एचटीएमएल से जावास्क्रिप्ट फ़ंक्शन को कैसे कॉल करें और इसके माध्यम से पैरामीटर पास करें
एक पूर्ण कार्य उदाहरण:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var var_1 =
$.ajax({
url: 'test.php',
type: 'POST',
datatype: 'Json',
data: {'q': str},
success: function (response) {
if(response.error_state = ""){
document.getElementById("txtHint").innerHTML = response.html;
}
else{
document.getElementById("txtHint").innerHTML = response.response.error_state;
}
}
});
}
}
</script>
</body>
</html>
सर्वर साइड PHP (teste.php):
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_POST['q']);
$error_state = "";
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
//die('Could not connect: ' . mysqli_error($con));
$error_state = "<p>"."Could not connect:". mysqli_error($con)."</p>";
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
$html = "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
$html = $html. "<tr>";
$html = $html. "<td>" . $row['FirstName'] . "</td>";
$html = $html. "<td>" . $row['LastName'] . "</td>";
$html = $html. "<td>" . $row['Age'] . "</td>";
$html = $html. "<td>" . $row['Hometown'] . "</td>";
$html = $html. "<td>" . $row['Job'] . "</td>";
$html = $html. "</tr>";
}
$html = $html. "</table>";
mysqli_close($con);
echo json_encode (array(
'html'=>$html,
'error_state'=>$error_state
));
?>
</body>
</html>
कोई संदेह है, बस मेरी मदद मांगें।
अच्छा काम! और अगर यह मदद करता है तो उत्तर को स्वीकार करना न भूलें।
