AJAX ASP

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Το AJAX χρησιμοποιείται για τη δημιουργία πιο διαδραστικών εφαρμογών.

Παράδειγμα AJAX ASP

Το παρακάτω παράδειγμα θα δείξει πώς μια ιστοσελίδα μπορεί να επικοινωνήσει με το α διακομιστής web ενώ ένας χρήστης πληκτρολογεί χαρακτήρες σε ένα πεδίο εισαγωγής:

Παράδειγμα

Ξεκινήστε να πληκτρολογείτε ένα όνομα στο πεδίο εισαγωγής παρακάτω:

<script> function showHintASP(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } const xmlhttp=new XMLHttpRequest(); xmlhttp.onload = function() { document.getElementById("txtHint").innerHTML=this.responseText; } xmlhttp.open("GET","gethint.php?q="+str,true); xmlhttp.send(); }

Suggestions:

First name:

Παράδειγμα Επεξήγηση

Στο παραπάνω παράδειγμα, όταν ένας χρήστης πληκτρολογεί έναν χαρακτήρα στο πεδίο εισαγωγής, μια συνάρτηση που ονομάζεται showHint() εκτελείται.

Η συνάρτηση ενεργοποιείται από το συμβάν onkeyup.

Εδώ είναι ο κωδικός:

Παράδειγμα

<p>Start typing a name in the input field below:</p>
<p>Suggestions: <span id="txtHint"></span></p>

<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>

<script>
function showHint(str) {
  if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else {
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.onload = function() {
      document.getElementById("txtHint").innerHTML = this.responseText;
    }
  xmlhttp.open("GET", "gethint.asp?q=" + str);
  xmlhttp.send();
  }
}
</script>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<h3>Start typing a name in the input field below:</h3>

<p>Suggestions: <span id="txtHint"></span></p> 
<p>First name: <input type="text" id="txt1" onkeyup="showHint(this.value)"></p>

<script>
function showHint(str) {
  if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("txtHint").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "gethint.asp?q="+str);
  xhttp.send();
}
</script>

</body>
</html>

Εξήγηση κώδικα:

Πρώτα, ελέγξτε εάν το πεδίο εισαγωγής είναι κενό (str.length == 0). Εάν είναι, καθαρίστε το περιεχόμενο του σύμβολο κράτησης θέσης txtHint και βγείτε από τη συνάρτηση.

Ωστόσο, εάν το πεδίο εισαγωγής δεν είναι κενό, κάντε τα εξής:

  • Δημιουργήστε ένα αντικείμενο XMLHttpRequest

  • Δημιουργήστε τη συνάρτηση που θα εκτελεστεί όταν η απόκριση διακομιστή είναι έτοιμη

  • Στείλτε το αίτημα σε ένα αρχείο ASP (gethint.asp) στον διακομιστή

  • Παρατηρήστε ότι προστίθεται η παράμετρος q gethint.asp?q="+str

  • Η μεταβλητή str κρατά το περιεχόμενο του πεδίου εισαγωγής

Το αρχείο ASP - "gethint.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
%>