یلدانه 50% تخفیف بگیر کامت شیرین شه
یلدا دریافت کد تخفیف
.......... 1 تا 13 فرودین

سبد خرید

نمایش خلاصه ای از خرید هایی که شما انجام خواهید داد

مبلغ کل
0
تسویه حساب
سبد خرید خالی می باشد
0
ورود به پنل
فروشنده شوید

آموزش Ajax – قسمت سوم
حميد شریفی
حميد شریفی
تعداد کل دانلود ها : 643438
تعداد کل مطالب : 1252

آموزش Ajax – قسمت سوم

تعداد دانلود:
0
تعداد بازدید:
1537
تاریخ:
۱۳۹۵-۱۱-۲۶
دسته بندی:
آموزش Ajax

هشتگ ها :

#طراحی وب
0تومان
افزودن به سبد و خرید

Ajax می تواند برای ارتباطات فعل وانفعالی بایک پایگاه داده استفاده شود.

 

مثال پایگاه داده ajax

درمثال ajax زیر ما نشان می دهیم که یک صفحه وب چگونه می تواند اطلاعات را از یک پایگاه داده با استفاده از تکنولوژی ajax بگیرد.

 

انتخاب یک نام در جعبه زیر

انتخاب یک مشتری:

اطلاعات مشتری در زیر لیست خواهند شد.

تشریح مثال ajax:

مثال بالا شامل یک فرم html ساده ویک پیوند به javascript است.

<html>
 
<head>
 
<script src="/selectcustomer.js"></script>
 
</head>
 
<body>
 
<form> 
 
Select a Customer:
 
<select name="customers" onchange="showCustomer(this.value)">
 
<option value="ALFKI">Alfreds Futterkiste
 
<option value="NORTS ">North/South
 
<option value="WOLZA">Wolski Zajazd 
 
</select>
 
</form>
 
<p>
 
<div id="txtHint"><b>Customer info will be listed here.</b></div>
 
</p>
 
</body>
 
</html>

همان طوری که شما می توانید ببینید یک فرم مثال html ساده با یک جعبه کشیدنی و پایین انداختنی که مشتری نامیده می شود است.

پاراگراف زیر فرم شامل یک div است که “txthint” نامیده می شود و به عنوان یک میدان برای اطلاعات بازیابی شده از سرور وب استفاده می شود.

زمانی که کاربر داده هارا انتخاب می کند یک تابع به نام “show customer” اجرا می شود.  رویداد  onchange””باعث راه اندازی تابع برای اجرا می شود به عبارت دیگر هرزمان که کاربر مقادیر را در جعبه کشیدنی پایین انداختنی تغییر دهد تابع show customer صدازده می شود .

درزیر کد javascript لیست شده است.

Ajax در javascript

 

این کد javascript در فایل select customer.js”” ذخیره شده است:

var xmlHttp
 
function showCustomer(str)
 
{ 
 
xmlHttp=GetXmlHttpObject();
 
if (xmlHttp==null)
 
 {
 
 alert ("Your browser does not support AJAX!");
 
 return;
 
 } 
 
var url="getcustomer.asp";
 
url=url+"?q="+str;
 
url=url+"&sid="+Math.random();
 
xmlHttp.onreadystatechange=stateChanged;
 
xmlHttp.open("GET",url,true);
 
xmlHttp.send(null);
 
}
 
 
function stateChanged() 
 
{ 
 
if (xmlHttp.readyState==4)
 
{ 
 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
 
}
 
}
 
 
function GetXmlHttpObject()
 
{
 
var xmlHttp=null;
 
try
 
 {
 
 // Firefox, Opera 8.0+, Safari
 
 xmlHttp=new XMLHttpRequest();
 
 }
 
catch (e)
 
 {
 
 // Internet Explorer
 
 try
 
 {
 
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 
 }
 
 catch (e)
 
 {
 
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 
 }
 
 }
 
return xmlHttp;
 
}

صفحه سروردر ajax

 

صفحه سرور نامگذاری شده به وسیله javascript یک فایل asp ساده است که “get customer.asp” نامیده می شود .

صفحه در  javascript برای یک سرور اطلاعات اینترنت نوشته شده است.

این صفحه می تواند به آسانی در php یا در بعضی دیگر از زبان های سرور نوشته شود و نتایج به صورت یک جدول html برگشت داده شود.

کد، یک  sql را به جای یک پایگاه داده اجرا می کند و نتیجه را به عنوان یک جدول  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("/db/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>")
 
%>

Ajax می تواند برای ارتباطات جذاب با یک فایل xmlاستفاده شود.

 

