ASP-AJAX
Bei AJAX geht es darum, Teile einer Webseite zu aktualisieren, ohne die ganze Seite neu zu laden.
Was ist AJAX?
AJAX = Asynchrones JavaScript und XML.
AJAX ist eine Technik zum Erstellen schneller und dynamischer Webseiten.
AJAX ermöglicht die asynchrone Aktualisierung von Webseiten, indem hinter den Kulissen kleine Datenmengen mit dem Server ausgetauscht werden. Das bedeutet, dass es möglich ist, Teile einer Webseite zu aktualisieren, ohne die ganze Seite neu zu laden.
Klassische Webseiten (die kein AJAX verwenden) müssen die gesamte Seite neu laden, wenn sich der Inhalt ändern sollte.
Beispiele für Anwendungen, die AJAX verwenden: Registerkarten von Google Maps, Gmail, Youtube und Facebook.
Wie AJAX funktioniert
AJAX basiert auf Internetstandards
AJAX basiert auf Internetstandards und verwendet eine Kombination aus:
- XMLHttpRequest-Objekt (um Daten asynchron mit einem Server auszutauschen)
- JavaScript/DOM (um die Informationen anzuzeigen/mit ihnen zu interagieren)
- CSS (um die Daten zu formatieren)
- XML (oft als Format zum Übertragen von Daten verwendet)
AJAX-Anwendungen sind browser- und plattformunabhängig!
Google-Suggest
AJAX wurde 2005 von Google mit Google Suggest populär gemacht.
Google Suggest verwendet AJAX, um eine sehr dynamische Weboberfläche zu erstellen: Wenn Sie mit der Eingabe in das Suchfeld von Google beginnen, sendet ein JavaScript die Buchstaben an einen Server und der Server gibt eine Liste mit Vorschlägen zurück.
Beginnen Sie noch heute mit der Verwendung von AJAX
In unserem ASP-Tutorial zeigen wir, wie AJAX Teile einer Webseite aktualisieren kann, ohne die ganze Seite neu zu laden. Das Serverskript wird in ASP geschrieben.
Wenn Sie mehr über AJAX erfahren möchten, besuchen Sie unser AJAX-Tutorial .
AJAX ASP-Beispiel
Das folgende Beispiel zeigt, wie eine Webseite mit einem Webserver kommunizieren kann, während ein Benutzer Zeichen in ein Eingabefeld eingibt:
Beispiel
Start typing a name in the input field below:
Suggestions:
Beispiel erklärt
Wenn im obigen Beispiel ein Benutzer ein Zeichen in das Eingabefeld eingibt, wird eine Funktion namens "showHint()" ausgeführt.
Die Funktion wird durch das Ereignis onkeyup ausgelöst.
Hier ist der HTML-Code:
Beispiel
<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>
Code-Erklärung:
Prüfen Sie zunächst, ob das Eingabefeld leer ist (str.length == 0). Wenn dies der Fall ist, löschen Sie den Inhalt des txtHint-Platzhalters und beenden Sie die Funktion.
Wenn das Eingabefeld jedoch nicht leer ist, gehen Sie wie folgt vor:
- Erstellen Sie ein XMLHttpRequest-Objekt
- Erstellen Sie die Funktion, die ausgeführt werden soll, wenn die Serverantwort bereit ist
- Senden Sie die Anforderung an eine ASP-Datei (gethint.asp) auf dem Server
- Beachten Sie, dass der q-Parameter gethint.asp?q="+str hinzugefügt wird
- Die str-Variable enthält den Inhalt des Eingabefelds
Die ASP-Datei - "gethint.asp"
Die ASP-Datei überprüft ein Array von Namen und gibt die entsprechenden Namen an den Browser zurück:
<%
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 kann für die interaktive Kommunikation mit einer Datenbank verwendet werden.
Beispiel für eine AJAX-Datenbank
Das folgende Beispiel zeigt, wie eine Webseite mit AJAX Informationen aus einer Datenbank abrufen kann:
Beispiel
Beispiel erklärt – Die HTML-Seite
Wenn ein Benutzer einen Kunden in der Dropdown-Liste oben auswählt, wird eine Funktion namens „showCustomer()“ ausgeführt. Die Funktion wird durch das Ereignis "onchange" ausgelöst:
<!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>
Erklärung des Quellcodes:
Wenn kein Kunde ausgewählt ist (str.length==0), löscht die Funktion den Inhalt des txtHint-Platzhalters und beendet die Funktion.
Wenn ein Kunde ausgewählt ist, führt die Funktion showCustomer() Folgendes aus:
- Erstellen Sie ein XMLHttpRequest-Objekt
- Erstellen Sie die Funktion, die ausgeführt werden soll, wenn die Serverantwort bereit ist
- Senden Sie die Anforderung an eine Datei auf dem Server
- Beachten Sie, dass der URL ein Parameter (q) hinzugefügt wird (mit dem Inhalt der Dropdown-Liste).
Die ASP-Datei
Die Seite auf dem Server, die durch das obige JavaScript aufgerufen wird, ist eine ASP-Datei namens "getcustomer.asp".
Der Quellcode in "getcustomer.asp" führt eine Abfrage gegen eine Datenbank aus und gibt das Ergebnis in einer HTML-Tabelle zurück:
<%
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>")
%>