شبكة شوق القمر الترفيهية

خريطة الموقع

جديد المنتديات
   الاستثمار في مستقبل الفيديو : يوتيوب يعلن عن برنامج شركاء المنحة       قواعد الإيتيكيت.. أصبح لزاما على الرجل اكتسابها وتعلمها       كل ما يدور في ذهنك عن الجنس كتاب(500 سؤال وجواب) .!!       ملف : ليلة الزفاف       15 كيلومتراً السرعة القصوى في بكين       الفرق بين المرأة العاقر والرجل العقيم       فوائد واسباب تاخر الانجاب ..للمتزوجين فقط       دليلك السهل في تعلم استخدام مكتبة jQuery       هايف: لسنا ضد تكنولوجيا «البلاك بيري» ونؤيد ضبطها لحفظ الأمن العام والمجتمع       ايجابيات وسلبيات تقنية ajax الاجاكس     جديد الأخبار


القائمة الرئيسية

محرك البحث




بحث متقدم

أهم الاخبار

تسجيل الدخول


المستخدم
كلمة المرور

إرسال البيانات؟
تفعيل الاشتراك

إحصائيات
عدد الاعضاء: 5
مشاركات الاخبار: 31
مشاركات المنتدى: 0
مشاركات البرامج : 0
مشاركات التوقيعات: 0
مشاركات المواقع: 5
مشاركات الردود: 4

المتواجدون حالياً
المتواجدون حالياً :3
من الضيوف : 3
من الاعضاء : 0
عدد الزيارات : 77725
عدد الزيارات اليوم : 81
أكثر عدد زيارات كان : 4420
في تاريخ : 16 /08 /2010





.::. شبكة شوق القمر الترفيهية .::. » الأخبار » تقنيات برمجية » » ركن AJAX



طريقة حفظ البيانات دون تحميل للصفحة بشكل كامل PHP - POST with AJAX
طريقة حفظ البيانات دون تحميل للصفحة بشكل كامل
POST with AJAX

في بيئة PHP

أولاً : نقوم بإنشاء سكريبت في ملف بأسم script.js

وظيفة هذا السكريبت : لتحديد نوع المتصفح وانشاء الصفحة المخفية



كود

 function creaAjax(){

  var objetoAjax=false;

  try {

 

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

  } catch (e) {

   try {

 

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

         }

         catch (E) {

         objetoAjax = false;

   }

  }

 

  if (!objetoAjax && typeof XMLHttpRequest!='undefined') {

   objetoAjax = new XMLHttpRequest();

  }

  return objetoAjax;

}

 

 function FAjax (url,capa,valores,metodo)

