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

AJAX is used to create more interactive applications.

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

In the following example, how the web page communicates with the web server when the user types characters in the input field is demonstrated:

Instance

Please enter letters A-Z in the input field below:

Name:

Search Suggestions:

Example Explanation

In the above example, when the user types characters in the input field, the function named "showHint()" is executed.

This function is triggered by the onkeyup event.

Below is the HTML code:

Instance

<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>Παρακαλώ πληκτρολογήστε τα γράμματα A-Z στο παρακάτω πεδίο εισαγωγής:</b></p>
<form> 
Όνομα:<input type="text" onkeyup="showHint(this.value)">
</form>
<p>Συμβουλές αναζήτησης:<span id="txtHint"></span></p>
</body>
</html>

Δοκιμάστε το προσωπικά

Απλήρωση κώδικα:

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

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

  • Δημιουργία αντικειμένου XMLHttpRequest
  • Δημιουργία συνάρτησης που θα εκτελεστεί όταν ο διακομιστής απαντήσει
  • Αποστολή αιτήματος στο ASP αρχείο του διακομιστή (gethint.asp)
  • Παρακαλώ προσθέστε τον παράμετρο q στο gethint.asp
  • Η μεταβλητή str αποθηκεύει το περιεχόμενο του πεδίου εισαγωγής

ASP αρχείο - "gethint.asp"

Αυτός ο ASP αρχείο ελέγχει τη λίστα με τα ονόματα και στη συνέχεια επιστρέφει τα αντίστοιχα ονόματα στον περιηγητή:

<%
 response.expires=-1
 dim a(32)
 Όνομα χρησιμοποιείται για να συμπληρώσει τη λίστα
 a(1)="Ava"
 a(2)="Brielle"
 a(3)="Caroline"
 a(4)="Diana"
 a(5)="Elise"
 a(6)="Fiona"
 a(7)="Grace"
 a(8)="Hannah"
 a(9)="Ileana"
 a(10)="Jane"
 a(11)="Kathryn"
 a(12)="Laura"
 a(13)="Millie"
 a(14)="Nancy"
 a(15)="Opal"
 a(16)="Petty"
 a(17)="Queenie"
 a(18)="Rose"
 a(19)="Shirley"
 a(20)="Tiffany"
 a(21)="Ursula"
 a(22)="Victoria"
 a(23)="Wendy"
 a(24)="Xenia"
 a(25)="Yvette"
 a(26)="Zoe"
 a(27)="Angell"
 a(28)="Adele"
 a(29)="Beatty"
 a(30)="Carlton"
 a(31)="Elisabeth"
 a(32)="Violet"
 Αποκτήστε το παράμετρο q από το URL
 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
 Εάν δεν βρεθεί το hint, εκτυπώστε "no suggestion" ή εκτυπώστε την σωστή τιμή
 if hint="" then
   response.write("no suggestion")
 else
   response.write(hint)
 end if
%>