الآن get & post بواسطة الاجاكس

Omr · 17-05-2008, 02:17 PM

السلام عليكم
كيف الحال جميعاً اسأل الله العلي القدير ان تكونوا جميعا بوافر صحة و خير عافية ان شاء الله .
والله انا نفسي اضيف المشاركة دي من زمان بس كنت كل مره اتردد

واقول ان الامر مش مهم بس الان انا لازم اكتب الموضوع علشان كدا نتكلم علي طول .
دار بيني وبين الاخ زيروا نقاش علي الموقع علي الرابط التالي عن استفسار عن الوصلات بالاجاكس
http://www.swalif.net/softs/swalif44/softs177616/
وهذا هو رابط الموضوع وكنت اتابع لفترة وجيزة الامور تلك ولكن كنت تركتها فترة نظرا للانشغالي بعض الوقت اما الان فرايت انه لابد من المشاركة ...
اولا كود كيفية فتح صفحة باستخدام الاجاكس مباشرة وهذا الكود كتبة الاخ زيروا علي الرابط واليكم مرة ثانية :-

كود PHP:

  <script type="text/javascript">  

 
var img = '<img src="http://www.napyfab.com/ajax-indicators/images/progressbar_microsoft.gif">'; 

var msg = '<br> loading ...';

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no) 

var loadedobjects="" 

var bustcacheparameter="" 

 
function include(url, containerid){ 

document.getElementById(containerid).innerHTML = img+msg;  

var page_request = false 

if (window.XMLHttpRequest) // if Mozilla, Safari etc 

page_request = new XMLHttpRequest() 

else if (window.ActiveXObject){ // if IE 

try { 

page_request = new ActiveXObject("Msxml2.XMLHTTP") 

}  

catch (e){ 

try{ 

page_request = new ActiveXObject("Microsoft.XMLHTTP") 

} 

catch (e){} 

} 

} 

else 

return false 

page_request.onreadystatechange=function(){ 

loadpage(page_request, containerid) 

} 

if (bustcachevar) //if bust caching of external page 

bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() 

page_request.open('GET', url+bustcacheparameter, true) 

page_request.send(null) 

} 

 
function loadpage(page_request, containerid){ 

if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) 

document.getElementById(containerid).innerHTML=page_request.responseText 

} 

 
function loadobjs(){ 

if (!document.getElementById) 

return 

for (i=0; i<arguments.length; i++){ 

var file=arguments[i] 

var fileref="" 

if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding 

if (file.indexOf(".js")!=-1){ //If object is a js file 

fileref=document.createElement('script') 

fileref.setAttribute("type","text/javascript"); 

fileref.setAttribute("src", file); 

} 

else if (file.indexOf(".css")!=-1){ //If object is a css file 

fileref=document.createElement("link") 

fileref.setAttribute("rel", "stylesheet"); 

fileref.setAttribute("type", "text/css"); 

fileref.setAttribute("href", file); 

} 

} 

if (fileref!=""){ 

document.getElementsByTagName("head").item(0).appendChild(fileref) 

loadedobjects+=file+" " //Remember this object as being already added to page 

} 

} 

} 

 
</script> 

 
<!-- ////////////////// --> 

<a style="text-decoration: none" href="#" onclick="include('http://www.swalif.net/softs','text')">show text</a> 

 <div align="center" id="text"> </div>  

 <br> 

 <a style="text-decoration: none" href="#" onclick="include('http://www.onshodah.com','text2')">show text2</a> 

 <div align="center" id="text2"> </div>

هذا الكود هو عمل روابط وفتحها مباشرة داخل الصفحة بدون تحميل ويمكنك استعلام من قواعد البيانات إحضارها مباشرة ،،، هذا ليس موضوعنا بس حبيت اضيفه .

في احد الايام وانا اتلصص علي اخينا زيروا كان عامل موضوع متخفي

مشاركة وانا طبعا كنت اتابع معه كتب كود عجبني وكان روعة

وهو الان معي وهو لاستخدام get & post في العمل واليكم الكود ايضاً

كود PHP:

   
<script type="text/javascript">

<!--

var msg = '<font face="MS Sans Serif" size="1">  <span lang="en-us"> &nbsp;</span>جاري الطلب ...</span></font>';

