آلية ذاكرة التخزين المؤقت Ajax على جانب المتصفح

يتم الحفاظ على ذاكرة التخزين المؤقت Ajax من قبل المتصفح. لعنوان URL معين تم إرساله إلى الخادم ، يتفاعل Ajax فقط مع الخادم أثناء الطلب الأول. في الطلبات اللاحقة ، لم يعد Ajax تقديم طلب إلى الخادم ، ولكنه يستخرج البيانات مباشرة من ذاكرة التخزين المؤقت.

في بعض الحالات ، نحتاج إلى الحصول على بيانات محدثة من الخادم في كل مرة. تتمثل الفكرة في جعل عنوان URL مطلوبًا بشكل مختلف دون التأثير على التطبيق العادي: أضف محتوى عشوائيًا بعد عنوان URL.

على سبيل المثال

 url = url+"&"+math.random () ؛

النقاط الرئيسية:

1. عنوان URL المطلوب في كل مرة يختلف (ذاكرة التخزين المؤقت Ajax لا تعمل)

2. لا يؤثر على التطبيق الطبيعي (الأكثر أساسية)

هنا لدينا استنتاجان:

1: Ajax Cache و HTTP Cache هي نفسها

تعد آليات HTTP وآليات التخزين المؤقت للمتصفحات الحديثة أسوأ بكثير من آليات كائن XMLHTTPrequest في AJAX ، لذلك لا تتعرف على طلبات AJAX أو تهتم بها. إنه ببساطة يتبع قواعد التخزين المؤقت HTTP العادية ويخدعها من خلال رأس الاستجابة الذي تم إرجاعه بواسطة الخادم.

إذا كان لديك بالفعل فهم لـ HTTP ذاكرة التخزين المؤقت ، فيمكنك استخدام معرفة ذاكرة التخزين المؤقت HTTP لفهم ذاكرة التخزين المؤقت Ajax. الفرق الوحيد هو أن طريقة تعيين رؤوس الاستجابة ستكون مختلفة عن ملفات الملفات العادية.

يمكن لرؤوس الاستجابة التالية أن تجعل أياكس قابلة للتخزين:

انتهاء صلاحية: يجب ضبط هذا العنصر على نقطة زمنية مناسبة في المستقبل. يعتمد إعداد النقطة الزمنية على تواتر تغييرات المحتوى. على سبيل المثال ، إذا كانت كمية المخزون المطلوبة ، يمكن أن تكون قيمة انتهاء الصلاحية بعد 10 ثوانٍ. إذا كانت الصورة المطلوبة ، فقد تكون قيمة انتهاء الصلاحية أطول لأنها لن تتغير بشكل متكرر. يسمح رأس انتهاء صلاحية المتصفح بإعادة استخدام البيانات المحزبة للمختبر المحلية لفترة من الوقت ، وبالتالي تجنب أي تفاعل غير ضروري مع بيانات الخادم.

المعدل الأخير: تعيين هذا العنصر هو خيار جيد. من خلاله ، سيستخدم المتصفح IF-EDISED-SINET في رأس الطلب للتحقق من المحتوى المحلي المحلي عند إرسال طلب الحصول على الحصول على مشروط. إذا لم يكن هناك حاجة إلى تحديث البيانات ، فسيقوم الخادم بإرجاع حالة استجابة 304.

Cache-Control: في حالة وجود الظروف المناسبة ، يجب تعيين هذه القيمة على الأماكن العامة بحيث يمكن حفظ جميع الوكيل المتوسط ​​وذاكرة التخزين المؤقت ومشاركتها مع المستخدمين الآخرين. في Firefox ، فإنه يدعم أيضًا ذاكرة التخزين المؤقت لطلبات HTTPS.

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

أنشأنا عرضًا تجريبيًا (لم يعد من الممكن عرض هذا العرض التوضيحي (□) ノ) لتوضيح كيفية عمل هذه الرؤوس. في httpwatch ، يمكنك أن ترى أننا نضع رؤوس الاستجابة الثلاثة أعلاه في معلومات رأس الاستجابة.

إذا قمت بالنقر فوق الزر "Ajax Update" بانتظام ، فإن التغيرات في الوقت تميل إلى أن تكون كل دقيقة أخرى. لأن رأس استجابة انتهاء الصلاحية يتم تعيينه على الدقيقة التالية. في لقطة الشاشة أدناه ، يمكنك أن ترى: عند النقر فوق الزر "التحديث" مرارًا وتكرارًا ، سيقرأ طلب AJAX ذاكرة التخزين المؤقت المحلية للمتصفح دون توليد نشاط شبكة (قيم أشرطة الإرسال والنقل هي 0)

تم إرسال طلب AJAX بواسطة آخر نقرة على 1: 06.531 تم إنشاء نقل بيانات الشبكة التي تم إنشاؤها الوقت لأن البيانات المخزنة مؤقتًا قد تجاوزت دقيقة واحدة. أعاد الخادم 200 حالة استجابة للإشارة إلى أنه تم الحصول على نسخة جديدة من البيانات.

