ASP - AJAX และ ASP

AJAX ใช้ในการสร้างโปรแกรมที่มีความสามารถด้านการเคลื่อนไหวมากขึ้น

ตัวอย่าง AJAX ASP

ตัวอย่างด้านล่างนี้จะแสดงให้เห็นว่าเมื่อผู้ใช้พิมพ์ตัวอักษรในช่องใส่ข้อมูล หน้าเว็บจะทำการติดต่อเซิร์ฟเวอร์:

ตัวอย่าง

โปรดปิดตัวอักษรในช่องใส่ข้อมูลด้านล่าง (A - Z):

ชื่อ:

แนะนำ:

ทดลองด้วยตัวเอง โค้ดต้นฉบับ

ตัวอย่างการใช้งาน - หน้า HTML

เมื่อผู้ใช้พิมพ์ตัวอักษรในช่องใส่ข้อมูลด้านบน จะมีการปฏิบัติ "showHint()" ฟังก์ชัน ซึ่งถูกกระตุ้นโดยเหตุการณ์ "onkeyup":







请在输入框中输入英文字符：



First name: 



Suggestions:

อธิบายรหัสต้นตอน:

如果输入框是空的（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"
'ได้รับตัวเลือก 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
'ถ้าไม่หาถึงคำขวัญ แสดง "no suggestion"
'หรือแสดงค่าที่ถูกต้อง
if hint="" then
  response.write("no suggestion")
else
  response.write(hint)
end if
%>

อธิบายรหัสต้นตอน:

ถ้า JavaScript ส่งข้อความใดๆ (คือ strlen($q) มากกว่า 0) จะเกิดขึ้น:

  • ค้นหาชื่อที่ตรงกันกับอักษรที่มาจาก JavaScript
  • ถ้าไม่พบชื่อที่ตรงกัน ตั้งค่าข้อความตอบเป็น "no suggestion"
  • ถ้าพบชื่อที่ตรงกัน ใช้ชื่อทั้งหมดเพื่อตั้งค่าข้อความตอบ
  • ส่งคำตอบเข้าสู่ตัวแทนที่ "txtHint"