مثال ajax xml

درمثال ajax زیر ما شرح خواهیم داد که چطور یک صفحه وب می توانداطلاعات را از یک فایل xml با استفاده ازتکنولوژی ajax بگیرد.

انتخاب یک cd درجعبه زیر:

انتخاب یک cd:

اطلاعات cd اینجا لیست خواهد شد.

 

تشریح مثال ajax:

مثال بالا شامل یک فرمhtml ساده و یک پیوند به javascript است.

<html>
 
<head>
 
<script src="/selectcd.js"></script>
 
</head>
 
<body>
 
<form> 
 
Select a CD:
 
<select name="cds" onchange="showCD(this.value)">
 
<option value="Bob Dylan">Bob Dylan</option>
 
<option value="Bonnie Tyler">Bonnie Tyler</option>
 
<option value="Dolly Parton">Dolly Parton</option> 
 
</select>
 
</form>
 
<p>
 
<div id="txtHint"><b>CD info will be listed here.</b></div>
 
</p>
 
</body>
 
</html>

به طوری که شما می توانید ببینید مثال فقط یک فرم html ساده با یک جعبه کشیدنی پایین انداختنی ساده که ” cds “نامیده می شود است.

پاراگراف زیر یک فرم شامل یک  div است که “txthint” نامیده می شود. div به عنوان یک میدان اصلاح اطلاعات از فرم سرور وب استفاده می شود وقتی که کاربرداده ها را انتخاب می کند. تابع showcd”” صدازده می شود.

کد javascript در زیر لیست شده است.

 

Javascript در ajax

کد javascript  در فایل “selected.js” ذخیره شده است:

var xmlHttp
 
function showCD(str)
 
{ 
 
xmlHttp=GetXmlHttpObject();
 
if (xmlHttp==null)
 
 {
 
 alert ("Your browser does not support AJAX!");
 
 return;
 
 } 
 
var url="getcd.asp";
 
url=url+"?q="+str;
 
url=url+"&sid="+Math.random();
 
xmlHttp.onreadystatechange=stateChanged;
 
xmlHttp.open("GET",url,true);
 
xmlHttp.send(null);
 
}
 
function stateChanged() 
 
{ 
 
if (xmlHttp.readyState==4)
 
{ 
 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
 
}
 
}
 
function GetXmlHttpObject()
 
{
 
var xmlHttp=null;
 
try
 
 {
 
 // Firefox, Opera 8.0+, Safari
 
 xmlHttp=new XMLHttpRequest();
 
 }
 
catch (e)
 
 {
 
 // Internet Explorer
 
 try
 
 {
 
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 
 }
 
 catch (e)
 
 {
 
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 
 }
 
 }
 
return xmlHttp;
 
}

صفحه سرور ajax

صفحه سرور نامگذاری شده به وسیله  javascript یک فایل asp ساده است که”getcd.asp” نامیده می شود .

صفحه در javascript برای یک سرور اطلاعات اینترنت نوشته شده است.

این صفحه می تواند به آسانی در php یا در بعضی دیگر از زبان های سرور نوشته شود.

کد  یک پرسش را اجرا می کند و نتیجه را به صورت html برمی گرداند

<%
 
response.expires=-1
 
q=request.querystring("q")
 
 
set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
 
xmlDoc.async="false"
 
xmlDoc.load(Server.MapPath("cd_catalog.xml"))
 
 
set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']")
 
 
for each x in nodes
 
 for each y in x.childnodes
 
 response.write("<b>" & y.nodename & ":</b> ")
 
 response.write(y.text)
 
 response.write("<br />")
 
 next
 
next
 
%>

درحالی که responsetext ، پاسخ  http را به صورت یک رشته  بر می گرداند، responsexml پاسخ را به صورت xml برمی گرداند.

خاصیت  responsexml یک سند xml را بر می گرداند که می تواند با استفاده از خصوصیات و روش های گره درخت  W3CDOM را مورد تجزیه و رسیدگی قراردهد.

مثال responsexml در ajax

درمثال ajax زیر ما می خواهیم شرح دهیم که یک صفحه وب چگونه می تواند اطلاعات را از پایگاه داده استفاده شده در تکنولوژی ajax بگیرد.

داده های انتخاب شده از پایگاه داده دراین زمان به یک سند  xml تبدیل خواهند شد و سپس ما برای استخراج مقادیر برای نمایش، DOM را استفاده خواهیم کرد.

انتخاب یک نام درجدول زیر

انتخاب یک مشتری: (لیست سلکت باکسی از اسامی برای مثال)

 

