صفحه اول
به وبلاگ آموزش برنامه نویسی خوش آمدید ، برای شما لحظات خوشی را در این وبلاگ آرزو می کنم . این وبلاگ با هدف آموزش برنامه نویسی با تمام زیان ها ایجاد شده است به همین خاطر مطالب این پایگاه گلچینی از بهترین آموزش ها در اینترنت می باشد . من "رضا عبدالملکی " دانشجوی دوره کاردانی رشته کامپیوتر از شهرستان دورود در استان لرستان هستم و منتظر نظرات ، پیشنهادات و انتقادات شما می باشم . موفق و پیروز باشید .
فراخوانی تابع onCallback
هر مرتبه ای كه وضعيت ready تغيير می يابد ، از تابع callback جهت ايجاد يك درخواست غيرهمزمان استفاده می گردد . در مرحله نهائی ، وضعيت بررسی و بخش رابط كاربر به همراه محتويات برگردانده شده از صفحه ArticleSummery.htm ، بهنگام می گردد.
فراخوانی تابع oncallback
مرحله 1 بررسی تكميل عمليات
هر مرتبه ای كه وضعيت ready تغيير می يابد ، از تابع callback جهت ايجاد يك درخواست غيرهمزمان استفاده می گردد . در مرحله نهائی ، وضعيت بررسی و بخش رابط كاربر به همراه محتويات برگردانده شده از صفحه ArticleSummery.htm ، بهنگام می گردد.
فراخوانی تابع oncallback
مرحله 1 بررسی تكميل عمليات
کد:
function onCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.readyState == 4) {
مرحله 2 مقدار 200 نشان دهنده انجام موفقيت آميز عمليات است
کد:
if (xmlHttp.status == 200){
مرحله 3 نمايش نتايج
کد:
var r = document.getElementById('results');
r.innerHTML = xmlHttp.responseText;
}
r.innerHTML = xmlHttp.responseText;
}
کد:
else {
alert('Error: ' + xmlHttp.status);
}
alert('Error: ' + xmlHttp.status);
}
توضيحات
وضعيت درخواست از طريق خصلت readyState برگردانده می شود .
مرحله اول : در صورتی كه مقدار خصلت readyState شی XMLHttpRequest برابر با مقدار 4 باشد ، درخواست به اتمام رسيده است .
مرحله دوم : در ادامه ، پاسخ برگردانده شده از سرويس دهنده بررسی می شود تا اين اطمينان حاصل گردد كه همه چيز با موفقيت انجام شده است .مقدار كد وضعيت 200 مربوط به پروتكل HTTP ، نشان دهنده اين موضوع است كه درخواست با موفقيت انجام شده است .
مرحله سوم : در نهايت ، خصلت innerHTML مربوط به عنصر span متاثر از محتويات برگردانده شده ، بهنگام می گردد .
كد زير ، محتويات صفحه Ajax1.aspx را بطور كامل نشان می دهد .
کد:
<%@ Page Language="VB" Culture="fa-IR" %>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" >
<head id="Head1" runat="server">
<title>نحوه استفاده از شی XMLHttpRequest</title>
</head>
<body style="font-family: Tahoma">
<form id="form1" runat="server">
<div>
<span id="results">بارگذاری صفحه ...</span>
</div>
</form>
<script type="text/javascript">
var xmlHttp = null;
window.onload = function() {
loadXmlHttp();
sendRequest("ArticleSummery.htm");
}
function loadXmlHttp() {
if (window.XMLHttpRequest) { // IE7, Mozilla, Safari, Opera, etc.
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE 5.x and 6
}
catch (e){}
}
}
function sendRequest(url) {
if (xmlHttp) {
xmlHttp.open("GET", url, true); // true = async
xmlHttp.onreadystatechange = onCallback;
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// Send request without any additional parameters
xmlHttp.send(null);
}
}
function onCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200){
var r = document.getElementById('results');
r.innerHTML = xmlHttp.responseText;
}
else { // HTTP error
alert('Error: ' + xmlHttp.status);
}
}
}
</script>
</body>
</html>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" >
<head id="Head1" runat="server">
<title>نحوه استفاده از شی XMLHttpRequest</title>
</head>
<body style="font-family: Tahoma">
<form id="form1" runat="server">
<div>
<span id="results">بارگذاری صفحه ...</span>
</div>
</form>
<script type="text/javascript">
var xmlHttp = null;
window.onload = function() {
loadXmlHttp();
sendRequest("ArticleSummery.htm");
}
function loadXmlHttp() {
if (window.XMLHttpRequest) { // IE7, Mozilla, Safari, Opera, etc.
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE 5.x and 6
}
catch (e){}
}
}
function sendRequest(url) {
if (xmlHttp) {
xmlHttp.open("GET", url, true); // true = async
xmlHttp.onreadystatechange = onCallback;
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// Send request without any additional parameters
xmlHttp.send(null);
}
}
function onCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200){
var r = document.getElementById('results');
r.innerHTML = xmlHttp.responseText;
}
else { // HTTP error
alert('Error: ' + xmlHttp.status);
}
}
}
</script>
</body>
</html>
شكل زیر خروجی مثال فوق را نشان می دهد .
ضمیمه:
a44.jpg
شكل ايجاد يك درخواست Http غيرهمزمان توسط شی XMLHttpRequest
بنابراین در اين مثال با نحوه ايجاد يك درخواست HTTP غيرهمزمان توسط شی XMLHttpRequest به صفحه ديگر موجود بر روی سرويس دهنده آشنا شديم . پس از اتمام درخواست ، كاربران صفحه نهائی را كه محتويات عناصر رابط كاربر موجود در آن (يك span ) به صورت پويا بهنگام شده اند ، مشاهده خواهند كرد .
منتظر نظرات شما هستم ...
ارسال در تاريخ یک شنبه 17 آبان 1388 توسط
رضا عبدالملكي