एएसपी अजाक्स
AJAX पूरे पृष्ठ को पुनः लोड किए बिना, वेब पेज के कुछ हिस्सों को अपडेट करने के बारे में है।
अजाक्स क्या है?
AJAX = अतुल्यकालिक जावास्क्रिप्ट और XML।
AJAX तेज़ और गतिशील वेब पेज बनाने की एक तकनीक है।
AJAX वेब पेजों को परदे के पीछे सर्वर के साथ छोटी मात्रा में डेटा का आदान-प्रदान करके अतुल्यकालिक रूप से अपडेट करने की अनुमति देता है। इसका मतलब है कि पूरे पेज को फिर से लोड किए बिना, वेब पेज के कुछ हिस्सों को अपडेट करना संभव है।
क्लासिक वेब पेज, (जो AJAX का उपयोग नहीं करते हैं) अगर सामग्री बदलनी चाहिए तो पूरे पेज को फिर से लोड करना चाहिए।
AJAX का उपयोग करने वाले एप्लिकेशन के उदाहरण: Google मानचित्र, Gmail, Youtube और Facebook टैब।
AJAX कैसे काम करता है
AJAX इंटरनेट मानकों पर आधारित है
AJAX इंटरनेट मानकों पर आधारित है, और इसके संयोजन का उपयोग करता है:
- XMLHttpRequest ऑब्जेक्ट (सर्वर के साथ अतुल्यकालिक रूप से डेटा का आदान-प्रदान करने के लिए)
- जावास्क्रिप्ट/डोम (सूचना के साथ प्रदर्शित/बातचीत करने के लिए)
- CSS (डेटा को स्टाइल करने के लिए)
- एक्सएमएल (अक्सर डेटा स्थानांतरित करने के प्रारूप के रूप में उपयोग किया जाता है)
AJAX एप्लिकेशन ब्राउज़र- और प्लेटफ़ॉर्म-स्वतंत्र हैं!
गूगल सुझाव
AJAX को 2005 में Google द्वारा Google सुझाव के साथ लोकप्रिय बनाया गया था।
Google सुझाव एक बहुत ही गतिशील वेब इंटरफ़ेस बनाने के लिए AJAX का उपयोग कर रहा है: जब आप Google के खोज बॉक्स में टाइप करना शुरू करते हैं, तो एक जावास्क्रिप्ट एक सर्वर को पत्र भेजता है और सर्वर सुझावों की एक सूची देता है।
आज ही AJAX का उपयोग शुरू करें
हमारे एएसपी ट्यूटोरियल में, हम प्रदर्शित करेंगे कि कैसे AJAX पूरे पृष्ठ को पुनः लोड किए बिना वेब पेज के कुछ हिस्सों को अपडेट कर सकता है। सर्वर स्क्रिप्ट ASP में लिखी जाएगी।
यदि आप AJAX के बारे में अधिक जानना चाहते हैं, तो हमारे AJAX ट्यूटोरियल पर जाएँ ।
AJAX एएसपी उदाहरण
निम्नलिखित उदाहरण प्रदर्शित करेगा कि कैसे एक वेब पेज एक वेब सर्वर के साथ संचार कर सकता है जबकि एक उपयोगकर्ता इनपुट फ़ील्ड में वर्ण टाइप करता है:
उदाहरण
Start typing a name in the input field below:
Suggestions:
उदाहरण समझाया गया
उपरोक्त उदाहरण में, जब कोई उपयोगकर्ता इनपुट फ़ील्ड में एक वर्ण टाइप करता है, तो "शोहिंट ()" नामक एक फ़ंक्शन निष्पादित होता है।
फ़ंक्शन ऑनकीअप ईवेंट द्वारा ट्रिगर किया गया है।
यहाँ एचटीएमएल कोड है:
उदाहरण
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new
XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 &&
this.status == 200) {
document.getElementById("txtHint").innerHTML =
this.responseText;
}
};
xmlhttp.open("GET", "gethint.asp?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Start typing a name in the
input field below:</b></p>
<form>
First name: <input type="text"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
कोड स्पष्टीकरण:
सबसे पहले, जांचें कि क्या इनपुट फ़ील्ड खाली है (str.length == 0)। यदि ऐसा है, तो txtHint प्लेसहोल्डर की सामग्री को साफ़ करें और फ़ंक्शन से बाहर निकलें।
हालाँकि, यदि इनपुट फ़ील्ड खाली नहीं है, तो निम्न कार्य करें:
- XMLHttpRequest ऑब्जेक्ट बनाएं
- सर्वर प्रतिक्रिया तैयार होने पर निष्पादित होने के लिए फ़ंक्शन बनाएं
- सर्वर पर किसी ASP फ़ाइल (getint.asp) को अनुरोध भेजें
- ध्यान दें कि q पैरामीटर जोड़ा गया है gethint.asp?q="+str
- str चर इनपुट फ़ील्ड की सामग्री रखता है
एएसपी फ़ाइल - "getint.asp"
ASP फ़ाइल नामों की एक सरणी की जाँच करती है, और ब्राउज़र को संबंधित नाम (नाम) लौटाती है:
<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
'get the q parameter from URL
q=ucase(request.querystring("q"))
'lookup all hints from array if length of q>0
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>
AJAX का उपयोग डेटाबेस के साथ संवादात्मक संचार के लिए किया जा सकता है।
AJAX डेटाबेस उदाहरण
निम्नलिखित उदाहरण प्रदर्शित करेगा कि कैसे एक वेब पेज AJAX वाले डेटाबेस से जानकारी प्राप्त कर सकता है:
उदाहरण
उदाहरण समझाया - HTML पृष्ठ
जब कोई उपयोगकर्ता ऊपर दी गई ड्रॉपडाउन सूची में किसी ग्राहक का चयन करता है, तो "शो कस्टमर ()" नामक एक फ़ंक्शन निष्पादित किया जाता है। फ़ंक्शन "ऑनचेंज" ईवेंट द्वारा ट्रिगर किया गया है:
<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (this.readyState==4 && this.status==200)
{
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>
स्रोत कोड स्पष्टीकरण:
यदि कोई ग्राहक नहीं चुना गया है (str.length==0), तो फ़ंक्शन txtHint प्लेसहोल्डर की सामग्री को साफ़ करता है और फ़ंक्शन से बाहर निकलता है।
यदि कोई ग्राहक चुना जाता है, तो शो ग्राहक () फ़ंक्शन निम्नलिखित को निष्पादित करता है:
- XMLHttpRequest ऑब्जेक्ट बनाएं
- सर्वर प्रतिक्रिया तैयार होने पर निष्पादित होने के लिए फ़ंक्शन बनाएं
- सर्वर पर एक फ़ाइल के लिए अनुरोध भेजें
- ध्यान दें कि URL में एक पैरामीटर (q) जोड़ा जाता है (ड्रॉपडाउन सूची की सामग्री के साथ)
एएसपी फ़ाइल
उपरोक्त जावास्क्रिप्ट द्वारा बुलाए गए सर्वर पर पृष्ठ एक एएसपी फ़ाइल है जिसे "getcustomer.asp" कहा जाता है।
"Getcustomer.asp" में स्रोत कोड डेटाबेस के विरुद्ध एक क्वेरी चलाता है, और परिणाम को HTML तालिका में देता है:
<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/datafolder/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>