هذا كود جمعته من عدة أمثلة للأجاكس (ajax)
الفكرة هي أريد إرسال البيانات من المتصفح وهذا معروف ولكني لا أريد تحديث كامل الصفحة ولكن أريد أن يتغير جزء من الصفحة وهذا يتم بطريقة الأجاكس
اطلعت على حوالي أكثر من عشرة أكواد ومشاريع مفتوحة المصدر لهذه التقنية الحديثة ولكنها كلها مربوطة بلغة السيرفر ( php,asp) وغيرهما .
والسبب في هذا الربط أن الأجاكس لا تتطلب عمل فورم <form> لإرسال البيانات ولكن يكتفى ببعض الـ (input's( ثم تؤخذ قيم هذه المتغيرات بأسماءها بـ function خاص لها يكتب عن طريق لغة السيرفر لكل إرسال للبيانات .
وأنا أريد الفصل الكامل بين الجافا سيكريبت ولغات السيرفر بالاعتماد على دوال عامة تقريباً ليست خاصة بمسميات input's معين
إليكم هذا الكود وليس شرطاً أن تعرف الphp حتى تساعدني :
<?php
#---------------------------------------------------------------#
define("SelfPage" , $_SERVER['PHP_SELF']);
if (is_array ($_POST) ) {
for( reset( $_POST); $key = key( $_POST); next( $_POST) ) {
echo $key. ' = ' . $_POST[$key].'<br />';
}
}
#---------------------------------------------------------------#
?>
<script language="javascript" type="text/javascript">
var debug_mode = true;
var request;
var tagid = 'form_result';
var post_data;
var action = <? echo SelfPage ?>; // form.php
//---------------------------------------------------------------//
//---------------------------------------------------------------//
function ajax_debug(text) {
if (debug_mode) alert("RSD: " + text)
}
//---------------------------------------------------------------//
function HTTPObject() {
var ajx;
if(window.ActiveXObject) {
if(_XML_ActiveX) {
ajx = new ActiveXObject(_XML_ActiveX);
} else {
var versions = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP", "Msxml2.XMLHTTP.7.0", "Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0"];
for (var i = 0; i < versions.length; i++) {
try {
ajx = new ActiveXObject(versions);
if (ajx) {
var _XML_ActiveX = versions;
break;
}
}
catch (e) {}
}
}
}
if(!ajx && typeof XMLHttpRequest != undefined) {
try {
ajx = new XMLHttpRequest();
}
catch (e) {
Alrt("This browser does not support AJAX!");
ajx = false;
}
} return ajx;
}
//---------------------------------------------------------------//
function post() {
request = HTTPObject();
post_data = 'test=mysest';
request.onreadystatechange = WriteTag;
request.open('POST', action, true);
request.setRequestHeader("Method", "POST " + uri + " HTTP/1.1");
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send(post_data);
}
//---------------------------------------------------------------//
function WriteTag() {
if (request.readyState == 4) {
if (request.status == 200) {
var textout = request.responseText;
} else {
var textout = 'There was a problem with the request.';
}
if (tagid=='') {
document.write(textout);
} else {
document.getElementById(tagid).innerHTML = textout;
}
}
}
//---------------------------------------------------------------//
function GetDataFrom(formid) {
if (document.getElementById(formid).length > 0) {
var i, n, v, s;
s = '';
for (i=0; i < document.getElementById(formid).length; i++) {
n = document.getElementById(formid).elements.name;
v = document.getElementById(formid).elements.value;
s = s + n + '=' + v + '&';
}
return s;
} else return false;
}
//---------------------------------------------------------------//
</script>
<div id="form_result">
</div>
<div class="sendpost">
<form id="dosql" method="post" name="dosql" action="">
<table class="form" id="form">
<caption align="center">Add file CSS for Template</caption>
<a name="css.add"></a>
<tr><td>name</td>
<td>
<input name="ActionName" type="hidden" value="css.add">
<input name="name" id="name" type="text" size="30" value="">
</td>
</tr>
<tr><td>url</td> <td>
<input name="url" id="url" type="text" size="30" value="">
</td>
</tr>
<tr><td>template id</td> <td>
<select name="tmplid" id="tmplid" onChange="">
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button name="submit" type="submit" value="css.add" onClick="">submit</button>
<button name="ajax" type="button" onClick="post();">ajax</button>
<button name="reset" type="reset">reset</button>
</td>
</tr>
</table>
</form>
</div>المشكلة أن الإرسال العادي يعمل ولكن الإرسال بالجافا سكريبت لا يعمل وذلك لخطأ في كود الصفحة
أريد الحل وجزاكم الله خيراً