var img = '<img src="images/loading.gif">';

 
                var http_request = false;

 
           include = function (url) {

 
               if(!url)return false;

 
document.getElementById("wino").innerHTML = msg+img;

 
                http_request = false;

 
                if (window.XMLHttpRequest) { // Mozilla, Safari,...

                    http_request = new XMLHttpRequest();

                    if (http_request.overrideMimeType) {

                        http_request.overrideMimeType('text/xml');

                    }

                } else if (window.ActiveXObject) { // IE

                    try {

                        http_request = new ActiveXObject("Msxml2.XMLHTTP");

                    } catch (e) {

                        try {

                        http_request = new ActiveXObject("Microsoft.XMLHTTP");

                        } catch (e) {}

                    }

                }

 
                if (!http_request) {

                    alert('Giving up :( Cannot create an XMLHTTP instance');

                    return false;

                }

                http_request.onreadystatechange = alertContents;

 
 
                http_request.open("GET", url, true);

 
            //    http_request.setRequestHeader('Content-Type', 'text/html; charset:windows-1256');

 
                http_request.send(null);

                //return false

 
            }

 
            function alertContents() {

 
                if (http_request.readyState == 4) {

                    if (http_request.status == 200) {

                        document.getElementById("wino").innerHTML = http_request.responseText;

                            /*     document.getElementById("wino").onload = function(){

                                eval("generate_wysiwyg('textino')")

                            } */

 
                        return false

                    } else {

                        alert('There was a problem with the request.');

                        return false

                    }

                }

 
            }

 
winoo = function(){

var msg = "";

var name = document.getElementById('name').value;

var email = document.getElementById('email').value;

var subject = document.getElementById('subject').value;

if(name.length < 3)

    msg += "لم تدخل الإسم الصحيح \n";

if(email.indexOf("@") == -1 || email.indexOf(".") == -1)

    msg += "لم تدخل البريد الصحيح \n";

if(subject.length < 5)

    msg += "من فضلك عدد حروف الموضوع قليلة جدا\n";

 
if(msg == "")

    include('?do=send&name='+name+'&email='+email+'&subject='+subject);

    else

    alert(msg);

}

//-->

</script>

هذا هو كود الاجاكس باقي صفحة html عادية خالص فيها كود

كود بلغة HTML:

<table cellspacing="0" cellpadding="0" width="84%"> <tr> <td align="center"> <span dir="rtl"> <input type="text"  name="name" style="color: #008000; border: 1px solid #008000; font-family:Tahoma; font-size:8pt; font-weight:bold; background-image:url('images/back_input.gif')" value="ادخل اسمك" onfocus="this.value='';" size="29" dir="rtl"></span></td> </tr> <tr> <td align="center"> <span dir="rtl"> <input type="text" name="email" style="color: #008000; border: 1px solid #008000; font-family:Tahoma; font-size:8pt; font-weight:bold; background-image:url('images/back_input.gif')" value="ادخل بريدك" onfocus="this.value='';" size="29" dir="rtl"size="20"></span></td> </tr> <tr> <td align="center"> <span dir="rtl"> <textarea rows="9" name="subject" style="color: #008000; border: 1px solid #008000; font-family:Tahoma; font-size:8pt; font-weight:bold; )" value="ادخل اسمك" onfocus="this.value='';" dir="rtl" cols="30"></textarea></span></td> </tr> <tr> <td align="center"> <span dir="rtl"> <input type="button" onclick="winoo();" value="اتصل بنا"></span></td> </tr> </table> </td> <td align="center" width="22" dir="ltr"> &nbsp;</td> </tr> <tr> <td align="center">&nbsp;</td> <td align="center" width="221" colspan="2"> <span lang="en-us"><div id="wino" style="background:#C00;color:#fff"> </div> </span></td> </tr> </table> </td> </tr> </table>

كد الكود تمام ان شاء الله بس فيه حاجة اخيرة

وانا اسف اني طولت عليكم
اخي زيروا كان كاتب الكودين الاثنين ولكن هناك مشكلة لو انت اضفت الكودين الاثنين مع بعض لن يعملوا فيجب اضافة كود واحد فقط يا اما الـ get & post او كود احضار صفحة بواسطة الاجاكس .
المشكلة الثانية في كود get &post الاخير فيه مشكلة مش عارف حلها وهي .
عندنا اضافة radio box & chek box للاسف الكود مش بيجب نتائجهم بمعني لو انا عملتها مع الكود للاسف بيجيب النتيجة سلبية إذا اخترت الشيك بوكس او لم اختاره بيجيبه برده

ودي حاجة هتجنني ياريت لو حد هيعرف يحل لينا المشكلة دي بحيث ان في حالة اختيار الشيك بوكس او الراديو يظهر بالنتيجة الايجابية اما في حالة عدم الاختيار يعطينا النتيجة السلبية ونتظر ردكم

