درس شرح xmlhttp مع php

ولتوضيح الأمر سوف أقوم بعرض مثال يوضح طريقه التفكير بهذا الإسلوب

وينقسم هذا المثال إلي صفحتين وهما

الصفحه index.htm : وهي تستخدم لعرض البيانات فقط , من خلال إرسال طلبات Requests للسيرفر .

الصفحه members.php : وهي صفحه من المفترض أنها غير قابله للعرض في المتصفح (اي ليست إلا مصدر لإرجاع البيانات فقط )

دعنا نعرض محتوي كلا من هذه الصفحات

الصفحه members.php

<?
$listIndex = $HTTP_RAW_POST_DATA;
switch( $listIndex ) {
    case 0:
        $memberName = "راكان الحنيطي";
        break;
    case 1:
        $memberName = "مصطفي جميل صوان";
        sleep(3); /* sleep for 3 seconds just for simulation */
        break;
    case 2:
        $memberName = "الحسين محمد";
        break;
    default:
        $memberName = "غير معرف";
        sleep(1);
}

$str  = "<member>";
$str .= "<index>$listIndex</index>";
$str .= "<name>$memberName</name>";
$str .= "</member>";

// send the data on the header
header("XMLData: $str");
?>

دعنا الأن نشرح محتوي الكود

$listIndex = $HTTP_RAW_POST_DATA;

يقوم هذا الكود بتحميل قيمة المتغير listIndex بالقيمه المرسله من خلال وظائف xmlhttp الموجوده بالصفحه index.htm كما سنري

وبعد ذلك يتم إرسال بيانات بصيغة xml علي ال header باسم XMLData

إلي الصفحه التي أرسلت طلب Request إلي الصفحه members.php (وهي الصفحه index.htm) كما يلي

$str  = "<member>";
$str .= "<index>$listIndex</index>";
$str .= "<name>$memberName</name>";
$str .= "</member>";

// send the data on the header
header("XMLData: $str");

دعنا الأن نعرض محتوي الصفحه index.htm ( و بالطبع يمكننا أن نجعلها صفحة php أي تكون index.php)

<script>
var intervalID;

// doFillProcess
function doFillProcess(element) {
    element.disabled = true;
    intervalID = window.setInterval("sendRequest()", 250);
}

// sendRequest
function sendRequest() {
    var memberListBoxObj = document.getElementById("memberListBox");
    memberListBoxObj.options[memberListBoxObj.length] = new Option("جاري تحميل البيانات ...", "");
    memberListBoxObj.options[memberListBoxObj.length-1].style.background = "yellow";

    var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    xmlhttp.open("POST", "members.php", true);

    xmlhttp.onreadystatechange = function() {
        if ( xmlhttp.readyState == 4 ) {
            var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
            xmldoc.loadXML( xmlhttp.getResponseHeader("XMLData") );

            var index = xmldoc.documentElement.selectSingleNode("index").text;
            var memberName = xmldoc.documentElement.selectSingleNode("name").text;

            memberListBoxObj.options[index].text = memberName;
            memberListBoxObj.options[index].style.background = "white";
        }
    }

    // send request to the server page
    xmlhttp.send(memberListBoxObj.length-1);

    if( memberListBoxObj.length > 3 ) {
        window.clearInterval(intervalID);
    }
}
</script>

<div dir=rtl>
 <input type=button value=" عرض أعضاء المشروع " onclick="doFillProcess(this)">
 <br><br>
 <select id="memberListBox" size=6 multiple  style="width:300;"></select>
</div>

ويتلخص الكود في وظائف الكائن XMLHTTP في التالي

لإنشاء كائن من نوع XMLHTTP نقوم بعمل التالي

    var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

ولتحديد بيانات الطلب request يتم ذلك من خلال الوظيفه open

ومن خلالها نحدد نوع إرسال البيانات أما Get أو POST ,

ونحدد اسم الصفحه التي سوف يرسل إليها الطلب وهي members.php

ثم نحدد للداله open طريقه إستقبال ال Response المرسل من الصفحه members.php هل هو إسلوب متزامن synchronous أم غير متزامن asynchronous

فعندما مقول أن القيمه سوف تكون false اي أن نوع إستقبال البيانات من النوع المتزامن synchronous اي ان الكود لن ينتقل إلي السطر التالي لكود إرسال الطلب إلا بعد وصول كل البيانات

وعندما تكون القيمه true اي أن نوع إرسال البيانات من النوع غير المتزامن asynchronous وبذلك لن يتعطل الكود منتظرا إستقبال جميع البيانات

ولكن سوف يعتمد علي الخاصيه readyState التابعه للكائن xmlhttp حيث أن هذه الخاصيه سوف تتغير من وقت لأخر وسوف تأخذ عده قيم كما يلي

القيمه 0 --> القيمه الأفتراضيه عند إنشاء كائن من نوع xmlhttp

القيمه 1 --> عند إستدعاء الوظيفه open يتم تغير قيمة الخاصيه readyState إلي 1

القيمه 2 --> عند إستدعاء الوظيفه send يتم تغير قيمة الخاصيه readyState إلي 2 , وفي هذه المرحله يتم تحميل البيانات loading ويكون الطلب request المرسل غير متاح

القيمه 3 --> فيها يكون قد تم إرسال جزء من البيانات

القيمه 4 --> فيها يكون قد تم إرسال كل البيانات

    xmlhttp.open("POST", "members.php", true);

وعندما تتغير قيمه الخاصيه readyState يتم إستدعاء الحدث onreadystatechange

وعندما تصبح قيمة الخاصيه readyState تساوي 4 بذلك تكون البيانات قد وصلت بشكل كامل

    xmlhttp.onreadystatechange = function() {
        if ( xmlhttp.readyState == 4 ) {
            var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
            xmldoc.loadXML( xmlhttp.getResponseHeader("XMLData") );

            var index = xmldoc.documentElement.selectSingleNode("index").text;
            var memberName = xmldoc.documentElement.selectSingleNode("name").text;

            memberListBoxObj.options[index].text = memberName;
            memberListBoxObj.options[index].style.background = "white";
        }
    }

ولإرسال البيانات نقوم بإستدعاء الوظيفه send ونمرر لها القيمه المراد إرسالها

    // send request to the server page
    xmlhttp.send(memberListBoxObj.length-1);

وباقي الأكود أظن أنها واضحه

وقد أرفقت هنا ملف به المثال المشروح بالإضافه إلي ملف المساعده للكائن xmlhttp من ال MSDN

Xmlhttp.rar

درس شرح xmlhttp مع php

مواضيع مشابهة