خلل في كود ajax

[dev11]

لدي كود ajax واريد تعديله لكي استطيع استخدامه لاكثر من حقل ..

function createRequestObject() {
    var req;
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert('Problem creating the XMLHttpRequest object');
    }
    return req;
}
var http = createRequestObject();
function sendRequest(string, value) {
    http.open('get', 'ajax.php?'+string+'='+value);
    http.onreadystatechange = handleResponse(string);
    http.send(null);
}
function handleResponse(id) {
    if (http.readyState == 4 && http.status == 200) {
        var response = http.responseText;
        if (response) {
            document.getElementById(id).innerHTML = response;
        }
    }
} 

هناك خلل في الكود السابق وبالتحديد في

function sendRequest(string, value) { 

http.onreadystatechange = handleResponse(string); 

function handleResponse(id) { 

document.getElementById(id).innerHTML = response; 

حيث انني اقوم بارسال القيم للدالة بالطريقة

sendRequest('name', 'swalif') 

تستقبل الدالة sendRequest المتغير string ومن ثم تقوم بارساله للدالة handleResponse ..
الان المشكلة في هذا السطر بالتحديد .. حيث انني لو قمت بـ

http.onreadystatechange = handleResponse; 

ستعمل بشكل صحيح .. لكن سيكون علي تحديد الـ id مسبقا بينما اريد تحديده عن طريق الدالة sendRequest وهي تقوم بارساله للدالة handleResponse آلياً ..

هل من حل لهذه المشكلة ؟

[Flasher]

عرف متغير خارج الدوال كما فعلت بhttp باسم var id
واجعل handleResponse بدون paramaters وداخل sendRequest غير الid.

[dev11]

أخي الكريم Flasher .. لقد حاولت كثيراً في تطبيق ماذكرته ولم أفلح ..

هل لنا بمثال جزاك الله خيراً ..

[feras007]

أخي الكريم ياريت توضح لنا انت الكود لشو تستخدمه على شان أقدر افيدك ,, ممكن بطريقة تانية أسهل .

تحياتي
فراس

[feras007]

أخي الكريم ياريت توضح لنا انت الكود لشو تستخدمه على شان أقدر افيدك ,, ممكن بطريقة تانية أسهل .

تحياتي
فراس

[Flasher]

أخي الكريم Flasher .. لقد حاولت كثيراً في تطبيق ماذكرته ولم أفلح ..

هل لنا بمثال جزاك الله خيراً ..

تفضل

<script type="text/javascript">
function createRequestObject() {
    var req;
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert('Problem creating the XMLHttpRequest object');
    }
    return req;
}
var id = null;
var http = createRequestObject();
function sendRequest(string, value, _id) {
	id = _id;
    http.open('get', 'ajax.php?'+string+'='+value);
    http.onreadystatechange = handleResponse;
    http.send(null);
}
function handleResponse() {
    if (http.readyState == 4) {
        var response = http.responseText;
        if (response) {
            document.getElementById(id).innerHTML = response;
        }
    }
}  
sendRequest('sss', 'vvvv', 'Result')
</script>

<div id="Result">loading...</div>

[dev11]

أشكرك أخي العزيز Flasher .. وأسأل الله أن يوفقك في الحياة الدنيا والآخرة .

[dev11]

نقطة أخيرة .. هل يمكن إضافة نص أو صورة تُعرض أثناء إستدعاء البيانات ؟

loading...

[dev11]

أخي العزيز فراس .. كما أسلفت أنني اريد استخدام الـ ajax لعدة حقول وليس لحقل واحد ..
أعتقد أن الصورتين توضح المقصود ..

[feras007]

اها فهمت أخي الكريم ,, بالنسبة لسؤالك هل يمكنك وضع صورة نعم يمكنك ذلك من خلال وضع الكود التالي قبل

  if (http.readyState == 4) {

ضع الكود الآتي :

var ajaxtest = document.getElementById("id here");
ajaxtest.innerHTML = "your HTML code here :) or ur msg!";

تحياتي
فراس

[dev11]

أشكرك أخي العزيز فراس ، لكن لدي ملاحظة بسيطة وهي انه لا حاجة لوضع متغير جديد باسم ajaxtest بل سنضعه مباشرة ، ايضاً لو ركزت في المثال الذي وضعه Flasher ستجد انني قمت بتحديد الـ id عن طريق الدالة sendRequest ..

document.getElementById(id).innerHTML = "loading..."; 

لم اجربه لكن منطقياً سيعمل ..

شكرا لك مرة اخرى ، واتوقع انك تعرف هذه الملاحظات مسبقاً

[dev11]

لقد استغنيت عن الـ paramater _id لان قيمته مساوية للـ paramater string بالاضافة لـ Result للتفريق بين اسم العنصر في الـ form وبين الـ element الذي ستعرض فيه النتيجة ..

لمن يريد الكود كاملاً ..

function createRequestObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert('Problem creating the XMLHttpRequest object');
    }
}
var http = createRequestObject();
var id = null;
function ajax(string, value) {
    id = string+'Result';
    http.open('get', 'ajax/ajax.php?'+string+'='+value);
    http.onreadystatechange = handleResponse;
    http.send(null);
}
function handleResponse() {
    document.getElementById(id).innerHTML = '<img src="ajax/loading.gif" alt="loading..." />';
    if (http.readyState == 4 && http.status == 200) {
        var response = http.responseText;
        if (response) {
            document.getElementById(id).innerHTML = response;
        }
    }
} 

ولمن يريد الصورة اثناء التحميل فانه يمكن الحصول عليها من Ajaxload - Ajax loading gif generator

مرة أخرى شكراً للاخوان Flasher ، فراس ..

[dev11]

خلل فني

[mark_cool5]

أخي الكريم ياريت توضح لنا انت الكود لشو تستخدمه على شان أقدر افيدك ,, ممكن بطريقة تانية أسهل .

تحياتي
فراس

ايوه ياريت توضح علشان نقدر نفيدك

[dev11]

انظر http://www.swalif.net/softs/swalif44...1/#post1557739