وخصوصا صاحب الكود

،،،
ناسف للاطالة عليكم ونتظر ردكم ان شاء الله
اخوكم المخلص
عمر شاهين

Omr · 18-05-2008, 09:24 PM

اخي جزاكم الله خيرا علي العرض الجميل دا ... وموفق ان شاء الله
انتظر تجربتك في حالة التجريب لن تحتاج العرض ان تقدمه إلا لواحد فقط وهو انت

دعواتك لي ...
اخـوك المخلص
عمر شاهين

linux juggler · 19-05-2008, 12:43 PM

استاذ عمر :
بالنسبة لي لا أقوم بكتابة الكود البرمجي من الصفر و انما استخدم المكتبات الجاهزة ، فلا فائدة ترجى ( سوى فهم عمل اللغة ) من أن أقوم بتصميم و انتاج السيارة الخاصة بي عندما يمكنني شراء هذه السيارة أو الحصول عليها ، و بذلك أقوم بتوفير كل من الوقت و الجهد .
و ما ساقوم بشرحه سيعتمد على مكتبة Prototype و على المكتبة المصغرة المعتمدة عليها و المسماة lowPro .
و سأقوم بشرح مبسط لكيفة تلبية طلبك ، لكن عليك الانتباه إلى أنه لابد من الاحاطة بالمكتبة بشكل جيد حتى تستطيع التعامل معها .

كود:

Event.addBehavior({
	'div#menu a.links:click':function(e){
		Event.stop(e);
		new Ajax.Updater({ success: 'content', failure: 'error' },this.href,{
			method:'get', // you can change it to post if you wish , or you can just delete it , default is post
			onSuccess : function(){
				if($('error') != null){ $('error').remove() }
				if($('content') == null){
					contentDiv = $div({id:'content'});
					new Insertion.Bottom(document.body,contentDiv);
				}else{
					$('content').remove();
					contentDiv = $div({id:'content'});
					new Insertion.Bottom(document.body,contentDiv);
				}
			},onFailure : function(){
				if($('content') != null){ $('content').remove() }
				if($('error') == null){
					errorDiv = $div({id:'error'});
					new Insertion.Bottom(document.body,errorDiv);
				}else{
					$('error').remove();
					errorDiv = $div({id:'error'});
					new Insertion.Bottom(document.body,errorDiv);
				}
			}
		});
	}
});

و أما كود صفحة الHTML فهو التالي :

كود بلغة HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <style type="text/css">
body{
	width:700px;
}
#menu{
	width:200px;
	padding:5px;
	float:left;
	border: 1px solid #FFD700;
}
a{
	text-decoration:none;
}
#content{
	width:450px;
	padding:10px;
	border:1px solid #99CCFF;
	float:right;
}
#error{
	background-color:#FFDDDD;
	border:1px solid #FFBBBB;
	padding:3px;
	margin:3px;
	float:right;
	width:450px;
}
</style> <script type="text/javascript" src="lib/javascript/prototype.js"> </script> <script type="text/javascript" src="lib/lowpro.js"> </script> <script type="text/javascript" src="test.js"> </script> <!-- ////////////////// --> </head> <body> <div id="menu"> <ul> <li><a href="index.php" class="links">Page 1</a></li> <li><a href="page2.html" class="links">Page 2</a></li> <li><a href="page3.html" class="links">Page 3</a></li> </ul> </div> </body> </html>

ملاحظة كود الجافاسكريبت تم وضعه ضمن ملف خارجي اسمه test.js

linux juggler · 19-05-2008, 03:46 PM

أعتذر عن الموضوع
حيث أنني لا اتعامل مع اي موقع من مواقع الدردشة لا بالبرمجة و لا بأي شيء آخر .

و شكراً

Omr · 20-05-2008, 12:36 PM

linux juggler
السلام عليكم حبيبي :-
اولا جزاكم الله خيرا علي الافادة فانا مثلك ولكن مع الاسف انا لم اعرف اتعامل نهائي مع اي مكتبة حاولت تكرار من سنة اني اتعامل ولم استطع نهائي

فياريت لو تدلني كيفية المعرفة حتي انني دخلت علي المواقع الرئيسية ولم اعلم ايضا كيفية استخدامها ويبقي جزاكم الله عني خيراً .
اما عن التجربة فلم تعمل معي لااعلم لماذا

؟؟
انتظرك ان شاء الله

linux juggler · 20-05-2008, 03:50 PM

