آموزش Ajax – قسمت سوم-ملت وب 
دپارتمان ها
ملت وب مرجع دانلود قالب وردپرس فارسی و قالب فارسی وردپرس و قالب html و افزونه وردپرس
24
ساعت با شما

04144235916

آیا میدانستید دلیل اصلی محبوبیت ملت وب در چیست ؟ ملت وب به عنوان مرجعی پیشرو در پشتیبانی مشتریان خود توانسته رضایت کاربران را در برگیرد در واقع در ملت وب وب شخص پاسخگو نیاز های شما نیست در اینجا یک شرکت معتبر و پاسخگو در کنار مشتریان خود می باشد و تمام مسئولیت پشتیبانی بر عهده شرکت می باشد و نقطه قوت فوق العاده بالای برای یک وب سایت می باشد

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

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

مشخصات محصول

تعداد بازدید: 290
تعداد دانلود : 0
نوع دانلود رایگان
تاریخ ۱۳۹۵-۱۱-۲۶

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

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

مطالبی که شاید خوشتان بیاد

۱۳۹۶-۰۳-۱۳
تعداد بازدید : 128

دانلود رایگان سورس منوی CSS

۱۳۹۶-۰۲-۱۲
تعداد بازدید : 105

معرفی React.js