m.labbaf
شنبه 18 خرداد 1387, 11:44 صبح
با سلام .برای شروع آژاکس ابتدا از تکنیکهای ساده استفاده می کنیم .
بحث امروز در مورد واکشی اطلاعات از دیتابیس و نمایش آن آن در صفحه html است که این کار را از طریق تکنولوژی آژاکس انجام می دهیم .(Asynchronous Javascript+XML)
Asynchronous به معنی غیر همزمان است.
به طور خلاصه از 3 تکنیک برای واکشی از دیتا بیس میتوانیم استفاده کنیم .(آژاکس تکنولوژی نیست بلکه تکنیک است.و هر شخص با استفاده از هوش خود میتوانید آن را گسترس دهد و تکنیک های بیشتری را اختراع کند.)
1- با استفاده از Frame
2- با استفاده از IFrame
3- با استفاده از XML
به طور صریح و خلاصه شروع میکنیم .تا به راحتی بتوانید از آژاکس استفاده کنید .و برنامه نویسی با آژاکس را امتحان کنید.
1-یک پروژه .net باز کرده و یک صفحه به نام Display.htm می سازید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Display Page</title>
<script type="text/javascript">
function requestCustomerInfo()
{
var sId=document.getElementById("txtCustomerId").value;
top.frames["hiddenFrame"].location="Default.aspx?id="+sId;
}
function displayCustomerInfo(sText) {
var divCustomerInfo = document.getElementById("divCustomerInfo");
divCustomerInfo.innerHTML = sText;
}
</script>
</head>
<body>
<p>Enter customerId: <input type="text" id="txtCustomerId" value="" /></p>
<p><input type="button" id="Button1" value="get Customer Info" onclick="requestCustomerInfo()" /></p>
<div id="divCustomerInfo"></div>
</body>
</html>
کد های بالا را درون آن کپی کنید.
در این صفحه یک جعبه متن داریم که کد محصولی را در آن وارد میکنیم و نام آن را دریافت میکنیم بدون آنکه صفحه refresh شود اطلاعات را از دیتا بیس میخوانیم و نمایش می دهیم.
تابع جاوااسکریپت اول مقدار جعبه متن را خوانده و از طریق خط دوم به صفحه Default.aspx
می دهد .خلاصه کار به این صورت است که صفحه aspx ما کد را میگیرد و دیتا بیس متصل و نام محصول را میخواند و جواب را از طریق Response.write
<div id="divInfoToReturn"><%Response.Write(sInfo);%></div>
که داخل یک div است به صفحه فعلی انتقال میدهد.تابع displayCustomerInfo
در صفحه aspx ما فراخوانی میشود.
در اصل ما یک فریم میانی داریم که در صفحان آن را صدا میزنیم و از توابع داخل آن صفحات استفاده میکنیم . به این شکل.
<script type="text/javascript">
window.onload = function () {
var divInfoToReturn = document.getElementById("divInfoToReturn");
top.frames["displayFrame"].displayCustomerInfo(divInfoToReturn.innerHTML);
};
</script>