एएसपी - एज़ैक्स और एएसपी

AJAX का इस्तेमाल एक अधिक गतिशील अनुप्रयोग बनाने के लिए किया जाता है。

AJAX ASP उदाहरण

नीचे का उदाहरण दर्शाता है कि जब उपयोगकर्ता इनपुट बॉक्स में अक्षर भरता है, तो वेबपृष्ठ कैसे सर्वर से संचार करता है:

उदाहरण

कृपया नीचे इनपुट बॉक्स में अक्षर (A - Z) भरें:

नाम:

सुझाव:

स्वयं प्रयोग कीजिए स्रोत कोड

उदाहरण व्याख्या - HTML पृष्ठ

जब उपयोगकर्ता ऊपरी इनपुट बॉक्स में अक्षर भरता है, तो "showHint()" फ़ंक्शन चलाया जाता है। यह फ़ंक्शन "onkeyup" इवेंट से ट्रिगर किया जाता है:

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari के लिए कोड
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 के लिए कोड
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<p><b>कृपया इनपुट बॉक्स में अंग्रेजी अक्षर भरें:</b></p>
<form>
पहला नाम: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>सुझाव: <span id="txtHint"></span></p>
</body>
</html>

स्रोत कोड व्याख्या:

यदि इनपुट बॉक्स खाली है (str.length==0), तो फ़ंक्शन ने उपस्थिति हेल्प टेक्स्ट txtHint की सामग्री को साफ़ कर फ़ंक्शन से बाहर निकलेगा。

यदि इनपुट बॉक्स खाली नहीं है, तो showHint() निम्नलिखित कदम चलाएगा:

  • XMLHttpRequest ऑब्जेक्ट को बनाएं
  • सर्वर जवाब तैयार होने पर चलने वाली फ़ंक्शन को बनाएं
  • सर्वर पर फ़ाइल को अनुरोध करें
  • अनुचेतन, URL के अंत में जोड़े गए पैरामीटर (q) (इनपुट बॉक्स की सामग्री सहित) पर ध्यान दें

ASP फ़ाइल

यह JavaScript कॉल के सर्वर पृष्ठ "gethint.asp" नाम का ASP फ़ाइल है।

"gethint.asp" में कोड समान नाम आयत्त्रिक की जाँच करेगा और ब्राउज़र को उसके लिए उसके नाम को वापस करेगा:

<%
response.expires=-1
dim a(30)
'नामों के आयत्त्रिक को भरें
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"
'URL से पैरामीटर q प्राप्त करें
q=ucase(request.querystring("q"))
'यदि लंबाई 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
'यदि सुझाव नहीं मिला, तो "no suggestion" आउटपुट करें
'या सही मूल्यों को आउटपुट करें
if hint="" then
  response.write("no suggestion")
else
  response.write(hint)
end if
%>

स्रोत कोड व्याख्या:

यदि JavaScript को कोई टेक्स्ट भेजा गया (अर्थात strlen($q) बड़ा गया), तो यह होगा:

  • जावास्क्रिप्ट से आए अक्षरों के मेलाजों को खोजें
  • यदि मेल नहीं मिलता, तो रेस्पोंस स्ट्रिंग को "no suggestion" सेट करें
  • यदि एक या अधिक मेलाजों का मेल होता है, तो तमाम मेलाजों को रेस्पोंस स्ट्रिंग सेट करें
  • प्रतिक्रिया को हिंट "txtHint" में भेजें