استاذ ALAA__SAT :
كما قلت لك سابقاً موقعك هو عبارة عن موقع دردشة و انا لا اتعامل مع هذه المواقع لا من قريب ولا من بعيد ، حتى و لو كان ما سيأتيني منها الكثير الكثير .
أما كلمتك

اقتباس:

ولكن اذا قمت بساعدتي سترى انا لدي خبرة كبيرة جدا جدا جدا في انني استطيع اقفال اكبر موقع

فهل من الممكن أن توضح إلى ما ترمي إليه ؟! فلا أود أن افهم غلطاً أنك تقوم بتهديدي .

استاذ Omr :
هل قمت باستخدامه على مخدم محلي ؟ فأنت بحاجة إلى مخدم محلي على الأقل حتى يعمل معك الكود الخاص بطلبات الـ XML Request .

و بالنسبة للتعلم عليك صديقي بالكتب و اليك أحد مواقع الكتب الالكترونية http://www.ebookee.com/
و لا تتردد لشراء أي كتاب فبالنهاية أنت الذي ستكسب .

Omr · 21-05-2008, 02:15 AM

السلام عليكم اخي الكريم
اولا شيئ محتاج اعرف اسمك

ودا مهم جدا
ثانيا انا بالفعل جربته علي سيرفر محلي وتاكدت ودخلت اتعلمت المكتبة وحاولت جاهد ولكن لم استطع وانا المشكلة عندي في كلا من checkbook K & radio مش عارف مش شغالين معي في الكود الذي اسلفته سابقا وشكرا مؤخرا علي ردك الجميل

اخوك المخلص
عمر شاهين

linux juggler · 21-05-2008, 08:23 AM

استاذ عمر :
لا ادري ماذا سيفيد معرفة اسمي ، لكن كما تريد ، اسمي هو محمد زاهر غيبة ، معروف على النت باسم ( Linux Juggler ) ، و لا اكتب باستخدام اسمي سوى في موقعي
ظ…طظ…ط¯ ط²ط§ظ‡ط± ط؛ظٹط¨ط©
أما بالنسبة لموضوع التعامل مع المكتبة ، فلا يمكنك يا صديقي ان تتعلمها قبل ان تكون قد تعديت مرحلة المبتدئ في لغة الجافا سكريبت ، و طبعاً لا أعرف مستواك بها حتى استطيع ان اقدر مشكلتك ، لكن للأسف الجميع يود استخدام الأجاكس و تعلمها دون ان يتعلم اللغة التي بنيت عليها و هي الجافا سكريبت .
بالنسبة لتعلم المكتبة لا أعرف ما أستطيع أن اساعدك به سو أن أقول لك ابحث في الشبكة عن كتب عنها و اقرأها .
و بصراحة اعتذر عن مساعدتك في مشكلتك ليس لأنني لا أريد و لكني أريد منك أن تبحث اكثر و تتعلم من بحثك و تجربتك بنفسك ...

وشكراً

Omr · 21-05-2008, 11:02 AM

اولا يا استاذ محمد شرفت بمعرفتك كثيرا كثيرا ولا تنسي ان من اساس دعوة الاسلام التعارف (( وجعلناكم شعوبا وقبائل لتعارفوا )) لا تنسي ذلك فحاول التعرف علي كثير من الناس

ثانيا جزاكم الله خيراً علي ردك الجميل :> وانا بالفعل ليس لي دراية بالجافا والحمد لله الموقع الذي اعطتيتني اياه قمت بتحميل بعض الكتب لبداية التعلم

واستفدت كثيرا من كتاب واحد بس ولسه هبدأ المشوار وجزاكم الله خيرا علي ردودك الجميلة ولا تنساني في صالح دعائك ،،،
اخوك المخلص ،
عمر شاهين

linux juggler · 21-05-2008, 12:54 PM

استاذ عمر :
الأمر الذي أود فقط ان اشير إليه هو مقولتك :

اقتباس:

ان من اساس دعوة الاسلام التعارف (( وجعلناكم شعوبا وقبائل لتعارفوا ))

فهذا خطأ ، فالخالق لم يذكر و قال : " و جعلناكم أياها المسلمون شعوباً و قبائل لتعارفوا " .

على كل شكراً لك لنصيحتك ..

v3i · 21-05-2008, 07:46 PM

((يا أيها الناس انا خلقناكم من ذكر و أنثى و جعلناكم شعوبا و قبائل لتعارفوا إن أكرمكم عند الله أتقاكم ))

هاذي الاية كاملة

والاخ

linux juggler : ممكن تعلمنا من وين هالاية اي سورة ورقم الاية

شكرا لك