تشریح مثال ajax

مثال زیر شامل یک فرم html، چندین عنصر<span> برای نگهداری داده های بازگشتی و یک پیوند به javascript است.

<html>
 
<head>
 
<script src="/selectcustomer_xml.js"></script>
 
</head>
 
<body>
 
<form action=""> 
 
Select a Customer:
 
<select name="customers" onchange="showCustomer(this.value)">
 
<option value="ALFKI">Alfreds Futterkiste</option>
 
<option value="NORTS ">North/South</option>
 
<option value="WOLZA">Wolski Zajazd</option>
 
</select>
 
</form>
 
<b><span id="companyname"></span></b><br />
 
<span id="contactname"></span><br />
 
<span id="address"></span>
 
<span id="city"></span><br/>
 
<span id="country"></span>
 
</body>
 
</html>

مثال بالا شامل یک فرم html با یک جعبه کشیدنی پایین انداختنی است که “customers” نامیده می شود.

وقتی که کاربر یک گزینه (مشتری ) را در جعبه کشیدنی پایین انداختنی انتخاب می کند یک تابع به نام “showcustomer()” اجرا می شود. اجرای تابع به وسیله رخداد “onchange” اجرامی شود. به عبارت دیگر هر زمان که کاربر مقدار یک جعبه کشیدنی پایین انداختنی را تغییر دهد تابع showcustomer() صدازده می شود.

کد javascript  در زیر لیست شده است:

Javascript،ajax

این کد javascript  در فایل “selectcustomer_xml.js” ذخیره شده است:

var xmlHttp
 
function showCustomer(str)
 
{ 
 
xmlHttp=GetXmlHttpObject();
 
if (xmlHttp==null)
 
 {
 
 alert ("Your browser does not support AJAX!");
 
 return;
 
 }
 
var url="getcustomer_xml.asp";
 
url=url+"?q="+str;
 
url=url+"&sid="+Math.random();
 
xmlHttp.onreadystatechange=stateChanged;
 
xmlHttp.open("GET",url,true);
 
xmlHttp.send(null);
 
}
 
function stateChanged() 
 
{ 
 
if (xmlHttp.readyState==4)
 
{
 
var xmlDoc=xmlHttp.responseXML.documentElement;
 
document.getElementById("companyname").innerHTML=
 
xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;
 
document.getElementById("contactname").innerHTML=
 
xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue;
 
document.getElementById("address").innerHTML=
 
xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue;
 
document.getElementById("city").innerHTML=
 
xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;
 
document.getElementById("country").innerHTML=
 
xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue;
 
}
 
}
 
function GetXmlHttpObject()
 
{
 
var xmlHttp=null;
 
try
 
 {
 
 // Firefox, Opera 8.0+, Safari
 
 xmlHttp=new XMLHttpRequest();
 
 }
 
catch (e)
 
 {
 
 // Internet Explorer
 
 try
 
 {
 
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 
 }
 
 catch (e)
 
 {
 
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 
 }
 
 }
 
return xmlHttp;
 
}

تابع های showcustomer() و getxmlhttpobject() بالا همان توابع گفته شده درفصل قبل هستند.

همچنین تابع statechanged() نیزقبل ازاین آموزش Ajax استفاده شده است. هرچند این بار ما نتایج را به عنوان یک سند  xml ( با responsexml) برمی گردانیم و DOM را برای نمایش مقادیر اضافی که ما می خواهیم نمایش دهیم استفاده می کنیم.

قسمت های قبل :

قسمت 1

قسمت 2

محصولات مشابه فروشی
هشتگ ها :

این محصول بدون نظر می باشد شما میتوانید اولین نظر را ثبت کنید

ارسال نظر

آخرین های مشابه مشاهده بیشتر

  • تلفن : 04136383693
  • پیامک : 500020606688
  • آدرس : آذربایجان شرقی، تبریز، شهرک مصلی، خیابان راجی، راجی 4، کوچه بیست هشتم، قطعه 1339، طبقه چهارم

ملت وب در سال 1393 فعالیت خود را در چهار بخش قالب های آماده، طراحی لوگو، طراحی سایت، طراحی بنر آغاز کرده است، که در مدت بسیار کم با تلاش های بی وقفه خود و همکاران توانسته بزرگترین وب سایت ارائه دهنده قالب های با کیفیت در ایران باشد رمز موفقیت شرکت ملت وب پشتیبانی بی دریغ از کاربران خود می باشد ما موقعیت خود را مدیون مشتریان وفادار خود هستیم پس همیشه همراهشان خواهیم بود .

  • logo-samandehi