AJAX: طريقة لطلب البيانات دون تحديث الصفحة بأكملها ؛
النواة الفنية لـ AJAX هو كائن XMLHTTPREQUEST ؛
عملية طلب AJAX: قم بإنشاء كائن XMLHTTPrequest ، والاتصال بالخادم ، وإرسال الطلبات ، واستلام بيانات الاستجابة ؛
/*** احصل على كائن Ajax*/function getajaxhttp () {var xmlhttp ؛ Try {// Chrome ، Firefox ، Opera 8.0+ ، Safari XmlHttp = New XmlHttPrequest () ؛ } catch (e) {// Internet Explorer Try {// ie5 ، 6 xmlhttp = new ActivexObject ("msxml2.xmlHtp") ؛ } catch (e) {try {// ie7 أو فوق xmlhttp = new ActivexObject ("microsoft.xmlhttp") ؛ } catch (e) {Alert ("Browser لا يدعم Ajax!") ؛ العودة كاذبة }}} return xmlhttp ؛}/** * إرسال طلب ajax * url-url * methodType (post/get) * con (صواب (غير متزامن) | خطأ (متزامن)) * المعلمة (المعلمة) الآخر هو الكائن الذي سيتم معالجته) * يحتاج OBJ إلى الانتقال إلى الكائن المراد معالجته في طريقة رد الاتصال */وظيفة AjaxRequest (url ، methodType ، con ، المعلمة ، وظيفة ، obj) {var xmlhtp = getajaxhttp () ؛ xmlHttp.OnReadyStateChange = function () {// readyState قيمة الوصف // 0 ، التهيئة ، تم إنشاء كائن XHR ، لم يتم تنفيذ فتح بعد // 1 ، تم إرسال طريقة التحميل ، تم استدعاء الطريقة المفتوحة ، ولكن لم يتم إرسال الطلب // QUARGER أو عنوان URL الذي تم العثور عليه // 500: يقوم الخادم بإنشاء خطأ داخلي إذا (XMLHTTP.ReadyState == 4 && XHR.STATUS == 200) {// تم استلام استجابة http بالكامل قبل استدعاء الدالة (XMLHTP ، OBJ) ؛ }} ؛ xmlhttp.open (methodType ، url ، con) ؛ xmlhttp.send (المعلمة) ؛} // هذه هي وظيفة المعلمة createxml () {var xml = "<serve> <servid> asdfasdfasdf <// userId> </suber> //" json = {id: 0 ، اسم المستخدم: "good person"} ؛ إرجاع JSON ؛} الدالة C () {Alert ("") ؛}//امتحان
AjaxRequest ("http://www.baidu.com" ، "post" ، true ، createxml () ، c ، document) ؛دعونا نلقي نظرة على مثال آخر
ajax ({url: "./testxhr.aspx" ، // نوع الطلب نوع العنوان: "post" ، // طلب البيانات: {name: "super" ، العمر: 20} ، // request parameter type: "json" ، success: function (response ، xml) {// code evented efort placement} ، failure: status) دالة ajax (خيارات) {خيارات = خيارات || {} ؛ Options.type = (Options.type || "get"). ToupperCase () ؛ Options.datatype = Options.Datatype || "JSON" ؛ var params = formatparams (Options.Data) ؛ // Create - NonI6 - الخطوة 1 if (window.xmlHttPrequest) {var xhr = new xmlhttprequest () ؛ } آخر {// ie6 وتحت المتصفحات var xhr = new ActivexObject ('microsoft.xmlhttp') ؛ } // استقبال - الخطوة 3 XHR.OnReadyStateChange = function () {if (xhr.readyState == 4) {var status = xhr.status ؛ if (status> = 200 && status <300) {Options.Success && Options.success (xhr.responsetext ، xhr.responsexml) ؛ } آخر {Options.Fail && Options.fail (الحالة) ؛ }}} // connect and send - الخطوة 2 if (Options.type == "get") {xhr.open ("get" ، Options.url + "؟" + params ، true) ؛ XHR.SEND (NULL) ؛ } if if (Options.type == "post") {xhr.open ("post" ، Options.Url ، true) ؛ // قم بتعيين نوع المحتوى عند إرسال النموذج XHR.SetRequestHeader ("نوع المحتوى" ، "Application/X-WWW-Form-urlencoded") ؛ XHR.Send (params) ؛ }} // format parameter function formatparams (data) {var arr = [] ؛ لـ (var name in data) {arr.push (EncodeUricomponent (name) + "=" + EncodeUricomponent (data [name])) ؛ } arr.push (("v =" + math.random ()). استبدال ("." ، ")) ؛ return arr.join (" & ") ؛}دعونا نلقي نظرة على المبدأ
1. إنشاء
1.1. تدعم IE7 وما فوق الإصدارات كائنات XHR الأصلية ، بحيث يمكنك استخدامها مباشرة: var oajax = new xmlhttprequest () ؛
1.2. في IE6 والإصدارات السابقة ، يتم تنفيذ كائن XHR من خلال كائن ActiveX في مكتبة MSXML. قامت بعض الكتب بتحسين ثلاثة إصدارات مختلفة من هذه الكائنات في IE ، وهي MSXML2.XMLHTTP و MSXML2.XMLHTP.3.0 و MSXML2.XMLHTP.6.0 ؛ أشعر أنه أمر مزعج للغاية ، لذلك يمكنني استخدام العبارة التالية مباشرة لإنشائها: var oajax = new ActivexObject ('Microsoft.xmlhttp') ؛
2. الاتصال وأرسل
2.1. ثلاث معلمات من وظيفة Open (): طريقة الطلب ، وعنوان الطلب ، وما إذا كنت ستطلب بشكل غير متزامن (هناك عدد قليل جدًا من الطلبات المتزامنة ، ولم يتم استخدامها بعد) ؛
2.2. تتمثل طريقة طلب الحصول على البيانات إلى الخادم من خلال معلمات عنوان URL ، بينما يقوم النشر بتقديم البيانات إلى الخادم كمعلمة إرسال ؛
2.3. في طلب النشر ، قبل إرسال البيانات ، يجب تعيين نوع المحتوى للنموذج المقدم ؛
2.4. يجب ترميز المعلمات المقدمة إلى الخادم بواسطة طريقة EncodeUricOpmonent (). في الواقع ، في شكل قائمة المعلمات "مفتاح = القيمة" ، يجب تشفير كل من المفتاح والقيمة لأنهما سيحتويان على أحرف خاصة. في كل مرة تطلب فيها ، سيتم توضيح سلسلة من "V = XX" في قائمة المعلمات. هذا هو رفض ذاكرة التخزين المؤقت ، وفي كل مرة تطلبها مباشرة إلى الخادم.
Encodeuri (): يستخدم لتشفير URI بأكمله ، ولن يقوم بتشفير أحرف خاصة تنتمي إلى URI ، مثل الكولونز ، المائلات إلى الأمام ، علامات الاستفهام وعلامات الجنيه ؛ دالة decode المقابلة لها decodeuri () ؛
EncodeUricomponent (): يستخدم لتشفير جزء من URI وترميز أي أحرف غير قياسية يجدها ؛ دالة decode المقابلة لها decodeuricomponent () ؛
3. استقبل
3.1. بعد تلقي الاستجابة ، سيتم ملء بيانات الاستجابة تلقائيًا بكائن XHR. السمات ذات الصلة هي كما يلي
مسؤولية: محتوى الجسم الذي تم إرجاعه بواسطة الاستجابة ، من نوع السلسلة ؛
Responsexml: إذا كان نوع المحتوى للاستجابة هو "Text/XML" أو "Application/XML" ، فسيتم تخزين بيانات XML المقابلة في هذه الخاصية ، وهو نوع المستند المقابل لـ XML ؛
الحالة: رمز حالة HTTP للاستجابة ؛
Statustext: وصف حالة HTTP ؛
3.2. تمثل خاصية ReadyState لكائن XHR المرحلة النشطة الحالية لعملية الطلب/الاستجابة. قيمة هذه الخاصية على النحو التالي
0-غير المعقولة ، لم يتم استدعاء الطريقة المفتوحة () بعد ؛
1-Start ، Open () تسمى طريقة SEND () لا تسمى ؛
2-send ، تم استدعاء طريقة send () ، ولم يتم استلام أي استجابة ؛
3-Receive ، تم استلام جزء من بيانات الاستجابة ؛
4-COMPLETE ، تم استلام جميع بيانات الاستجابة ؛
طالما أن قيمة ReadyState تتغير ، سيتم استدعاء حدث ReadyStateChange (في الواقع ، من أجل النعومة المنطقية ، يمكنك وضع ReadyStateChange بعد إرساله ، لأنه يتم طلب الخادم أثناء الإرسال ، وسيتم إجراء اتصالات الشبكة ، والذي يستغرق وقتًا ما. من المقبول أيضًا تحديد المعالج ReadyStateChange بعد الإرسال.
3.3. في حدث ReadyStateChange ، حدد أولاً ما إذا كانت الاستجابة قد تم استلامها ثم تحديد ما إذا كان الخادم يعالج الطلب بنجاح. XHR.Status هو رمز الحالة. يبدأ رمز الحالة بـ 2 وينجح جميعًا. 304 يعني الحصول على ذاكرة التخزين المؤقت. يضيف الرمز أعلاه رقمًا عشوائيًا في كل مرة يتم فيها طلب الطلب ، لذلك لا يلزم الحكم على القيمة من ذاكرة التخزين المؤقت.
4. لا يمكن أن تكون طلبات AJAX مجلد!