linux juggler · 22-05-2008, 12:27 PM

استاذ v3i لم أقل بأن هذه آية .
و إنما قلت بأن الآية الكريمة لم تذكر المسلمين أو تختصهم بهذه الآية .

Omr · 23-05-2008, 04:08 AM

v3i
شكرا لك اخي الكريم علي ردك وانا علم نص الاية

وجزاكم الله خيرا علي التوضيح ، و انتظر ردك في تجربة الكود ان شاء الله .
---------------
linux juggler
اخي جزاكم الله خيرا خيرا والامر

ابسط مما تخيل :> بس حسب فهمي انت الذي خصصتهم بالمسلمين في موضوعك عمتاً هذا ليس موضوعنا :> وجزاكم الله خيرا بمساعدتك لي ( وجزاكم الله عنا خيراً )
محبكم
اخوكم عمر شاهين

AL KHIAL · 11:46 AM

عم حبيبي توني انتبهت للموضوع

كود PHP:

   
 
<script type="text/javascript" language="javascript">
var http_request = false;
function makeRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url + parameters, true);
http_request.send(null);
}
 
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById('myspan').innerHTML = result; 
} else {
alert('There was a problem with the request.');
}
}
}
 
function get(obj) {
var getstr = "?";
for (i=0; i<obj.childNodes.length; i++) {
if (obj.childNodes[i].tagName == "INPUT") {
if (obj.childNodes[i].type == "text") {
getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
}
if (obj.childNodes[i].type == "checkbox") {
if (obj.childNodes[i].checked) {
getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
} else {
getstr += obj.childNodes[i].name + "=&";
}
}
if (obj.childNodes[i].type == "radio") {
if (obj.childNodes[i].checked) {
getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
}
}
} 
if (obj.childNodes[i].tagName == "SELECT") {
var sel = obj.childNodes[i];
getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
}
 
}
makeRequest('get.php', getstr);
}
</script>
 
 
<input type="button" name="button" value="GET test.html" 
onclick="javascript:makeRequest('test.html', '');">
<br><br>
<input type="button" name="button" value="GET get.php?test=2" 
onclick="javascript:makeRequest('get.php', '?test=2');">
<br><br>
 
 
<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
<input type="text" name="myfield" value="teststring"><br>
<input type="radio" name="myradio" value="0" checked> 0
<input type="radio" name="myradio" value="1"> 1<br>
<input type="checkbox" name="mycheck1" value="1"> 1
<input type="checkbox" name="mycheck2" value="2"> 2
<input type="checkbox" name="mycheck3" value="3"> 3
<input type="checkbox" name="mycheck4" value="4"> 4
<input type="checkbox" name="mycheck5" value="5"> 5
<br>
<select name="myselect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<input type="button" name="button" value="Submit" 
onclick="javascript:get(this.parentNode);">
<input type="submit" name="button" value="Normal Submit Button">
</form>
 
<br><br>
Server-Response:<br>
<span name="myspan" id="myspan"></span>

شفت هذا الكود يلبي طلبك بالكامل
ترى مو انا الي سويته لا ابد
مصدر الكود
AJAX Form POST/GET - HTML Form Submit with AJAX/Javascript Example/Tutorial
طبعا باللغة الانجليزية
وفي مثال على فكرة في الصفحة
تحياتي

Omr · 25-05-2008, 12:13 AM

AL KHIAL
حبيب قلبي والله انا ما عارف اشكرك ازاي انا بالفعل الكود دا مر عليه من فترة ولكن استبعدته شوية لمعظم الافكار حيث ان الكود اللي واضعه انا

فيه مثلا لودنج ومميزات كتيرة عموما انا جربته وهو يفي بالغرض المحدود وجزاكم الله خيرا علي ردك واشكرك كثير كثيرا

اخوك المخلص عمر شاهين

ALAA__SAT · 26-05-2008, 10:56 AM

السلام عليكم ورحمة الله
AL KHIAL

اعجبني جدا ردك

لي استفسار

لو انا عاوز اجلب نص معين داخل صفحة معين كل 3 ثواني مثلا هل يوجد كود لهكذا حالة

زي هذا الكود الي موضوع باخر رد ولكن بدل من ان اضغط بوست كل 3 ثواني تجلب الصفحة

هل من خبير

ALAA__SAT · 26-05-2008, 11:37 AM

اثناء تصفحي وجدة هذا السكربت المصغر

يعمل على جلب مستند نصي داخل الصفحة

ولكن هل من الممكن تعديله بحيث يجلب نفس المستند كل 2 ثانية مثلا

وشكرا