AJAX ASP

ในเนื้อหาส่วนนี้จะเป็นการยกตัวอย่างการใช้เทคนิค AJAX กับไฟล์ นามสกุล .asp 

ตัวอย่าง การติดต่อกับเซิร์ฟเวอร์ในขณะที่ผู้ใช้กำลังทำการป้อนข้อมูล

1.ไฟล์ test_asp.php

<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>

ไฟล์ที่ 1 test_asp.php

อธิบายไฟล์ที่1 

  • บรรทัดที่ 5 ตรวจสอบว่าถ้าจำนวนอัขระเท่ากับ 0 ก็จะทำการคืนค่าว่างเปล่า หรือไม่มีการแสดงผลอะไรเลยนั่นเอง
  • บรรทัดที่ 8 เป็นการดำเนินการเมื่อบรรทัดที่ 5 เงื่อนไขไม่เป็นจริง
  • บรรทัดที่ 9 สร้างวัตถุ XMLHttpRequest
  • บรรทัดที่ 10 สร้างฟังก์ชันที่จะดำเนินการเมื่อการตอบสนองของเซิร์ฟเวอร์พร้อม
  • บรรทัดที่ 16 และ 16 ส่งคำร้องขอไปยังไฟล์ ASP (gethint.asp) บนเซิร์ฟเวอร์
  • gethint.asp? q = “+ str ซึ่งตัรแปร str ใช้ในการเก็บค่าอินพุต 

 

2.ไฟล์ gethint.asp

<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="AAAA"
a(2)="BBBB"
a(3)="CCCC"
a(4)="DDDD"
a(5)="EEEE"
a(6)="FFFF"
a(7)="GGGG"

'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
%>

ไฟล์ที่ 2 gethint.asp

ไฟล์ที่ 2 จะทำการตรวจสอบข้อมูลภายในอาเรย์ และ ส่งคืนข้อมูลที่ตรงกับคำที่ใชในการค้น หรือถ้าหากข้อมูลภายในอาเรย์ไม่ตรงกับคำค้นก็จะส่งคืนคำว่า “no suggestion”

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: