فهم عميق لأجاكس في جافا سكريبت

Ajax ليست لغة برمجة جديدة ، ولكن نهجًا جديدًا يستخدم المعايير الحالية. يمكن لـ AJAX تبادل البيانات مع الخادم دون إعادة تحميل الصفحة بأكملها. تتيح طريقة التفاعل غير المتزامنة للمستخدمين الحصول على بيانات جديدة دون الحاجة إلى تحديث الصفحة بعد النقر.

XMLHTTPREQUEST كائن

جوهر Ajax هو كائن XMLHTTPrequest (XHR). يوفر XHR واجهة لإرسال الطلبات إلى الخادم وحل استجابات الخادم. القدرة على الحصول على بيانات جديدة من الخادم بطريقة غير متزامنة.

قم بإنشاء كائنات في المتصفح (دعم IE7 فقط وأعلى):

 var xhr = new xmlhttprequest () ؛

كيفية استخدام XHR

أول شيء لتقديمه هو طريقة Open (). يتلقى 3 معلمات:

• نوع الطلب الذي سيتم إرساله (بعد ، الحصول ، إلخ)

• عنوان URL المطلوب

• قيمة BOLEAN التي تشير إلى ما إذا كان يتم إرسال الطلب بشكل غير متزامن

استدعاء Open () مثال:

XHR.Open ("get" ، "index.jsp" ، false) ؛

احصل على طلب لـ index.jsp. عنوان URL يتعلق بالصفحة الحالية التي يتم فيها تنفيذ الرمز ؛ لا يقوم استدعاء طريقة Open () بإرسال الطلب فعليًا ، بل يبدأ طلبًا للإرسال.

استدعاء إرسال () لإرسال الطلب:

XHR.SEND (NULL) ؛

إرسال () يتلقى معلمة ، أي البيانات التي سيتم إرسالها كهيئة طلب. إذا لم يكن هناك حاجة إلى إرسال البيانات من خلال هيئة الطلب ، فيجب تمرير NULL.

سيتم ملء البيانات المقابلة بالخصائص ذات الصلة لكائن XHR:

• المسؤولية: تم إرجاع النص كهيئة استجابة

• Responsexml: نوع المحتوى كاستجابة هو "Text/XML" أو "Application/XML"

• الحالة: حالة HTTP للاستجابة

• Statustext: وصف لحالة HTTP

بعد تلقي الاستجابة ، تحقق أولاً من سمة الحالة وتأكد من أن الاستجابة قد عادت ، بشكل عام يتم استخدام 200 كعلامة على النجاح. يشير رمز الحالة 304 إلى أنه لم يتم تعديل المورد ويمكن استخدام النسخة المخزنة مؤقتًا في المتصفح مباشرة.