{

   var ajax=creaAjax();

   var capaContenedora = document.getElementById(capa);

 

 

ثانياً نكتب هذا الفانكش عندما نريد استخدام خاصية POST

 

كود

if(metodo.toUpperCase()=='POST'){                document.write="HnHn";        ajax.open ('POST', url, true);        ajax.onreadystatechange = function() {                 if (ajax.readyState==1) {                                 capaContenedora.innerHTML="Cargando.......";                 }                 else if (ajax.readyState==4){                        if(ajax.status==200)                        {                                 document.getElementById(capa).innerHTML=ajax.responseText;                        }                        else if(ajax.status==404)                                 {                                         capaContenedora.innerHTML = "La direccion existe";                                 }                         else                                 {                                         capaContenedora.innerHTML = "Error: ".ajax.status;                                 }                }        }        ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');        ajax.send(valores);        return;}

 

 

او هذا الفانكش عندما نريد استخدام خاصية GET

كود

if (metodo.toUpperCase()=='GET'){

 

        ajax.open ('GET', url, true);

        ajax.onreadystatechange = function() {

                 if (ajax.readyState==1) {

                                 capaContenedora.innerHTML="Cargando.......";

                 }

                 else if (ajax.readyState==4){

                        if(ajax.status==200){

                                 document.getElementById(capa).innerHTML=ajax.responseText;

                        }

                        else if(ajax.status==404)

                                 {

 

                                         capaContenedora.innerHTML = "La direccion existe";

                                 }

                                 else

                                 {

                                         capaContenedora.innerHTML = "Error: ".ajax.status;

                                 }

                }

        }

        ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        ajax.send(null);

        return

}

}

ليصبح الكود في ملف script.js كامل بالشكل التالي

كود

function creaAjax(){  var objetoAjax=false;  try {   objetoAjax = new ActiveXObject("Msxml2.XMLHTTP");  } catch (e) {   try {          objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");         }         catch (E) {         objetoAjax = false;   }  }  if (!objetoAjax && typeof XMLHttpRequest!='undefined') {   objetoAjax = new XMLHttpRequest();  }  return objetoAjax;} function FAjax (url,capa,valores,metodo){   var ajax=creaAjax();   var capaContenedora = document.getElementById(capa); if(metodo.toUpperCase()=='POST'){                document.write="HnHn";        ajax.open ('POST', url, true);        ajax.onreadystatechange = function() {                 if (ajax.readyState==1) {                                 capaContenedora.innerHTML="Cargando.......";                 }                 else if (ajax.readyState==4){                        if(ajax.status==200)                        {                                 document.getElementById(capa).innerHTML=ajax.responseText;                        }                        else if(ajax.status==404)                                 {                                         capaContenedora.innerHTML = "La direccion existe";                                 }                         else                                 {                                         capaContenedora.innerHTML = "Error: ".ajax.status;                                 }                }        }        ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');        ajax.send(valores);        return;}if (metodo.toUpperCase()=='GET'){        ajax.open ('GET', url, true);        ajax.onreadystatechange = function() {                 if (ajax.readyState==1) {                                 capaContenedora.innerHTML="Cargando.......";                 }                 else if (ajax.readyState==4){                        if(ajax.status==200){                                 document.getElementById(capa).innerHTML=ajax.responseText;                        }                        else if(ajax.status==404)                                 {                                         capaContenedora.innerHTML = "La direccion existe";                                 }                                 else                                 {                                         capaContenedora.innerHTML = "Error: ".ajax.status;                                 }                }        }        ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');        ajax.send(null);        return}}

 

 ونستدعي هذا الملف في صفحة HTML بالشكل التالي

 

PHP
<?php 
</span></p> <p dir="rtl" align="right"><span style="font-size: medium;">&lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;</span></p> <p dir="rtl" align="right"><span style="font-size: medium;">
?>

  وفي خاصية Form سنضع عملية الارسال بالشكل التالي على حسب عدد المدخلات الموجوده في الصفحة فلو افترضنا انها 3 فقط

PHP
<?php 
</span></p> <p dir="ltr"><span style="font-size: medium;">&lt;form method="post" onsubmit="HnHn('sch_run.php''HnHn_sch1='+document.getElementById</span></p> <p dir="ltr"><span style="font-sizemedium;">('HnHn_sch1').value+'&amp;amp;HnHn_sch2='+document.getElementById</span></p> <p dir="ltr"><span style="font-sizemedium;">('HnHn_sch2').value+'&amp;amp;HnHn_sch3='+document.getElementById</span></p> <p dir="ltr"><span style="font-sizemedium;">('HnHn_sch3').value,'POST'); return false" action="#"&gt;</span></p> <p dir="ltr"><span style="font-size: medium;">
?>

ليصبح الكود في النهاية بهذا الشكل ما عليك الا وضعه في ملف PHP

 

PHP
<?php 
</span></p> <p dir="ltr"><span style="font-size: medium;">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;</span></p> <p dir="ltr"><span style="font-size: medium;">&lt;html"&gt;</span></p> <p dir="ltr"><span style="font-sizemedium;">&lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;&lt;head&gt;  &lt;title&gt;HnHn&lt;/title&gt;&lt;/head&gt;&lt;body&gt;</span></p> <p dir="ltr"><span style="font-sizemedium;">&lt;form method="post" onsubmit="HnHn('sch_run.php''HnHn_sch1='+document.getElementById('HnHn_sch1').value+'&amp;amp;HnHn_sch2='+document.getElementById('HnHn_sch2').value+'&amp;amp;HnHn_sch3='+document.getElementById('HnHn_sch3').value,'POST'); return false" action="#"&gt; </span></p> <p dir="ltr"><span style="font-size: medium;">                           &lt;address&gt;                            &lt;INPUT  type="text" name=HnHn_sch1 size="30" maxlength="50" &gt;&lt;/address&gt;     </span></p> <p dir="ltr"><span style="font-size: medium;">                       &lt;address&gt;                            &lt;INPUT  type="text" name=HnHn_sch2 size="30" maxlength="50" &gt;&lt;/address&gt;   </span></p> <p dir="ltr"><span style="font-size: medium;">                         &lt;address&gt;                            &lt;INPUT  type="text" name=HnHn_sch3 size="30" maxlength="50" &gt;&lt;/address&gt;</span></p> <p dir="ltr"><span style="font-size: medium;">&lt;p&gt; &lt;input type="button" name="Button" value="POST""&gt;</span></p> <p dir="ltr"><span style="font-sizemedium;">&lt;/form&gt;</span></p> <p dir="ltr"><span style="font-sizemedium;">
?>



Bookmark and Share
عدد القراء: 58 - عدد التعليقات: 0

المشاركة السابقة : المشاركة التالية





الصفحات الاضافية

الحكمة العشوائية

اصبِرْ لكُلِ مُصيِبةٍ وتَجَلَّدْ، واعْلَمْ بأنَّ الدَّهْرَ غيرَ مُخَلَّدِ. ‏

القائمة البريدية


الصفحة الأولى | الأخبار | مركز التحميل | دليل المواقع | المنتدى | سجل الزوار | راسلنــا


حمل تولبار ألكسا واطرد الفيروسات

][ !! جميع المواضيع والآراء تمثّل وجهة نظر كاتبها فقط ولا تمثّل منتديات شوق القمر بأي شكل من الأشكال ما لم يوضّح غير ذلك !! ][

Search



شبكة ومنتديات شوق القمر الترفيهية ::.: www.shoqm.com :.::

↑ Grab this Headline Animator

Copyright© 2009 بإستخدام برنامج البوابة العربية 2.2