أياكس وكيف يعمل
Ajax هي تقنية تبادل البيانات مع الخوادم دون تحديث صفحات الويب. تم استخدامه لأول مرة من قبل Google في خرائط Google وكان شائعًا بسرعة.
لا يمكن أن يكون Ajax مهندسًا متقاطعًا. إذا كنت بحاجة إلى المجال المتبادل ، فيمكنك استخدام document.domain = 'A.Com' ؛ أو استخدم وكيل الخادم لملف XMLHTTPRequest الوكيل.
يعتمد Ajax على معايير الإنترنت الحالية ويستخدمها مجتمعة:
كائن xmlhttprequest (تبادل البيانات بشكل غير متزامن مع الخادم)
JavaScript/DOM (عرض المعلومات/التفاعل)
CSS (تحديد الأنماط للبيانات)
XML (كتنسيق لتحويل البيانات)
إنشاء كائن xmlhttprequest
جميع المتصفحات الحديثة (IE7+، Firefox ، Chrome ، Safari ، و Opera) لديها كائنات XMLHTTPrequest مدمجة.
إنشاء كائن Ajax:
// IE6 أو أعلى
var oajax = new xmlhttprequest () ؛
// ie6
var oajax = new ActiveXobject ("Microsoft.xmlhttp")
الاتصال بالخادم
Oajax.Open (الطريقة ، URL ، هل هي غير متزامنة)
نعلم جميعًا أن Ajax ، أي "JavaScript غير المتزامن و XML" (JavaScript غير المتزامن و XML) ، يشير إلى تقنية تطوير الويب التي تنشئ تطبيقات ويب تفاعلية. لذلك ، يولد أياكس للعمل في الوضع غير المتزامن (غير متزامن صحيح ، خطأ متزامن)
متزامن وغير متزامن
يشير التزامن إلى طريقة الاتصال التي يرسل فيها المرسل البيانات وينتظر المتلقي لإرسال استجابة قبل إرسال حزمة البيانات التالية.
يشير غير المتزامن إلى طريقة الاتصال التي يرسل فيها المرسل البيانات دون انتظار أن يرسل جهاز الاستقبال استجابة ثم يرسل حزمة البيانات التالية.
(بعبارة ذلك ببساطة: لا يمكن تزامن إلا شيئًا واحدًا تلو الآخر ، في حين يمكن القيام بالأشياء غير المتزامنة في نفس الوقت)
إرسال طلب إرسال ()
نسخة الكود كما يلي:
<script type = "text/javaScript">
وظيفة getDoc () {
var xmlhttp ؛
if (window.xmlhttprequest) {
xmlHttp = new xmlhttprequest () ؛
}
آخر{
xmlhttp = new ActivexObject ("microsoft.xmlhttp") ؛ // لـ IE6
}
XMLHTTP.OnReadyStateChange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById ("myid"). innerhtml = xmlhttp.responsetext ؛
}
}
xmlhttp.open ("get" ، index.php ، true) ؛
xmlhttp.send () ؛
}
</script>
</head>
<body>
<button type = "button" onClick = "getDoc ()"> طلب البيانات </button>
</body>
الحصول على أو نشر؟
بالمقارنة مع Post ، GET هو أبسط وأسرع ومتاح في معظم الحالات.
ومع ذلك ، استخدم طلب البريد في الحالات التالية:
غير قادر على استخدام الملفات المخبأة (تحديث الملفات أو قواعد البيانات على الخادم)
أرسل كميات كبيرة من البيانات إلى الخادم (POST لا يوجد بها حد بيانات)
النشر أكثر استقرارًا وموثوقية من الحصول على إدخال المستخدم الذي يحتوي على أحرف غير معروفة
تلقي معلومات الإرجاع
Oajax.onReadyStateChange = function () {// معالج الأحداث ليتم استدعاؤه عند تغيير حالة الطلب
تنبيه (Oajax.ReadyState) ؛
}
كلما تتغير قيمة خاصية ReadyState ، سيتم تشغيل حدث ReadyStateChange. يمكن استخدام هذا الحدث لاكتشاف قيمة readystate بعد كل تغيير في حالة. عادة ، نحن مهتمون فقط بالمرحلة التي تكون فيها قيمة ReadyState 4 ، لأن جميع البيانات جاهزة في هذا الوقت ، ومع ذلك ، يجب تحديد معالج الأحداث onReadyStateChange قبل استدعاء Open () لضمان توافق المتصفح. دعونا نلقي نظرة على مثال:
نسخة الكود كما يلي:
var xhr = createxhr () ؛
XHR.OnReadyStateChange = function () {
if (xhr.readyState == 4) {
if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {
تنبيه (XHR.Statustext) ؛
} آخر {
تنبيه ("لم يكن الطلب غير ناجح:" + xhr.status) ؛
}
}
} ؛
XHR.Open ("get" ، "example.txt" ، true) ؛
XHR.SEND (NULL) ؛
كائنات XHR
عندما يرسل كائن XHR طلب HTTP إلى الخادم ، يمر عدة حالات حتى تتم معالجة الطلب ، ثم يتلقى استجابة. ReadyState هي خاصية الحالة لطلب XHR ، الذي يحتوي على 5 قيم خاصية:
0 (غير ضروري) لم يتم استدعاء الطريقة المفتوحة () بعد
1 (تحميل) تم استدعاء طريقة send () ويتم إرسال الطلب
2 (اكتمال التحميل) تم الانتهاء من طريقة SEND () وتم استلام جميع محتوى الاستجابة
3 (تحليل) يتم تحليل محتوى الاستجابة
4 (كاملة) يتم الانتهاء من تحليل محتوى الاستجابة ويمكن استخدامه من قبل العميل.
حالة
تمثل سمة الحالة رمز حالة الاستجابة الذي تم إرجاعه من الخادم. على سبيل المثال: 200 يعني النجاح ، 404 يعني عدم العثور عليها.
رأس كلمة واحدة: رسالة. يعني هذا النوع من رمز الحالة أن الطلب قد تم قبوله ويجب معالجته.
رأس 2 كلمة: النجاح. يعني هذا النوع من رمز الحالة أن الطلب قد تم استلامه وفهمه وقبوله بنجاح.
رأس 3 كلمات: إعادة التوجيه. يعني هذا النوع من رمز الحالة أن الإجراءات الإجراءات الإضافية مطلوبة من قبل العميل لإكمال الطلب.
رأس 4-character: خطأ العميل. يعني هذا النوع من رمز الحالة أن العميل قد يبدو أن لديه خطأ ، مما يعيق معالجة الخادم.
رأس 5 كلمة: خطأ الخادم. يمثل هذا النوع من رمز الحالة خطأً أو حدث حالة غير طبيعية أثناء عملية معالجة طلب الخادم
مرفق أيضًا: شرح مفصل لرمز حالة HTTP
Statustext
Statustext هي المعلومات النصية التي يتم إرجاعها في الاستجابة ولا يمكن استخدامها إلا إذا كانت قيمة ReadyState 3 أو 4. عندما تكون ReadyState قيمة أخرى ، ستوصل العرض إلى خاصية Statustext استثناء.
طريقة XHR
| طريقة | يصف |
|---|---|
| إحباط () | يسبب إلغاء طلب التنفيذ حاليًا |
| getAllResponseHeaders () | إرجاع حرف واحد | سلسلة تحتوي على أسماء وقيم جميع رؤوس الاستجابة |
| getResponseHeader (الاسم) | إرجاع الاسم والقيمة المحددة في رأس الاستجابة |
| افتح (الطريقة ، URL ، Async ، اسم المستخدم ، PWD) | اضبط أساليب HTTP (Get أو Post) وما إلى ذلك. |
| إرسال (محتوى) | إصدار طلب مع محتوى الموضوع المحدد |
| setRequestHeader (الاسم ، القيمة) | تعيين رأس الطلب مع اسم وقيمة محددة |
نسخة الكود كما يلي:
<script type = "text/javaScript">
var oajax = oajax () ؛
تنبيه (Oajax.ReadyState) ؛ // "0" pops up "
oajax.open ("get" ، "index.html" ، true) ؛
تنبيه (Oajax.ReadyState) ؛ // "1" الملوثات العضوية الثابتة
Oajax.send (NULL) ؛
تنبيه (Oajax.readyState) ؛ // 4 pops تحت IE ، بينما Firefox هو 2
// يمكنك الاستماع من خلال حدث ReadyStateChange
Oajax = xhr () ؛
oajax.onreadyStateChange = function () {
التنبيه (Oajax.ReadyState) ؛ // الترتيب تحت Firefox هو 1 ، 2 ، 3 ، 4 ، ولكن في النهاية ، سيكون هناك 1 آخر
// تحت أي 1 ، 1 ، 3 ، 4
} ؛
oajax.open ("get" ، "index.txt" ، true) ؛
Oajax.send (NULL) ؛
</script>