في الآونة الأخيرة ، شاركت في الكثير من عمليات أياكس ، وعلي أن أفعل ما يجب أن أفعله في الخلفية. يتم تغليف وظيفة Ajax التي أستخدمها الآن من قبل موظفي الخلفية - لكنها تستند إلى jQuery Ajax ، لذلك سيكون عديمة الفائدة بدون jQuery. وأعتقد أن طريقة Ajax من jQuery كاملة للغاية ويمكن استخدامها مباشرة. إذا كان هناك jQuery ، فلن يتم استخدام Ajax له دون جدوى. ما افتقر إليه هو طريقة Ajax التي يمكن استخدامها بدون jQuery.
لذلك قضيت أيضًا يومًا في كتابة واحدة ، والمعلمات وطريقة الاتصال تشبه Ajax JQuery. يطلق عليه XHR ، لأن XHR = XMLHTTPREQUEST.
نسخة الكود كما يلي:
/*
* الاسم: XHR ، وظيفة تغليف Ajax
* الوصف: فئة تغليف مكالمات Javax ، تقليد طريقة مكالمات Ajax's Ajax
* المؤلف: عشر سنوات من الضوء
*/
var xhr = function () {
var
ajax = function () {
العودة ('xmlhttprequest' في النافذة)؟ وظيفة () {
إرجاع xmlhttprequest () جديد ؛
} : وظيفة () {
إرجاع ActiveXObject الجديد ("Microsoft.xmlhttp") ؛
}
} () ،
FormatData = function (fd) {
var res = '' ؛
لـ (var f في fd) {
res+= f+'='+fd [f]+'&' ؛
}
إرجاع Res.Slice (0 ، -1) ؛
} ،
ajax = function (ops) {
var
الجذر = هذا ،
req = ajax () ؛
root.url = ops.url ؛
root.type = ops.type || "المسؤول" ؛
root.method = ops.method || 'يحصل'؛
root.async = ops.async || حقيقي؛
root.data = ops.data || {} ؛
ROOT.COMPLETE = OPS.COMPLETE || وظيفة () {}؛
root.success = ops.success || وظيفة(){}؛
root.error = ops.error || الدالة (s) {Alert (root.url+'-> الحالة:'+s+'error!')} ؛
root.abort = req.abort ؛
root.setData = function (data) {
لـ (var d في البيانات) {
root.data [d] = data [d] ؛
}
}
root.send = function () {
var datastring = formatdata (root.data) ،
SendString ، احصل على = خطأ ،
Async = root.async ،
كاملة = root.complete ،
الطريقة = root.method ،
اكتب = root.type ؛
if (method === 'get') {
ROOT.URL+= '؟'+datastring ؛
الحصول على = صحيح ؛
}
req.open (الطريقة ، root.url ، async) ؛
إذا (! الحصول) {
req.setRequestHeader ("نوع المحتوى" ، "Application/X-WWW-Form-urlencoded") ؛
sendString = datastring ؛
}
// إعادة تعيين طريقة onReadyStateChange قبل إرسالها ، وإلا سيظهر طلب التزامن جديد وسيتم تنفيذ عمليات الاسترداد الناجحة (Chrome ، وما إلى ذلك ، سيتم تنفيذ onReadyStateChange عند مزامنة الطلب)
req.OnReadyStateChange = Async؟ وظيفة () {
// console.log ('Async true') ؛
if (req.readyState == 4) {
مكتمل()؛
if (req.status == 200) {
ROOT.SUCCESS (req [type]) ؛
} آخر {
root.error (req.status) ؛
}
}
} : باطل؛
req.send (sendString) ؛
if (! async) {
//console.log('async false ') ؛
مكتمل()؛
ROOT.SUCCESS (req [type]) ؛
}
}
root.url && root.send () ؛
} ؛
وظيفة الإرجاع (OPS) {Return New Ajax (OPS) ؛}
} () ؛
وصف المعلمة:
1. url: عنوان الطلب. لا يمكنك ملءه ، ولن يتم بدء الطلب. ولكن إذا لم تملأها وأجبرت على إرسالها ، فلن ألومك على أي أخطاء.
2.Method:
3.Data: البيانات المراد إرسالها هي كائن
4.Async: سواء كان ذلك غير متزامن ، ويفر
5. -type: نوع البيانات التي تم إرجاعها هو فقط المسؤولية أو الاستجابة
6.PLETE: الوظائف التي تم تنفيذها عند اكتمال الطلب
7. النجاح: يتم تنفيذ الوظائف عندما يكون الطلب ناجحًا
8.error: وظيفة تنفذ عند فشل الطلب
ملاحظة: لا تكون معلمات النوع غنية مثل نوع بيانات JQuery ، فقط BesponsetStext أو Responsexml في Ajax الأصلي. إذا تم إرجاع بيانات JSON ، فأنت بحاجة إلى التعامل معها بنفسك في وظيفة النجاح لتحويل النص إلى JSON.
وصف الوظيفة:
هناك وظيفتان لاستخدامهما في كائن XHR الذي تم تأسيسه. واحد هو إرسال. طريقة الاتصال هي: XHR.SEND () ، مع عدم وجود معلمات. وظيفتها هي بدء عملية الطلب. إذا لم يكن هناك عنوان URL أثناء التهيئة ، فلن يتم تنفيذ طريقة إرسال ، بحيث يمكنك إضافة عنوان URL لاحقًا والبدء في إرسال يدويًا - إذا لم يكن هناك عنوان URL أثناء الإرسال ، فسوف يفشل الطلب ولم أتعامل مع هذا الخطأ. فقط يمكنك العثور على الخطأ بنفسك.
طريقة أخرى هي setData ، طريقة الاتصال هي XHR.SetData (DATA_OBJ) ، ومعلمةها هي كائن. تتمثل وظيفة طريقة setData في استبدال القيمة جزئيًا في سمة البيانات لـ XHR.Data. على سبيل المثال ، هناك بالفعل صفحة: 1 في XHR.Data. يمكنك استخدام XHR.SetData ({page: 2}) لتحديث قيمتها دون التأثير على قيم السمات الأخرى الموجودة بالفعل في البيانات.
طريقة الاتصال:
نسخة الكود كما يلي:
var a1 = xhr ({
عنوان URL: '2.php' ،
بيانات:{
"اسم المستخدم": "lix" ،
'كلمة المرور': '123456' ،
"الجنس": "ذكر" ،
'Interset': 'play'
} ،
Async: خطأ ،
الطريقة: "الحصول على" ،
النجاح: الوظيفة (البيانات) {
var obj = json.parse (data) ؛
// ...
}
}) ؛
ملاحظة: لا حاجة لكتابة جديدة
مقدمة مميزة:
بعد هذه الفترة من تجربة المشروع ، وجدت أن فئة Ajax يجب أن يكون لها ميزة شائعة جدًا: من المريح بدء الطلبات بشكل متكرر. على سبيل المثال ، عندما أكتب صفحة من Ajax في المشروع ، يجب أن أرسل طلبًا في كل مرة أقوم فيها بتشغيل الصفحة ، لكن البيانات المرسلة لن تتغير باستثناء رقم الصفحة الحالي ورقم كل صفحة. إذا كان عليك تحديد تلك المعلمات التي لم تتغير مرارًا وتكرارًا ، فهذا بلا شك مضيعة للموارد.
لذلك نظرت وظيفة XHR هذه بالفعل هذه الوظيفة. خذ مثال ترقيم الصفحات. يمكننا تهيئة كائن XHR عند تحميل الصفحة وحفظه كمتغير A1. عندما يتم بدء طلب تشغيل الصفحة ، لم تتغير أي معلمات أخرى ، ولكن تم تغيير الوصل. في هذا الوقت ، يمكننا استدعاء طريقة setData لـ XHR لتغيير الوصلات.
نسخة الكود كما يلي:
a1.setData ({pagenumber: 2}) ؛
ملاحظة: معلمة setData هي أيضًا كائن.
بالطبع ، يمكنك أيضًا استبدال البيانات تمامًا:
a1.data = {...} ؛
ليس فقط البيانات ، يمكنك إجراء المزيد من التغييرات على كائن XHR الذي تم تأسيسه A1 ، مثل تغيير عنوان URL ، وتغيير وظيفة النجاح ، وتغيير النشر ، والتغيير بشكل متزامن إلى غير متزامن ... بعد تغيير ، استدعاء طريقة A1.Send () ، وسيبدأ الطلب مرة أخرى وفقًا لإعداداتك.
بالطبع ، إذا كان طلب أياكس آخر غير ذي صلة تمامًا ، فليست هناك حاجة لإجبار هذا A1 الجاهز. يمكننا إنشاء إنشاء XHR آخر يسمى A2 أو شيء من هذا القبيل.
إذا لم تكن راضيًا عن اسم XHR ، فيمكنك تغييره بنفسك فقط.
بالإضافة إلى ذلك ، يوفر نسخة مشفرة مضغوطة. يزيل الإصدار غير المضغوط التعليقات حوالي 2 كيلو بايت ، والنسخة المضغوطة هي 1.00 كيلو بايت.
نسخة الكود كما يلي:
var xhr = function () {var e = function () {return "xmlhttprequest" in window؟ function () {return new xmlhttprequest}: function () {return new ActiveXObject ("for n in (" far n in ("far n in (" far n in ("far n in (" far n in ("far n in (var n in (var n in in (var n in (var n in n in n in n in n in n in (var n in e) {t+= n+"="+e [n]+"&"} إرجاع t.slice (0 ، -1)} ، n = function (n) {var r = this ، i = e () ؛ r.url = n.url ؛ r.type = n.type || "prosesetext" ؛ r.method = n.method || n () {} ؛ r.success = n.success || function () {} ؛ r.error = n.error || function (e) {alert (r.url+"-> status:"+e+"error!")} ؛ r.abort = t في e) {r.data [t] = e [t]}} ؛ r.send = function () {var e = t (r.data) ، n ، s = false ، o = r.async ، u = r.complete ، a = r.method ، f = r.type ؛ if (a === "get") {r.url+= "؟"+e ؛ s = tr ue} i.open (a ، r.url ، o) ؛ if (! s) { ") ؛ n = e} ])} آخر {r.error (i.status)}}}: null ؛ الدالة (e) {return new n (e)}} ()
يجب أن يكون هناك بعض عدم الاكتمال في XHR. إذا وجدت ذلك أثناء الاستخدام في المستقبل ، فسوف أقوم بتصحيحه في الوقت المناسب. إذا لم تكن راضيًا عنها أو تجدها غير كافية ، فيرجى تقديم اقتراحات للتحسين.