من أجل تلقي استجابة مناسبة ، يجب اكتشاف رمز الحالة بالطريقة التالية:

 XHR.Open ("get" ، "index.jsp" ، false) ؛ xhr.send (null) ؛ if (

من خلال اكتشاف خاصية ReadyState ، يمكن تحديد المرحلة النشطة الحالية لعملية الطلب/الاستجابة.

• 0: لم يتم تهيئته. لم يتم استدعاء طريقة Open ()

• 1: ابدأ. تم استدعاء طريقة Open () ، ولم يتم استدعاء طريقة Send ().

• 2: إرسال. تم استدعاء طريقة send () ، ولم يتم استلام أي رد

• 3: استقبل. تم استلام بعض البيانات

• 4: مكتمل. تم استلام جميع البيانات ويمكن استخدامها على جانب العميل

عندما تتغير قيمة خاصية ReadyState ، سيتم تشغيل حدث ReadyStateChange. لضمان توافق المتصفح ، حدد معالج الأحداث onReadyStateChange قبل الاتصال بـ Open ().

 var xhr = new xmlhttprequest () ؛ xhr.onReadyStateChange = function () {if (xhr.readyState == 4) {if ((xhr.status> = 200 && xhr.status <300) || ناجحة: " + xhr.status) ؛}}} ؛ xhr.open (" get "،" index.jsp "، true) ؛ xhr.send (null) ؛

يمكن إلغاء الطلب غير المتزامن قبل استلام الرد:

XHR.Abort () ؛

معلومات رأس HTTP

توفر كائنات XHR طرقًا لمعالجة رؤوس الطلبات والاستجابة لمعلومات الرأس.

افتراضيًا ، أثناء إرسال طلب XHR ، سيتم أيضًا إرسال معلومات الرأس التالية.

• قبول: نوع المحتوى الذي يمكن للمتصفح التعامل معه

• قبول-شحنة: مجموعة الأحرف التي يمكن للمتصفح عرضها

• قبول الترميز: ترميز مضغوط يمكن للمتصفح التعامل معه

• قبول اللغة: اللغة التي تم تعيينها حاليًا من قبل المتصفح

• الاتصال: نوع الاتصال بين المتصفح والخادم

• ملف تعريف الارتباط: أي ملفات تعريف ارتباط على الصفحة الحالية

• المضيف: المجال الذي توجد فيه الصفحة التي تم إصدار الطلب فيها

• المرجع: عنوان URL للصفحة التي أصدرت الطلب

• مستخدم: سلسلة وكيل مستخدم المستعرض

استخدم setRequestHeader () لتعيين معلومات رأس الطلب المخصصة. يجب عليك الاتصال بالطريقة المفتوحة () بعد الاتصال بها وقبل الاتصال SEND ()

setRequestHeader ():

 XHR.Open ("get" ، "index.jsp" ، true) ؛ XHR.SetRequestHeader ("MyHeader" ، "MyValue") ؛ xhr.send (null) ؛

استدعاء getResponseHeader () وتمرير في اسم الحقل للحصول على معلومات رأس الاستجابة المقابلة. GetAllResponseHeader () يحصل على سلسلة طويلة تحتوي على جميع معلومات الرأس.

 var myheader = xhr.getResponseHeader ("myheader") ؛ var allheaders = xhr.getAllResponseHeader () ؛

احصل على الطلب

يتم استخدام GET للاستعلام عن الخادم للحصول على معلومات معينة. يمكنك إلحاق معلمات سلسلة الاستعلام حتى نهاية عنوان URL. يجب ترميز اسم وقيمة كل معلمة في سلسلة الاستعلام باستخدام EncodeUricomponent ():

 xhr.open ("get" ، "login.jsp؟ name1 = value1 & name2 = value2" ، false) ؛ يتلقى Addurlparam () ثلاث معلمات: عنوان URL للمعلمة المراد إضافتها ، واسم المعلمة ، وقيمة المعلمة. var url = "login.jsp" ؛ // إضافة معلمة url = addurlparam (url ، "username" ، "xxyh") ؛ url = addurlparam (url ، "password" ، "xxyh123") ؛ // تهيئة الطلب xhr.open ("get" ، url ، false) ؛

طلب النشر

يتم استخدام طلب النشر لإرسال البيانات إلى الخادم الذي يجب حفظه. يمكن أن يحتوي جسم طلب البريد على الكثير من البيانات ، والتنسيق غير محدود.

طلب التهيئة:

 XHR.Open ("post" ، "login.jsp" ، true) ؛ قم أولاً بتعيين معلومات رأس المحتوى إلى Application/X-WWW-Form-urlencoded ، ثم قم بإنشاء تنسيق سلسلة. إذا كنت بحاجة إلى تسلسل بيانات النموذج في الصفحة ثم إرسالها إلى الخادم من خلال XHR ، فيمكنك استخدام دالة Serialize () لإنشاء هذه السلسلة: XHR.Open ("Get" ، "login.jsp" ، false) ؛ document.getElementById ("user-info") ؛ xhr.send (serialize (form)) ؛

ما سبق هو الفهم المتعمق لأجاكس في JavaScript الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!