۲۵
آبان

جلسه ۹۸ : AJAX ASP در جاوا اسکریپت

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ،در بخش قبلی چگونگی دسترسی به فایل PHP با استفاده از AJAX جاوا اسکریپت را با ارائه ی یک مثال کامل بررسی کردیم، در این بخش قصد داریم همان مراحل را برای فایل های ASP بررسی کنیم. AJAX ASP در جاوا اسکریپت نیز به چگونگی دسترسی به فایل ASP با استفاده از AJAX جاوا اسکریپت در یک صفحه وب اشاره دارد. در ادامه ی این بخش با ما همراه باشید.

دسترسی به فایل ASP با استفاده از AJAX جاوا اسکریپت

در این بخش با ارائه ی یک مثال کامل چگونگی دسترسی به فایل ASP با استفاده از AJAX جاوا اسکریپت را ارائه کرده ایم.

مثال – دسترسی به فایل ASPبا استفاده از AJAX جاوا اسکریپت

مثال زیر اینکه چگونه یک صفحه وب می تواند با یک سرور وب ارتباط برقرار کند در حالی که کاربر یک کاراکتر را در یک فیلد ورودی می نویسد را نشان می دهد:

جستحو در فایلASP با استفاده از AJAX

تشریح مثال فوق :

در مثال فوق، زمانی که کاربر یک کاراکتر را در فیلد ورودی متن موجود می نویسد، تابعی با نام “()showHint” اجرا خواهد شد.

که البته این عمل توسط رویداد onkeyup انجام می شود.

در اینجا به کد HTML مربوط به آن اشاره شده:

مثال : کد HTML مثال این بخش

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

<html>

<head>

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>

تشریح کد بالا :

در ابتدا، خالی بودن فیلد input بررسی می شود، (str.length == 0).

در صورت خالی بودن فیلد متن ورودی، محتوای txtHint از placeholder پاک شده و تابع پایان می یابد.

اما اگر فیلد ورودی خالی نباشد، موارد زیر را انجام خواهد شد:

یک شیء XMLHttpRequest ایجاد می شود.
هنگامی که پاسخ سرور آماده باشد، تابع اجرا می شود.
سپس ارسال درخواست را به یک فایل (gethint.asp) در سرور را داریم.
البته توجه داشته باشید که پارامتر q به gethint.asp?q=”+str اضافه شده است.
متغیر Str محتوای فیلد ورودی را نگه می دارد.

فایل ASP مربوطه (gethint.asp)

فایل ASP زیر ، آرایه ای از نام ها را بررسی کرده و نام هایی که با جستجو مطابقت دارد را به مرورگر باز می گرداند:

مثال :

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

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

'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 به عنوان ابزاری قدرتمند برای برقراری ارتباط با وب سرور در جاوا اسکریپت کاربرد های فراوانی دارد که یکی از این موارد دسترسی به فایل ها PHP و ASP می باشد، که در بخش قبل در مورد دسترسی به PHP مباحثی ارائه شد،و در این مبحث نیز به قابلیت دسترسی به فایل ASP با استفاده از AJAX جاوا اسکریپت پرداختیم.

به اشتراک بگذارید

AJAX ASP در جاوا اسکریپت

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۹۸ : AJAX ASP در جاوا اسکریپت

مقدمه

دسترسی به فایل ASP با استفاده از AJAX جاوا اسکریپت

مثال – دسترسی به فایل ASPبا استفاده از AJAX جاوا اسکریپت

فایل ASP مربوطه (gethint.asp)

کلام آخر

لیست مطالب دوره

کار با فرم ها

اشیا

توابع

HTML DOM

BOM

AJAX

JSON

مقایسه ی جاوا اسکریپت با jQuery

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