أعتقد أن هذا العرض التوضيحي يجب أن يكون زرًا ، واحصل على الوقت الحالي في كل مرة تنقر فيها ثم العودة إلى الصفحة الحالية.

2: لن يقوم متصفح IE بتحديث المحتوى الذي تم الحصول عليه من خلال Ajax قبل انتهاء صلاحية الوقت.

في بعض الأحيان ، يتم استخدام Ajax لملء أجزاء معينة من الصفحة (مثل قائمة الأسعار) عند تحميل الصفحة. لا يتم تشغيله بواسطة حدث المستخدم (مثل النقر فوق زر) ، ولكن يتم إرساله عبر JavaScript عند تحميل الصفحة. يبدو الأمر كما لو أن طلبات AJAX هي نفس الموارد المدمجة (مثل JS و CSS).

إذا قمت بتطوير مثل هذه الصفحة ، عند تحديثها ، فقد ترغب في تحديث محتوى طلب AJAX المدمج. بالنسبة للموارد المدمجة (ملفات CSS ، الصور ، وما إلى ذلك) ، سيرسل المتصفح تلقائيًا الأنواع المختلفة التالية من الطلبات من خلال ما إذا كان المستخدم يعمل على تحديثه هو F5 (تحديث) أو CTRL+F5 (تحديث القوة):

1.F5 (تحديث): إذا كان محتوى الطلب يحتوي على رأس استجابة معدل آخر ، فسيقوم المتصفح بإرسال طلب تحديث مشروط. يستخدم رأس طلب IF-Educed-Since للمقارنة ، بحيث يمكن للخادم إرجاع حالة 304 لتجنب نقل البيانات غير الضرورية.

2.CTRL+F5 (تحديث القوة): يخبر المتصفح بإرسال طلب تحديث غير مشروط ، ويتم ضبط التحكم في ذاكرة التخزين المؤقت لرأس الطلب على "عدم التخزين المؤقت". هذا يخبر جميع الوكيل المتوسط ​​وذاكرة التخزين المؤقت: يحتاج المتصفح إلى الحصول على أحدث إصدار ، بغض النظر عما إذا كان قد تم تخزينه مؤقتًا.

تنشر Firefox طريقة التحديث هذه إلى طلبات Ajax المرسلة عند تحميل الصفحة ، وتعامل طلبات AJAX هذه كموارد مضمنة. فيما يلي لقطة شاشة لـ HTTPWatch تحت Firefox ، تُظهر تأثير طلبات AJAX عند التحديث (F5) صفحة:

يضمن Firefox أن يكون الطلب الذي بدأه Ajax مشروطًا. في هذا المثال ، إذا تم تخزين البيانات مؤقتًا لمدة تقل عن 10 ثوانٍ ، فإن الخادم يرجع 304 ، إذا كان يتجاوز 10 ثوانٍ ، فإن الخادم يرجع 200 ، ويعيد نقل البيانات.

في IE ، يتم تشغيل طلب AJAX عند تحميل الصفحة لا علاقة له بأجزاء أخرى من الصفحة ، ولن تتأثر بطريقة تحديث المستخدم. إذا لم تنتهي صلاحية بيانات AJAX المخزنة مؤقتًا ، فلن يكون هناك طلبات الحصول على طلبات إلى الخادم. سوف تقرأ البيانات مباشرة من ذاكرة التخزين المؤقت ، ومن httpwatch هي نتيجة (ذاكرة التخزين المؤقت). الشكل التالي هو الضغط على F5 لتحديث إذا لم يتم انتهاء ذاكرة التخزين المؤقت بموجب IE:

حتى إذا تم إجباره على التحديث من خلال CTRL+F5 ، فسيتم قراءة البيانات التي تم الحصول عليها من خلال Ajax من ذاكرة التخزين المؤقت:

هذا يعني أنه لن يتم تحديث أي شيء تم الحصول عليه من خلال Ajax بموجب IE إذا لم ينتهي صلاحيته - حتى لو كنت تستخدم Ctrl+F5 لفرض التحديث. الطريقة الوحيدة لضمان حصولك على أحدث البيانات هي مسح ذاكرة التخزين المؤقت يدويًا. يمكنك استخدام شريط أدوات HTTPWatch:

لاحظ أن نتيجة ذاكرة التخزين المؤقت و 304 نتيجة مختلفة. ذاكرة التخزين المؤقت هي في الواقع 200 (ذاكرة التخزين المؤقت) ، 304 يعني 304. ذاكرة التخزين المؤقت في الواقع لا ترسل طلب إلى الخادم. يمكنك أن ترى من Chrome أن وقته هو 0 ، والاستجابة فارغة أيضًا. ومع ذلك ، 304 مختلف.

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

يمكنك التحقق من الصفحة الرئيسية لـ Taobao ، التي لديها 200 (ذاكرة التخزين المؤقت) و 304. يمكنك التحقق من خلافاتهم.

تلخيص:

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