ASP AJAX
AJAX polega na aktualizowaniu części strony internetowej bez przeładowywania całej strony.
Co to jest AJAX?
AJAX = asynchroniczny JavaScript i XML.
AJAX to technika tworzenia szybkich i dynamicznych stron internetowych.
AJAX umożliwia asynchroniczną aktualizację stron internetowych poprzez wymianę niewielkich ilości danych z serwerem w tle. Oznacza to, że możliwe jest aktualizowanie części strony internetowej bez przeładowywania całej strony.
Klasyczne strony internetowe (które nie używają AJAX) muszą ponownie załadować całą stronę, jeśli treść powinna się zmienić.
Przykłady aplikacji wykorzystujących AJAX: Google Maps, Gmail, Youtube, Facebook tabs.
Jak działa AJAX
AJAX jest oparty na standardach internetowych
AJAX opiera się na standardach internetowych i wykorzystuje kombinację:
- Obiekt XMLHttpRequest (do asynchronicznej wymiany danych z serwerem)
- JavaScript/DOM (do wyświetlania/interakcji z informacjami)
- CSS (do stylizacji danych)
- XML (często używany jako format przesyłania danych)
Aplikacje AJAX są niezależne od przeglądarki i platformy!
Zasugeruj Google
AJAX został spopularyzowany w 2005 roku przez Google za pomocą Google Suggest.
Google Suggest używa AJAX do tworzenia bardzo dynamicznego interfejsu internetowego: kiedy zaczynasz pisać w polu wyszukiwania Google, JavaScript wysyła litery do serwera, a serwer zwraca listę sugestii.
Zacznij korzystać z AJAX już dziś
W naszym samouczku ASP zademonstrujemy, jak AJAX może aktualizować części strony internetowej bez ponownego ładowania całej strony. Skrypt serwera zostanie napisany w ASP.
Jeśli chcesz dowiedzieć się więcej o AJAX, odwiedź nasz samouczek AJAX .
Przykład ASP AJAX
Poniższy przykład zademonstruje, jak strona internetowa może komunikować się z serwerem sieciowym, podczas gdy użytkownik wpisuje znaki w polu wejściowym:
Przykład
Start typing a name in the input field below:
Suggestions:
Przykład wyjaśniony
W powyższym przykładzie, gdy użytkownik wpisze znak w polu wejściowym, wykonywana jest funkcja o nazwie „showHint()”.
Funkcja jest wyzwalana przez zdarzenie onkeyup.
Oto kod HTML:
Przykład
<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>
Wyjaśnienie kodu:
Najpierw sprawdź, czy pole wejściowe jest puste (str.length == 0). Jeśli tak, wyczyść zawartość symbolu zastępczego txtHint i wyjdź z funkcji.
Jeśli jednak pole wejściowe nie jest puste, wykonaj następujące czynności:
- Utwórz obiekt XMLHttpRequest
- Utwórz funkcję do wykonania, gdy odpowiedź serwera będzie gotowa
- Wyślij żądanie do pliku ASP (gethint.asp) na serwerze
- Zauważ, że dodano parametr q gethint.asp?q="+str
- Zmienna str przechowuje zawartość pola wejściowego
Plik ASP - "gethint.asp"
Plik ASP sprawdza tablicę nazw i zwraca odpowiednią nazwę (nazwy) do przeglądarki:
<%
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 może służyć do interaktywnej komunikacji z bazą danych.
Przykład bazy danych AJAX
Poniższy przykład zademonstruje, jak strona internetowa może pobierać informacje z bazy danych za pomocą AJAX:
Przykład
Objaśnienie przykładu — strona HTML
Gdy użytkownik wybierze klienta z powyższej listy rozwijanej, wykonywana jest funkcja o nazwie „showCustomer()”. Funkcja jest wyzwalana przez zdarzenie „onchange”:
<!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>
Wyjaśnienie kodu źródłowego:
Jeśli nie zostanie wybrany żaden klient (str.length==0), funkcja czyści zawartość symbolu zastępczego txtHint i wychodzi z funkcji.
W przypadku wybrania klienta funkcja showCustomer() wykonuje następujące czynności:
- Utwórz obiekt XMLHttpRequest
- Utwórz funkcję do wykonania, gdy odpowiedź serwera będzie gotowa
- Wyślij żądanie do pliku na serwerze
- Zauważ, że parametr (q) jest dodawany do adresu URL (z zawartością listy rozwijanej)
Plik ASP
Strona na serwerze wywoływana przez powyższy JavaScript to plik ASP o nazwie „getcustomer.asp”.
Kod źródłowy w "getcustomer.asp" uruchamia zapytanie w bazie danych i zwraca wynik w tabeli 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>")
%>