1. يمكن لـ Ajax (JavaScript + XML) طلب بيانات إضافية مثل الخادم دون إلغاء تثبيت الصفحة ، أي تقنية التحديث المحلي
2. إنشاء كائن XHR
الدالة createxhr () {if (typeof xmlhttprequest! = "undefined") {return new xmlhttprequest () ؛ } آخر إذا (typeof activexObject! = "undefined") {// <ie7 if (typeof discument.callee.activexString! = "string") {var version = ["msxml2.xmlhttp.6.0" ، "msxml2.xmlhttp.3.0 لـ (i = 0 ، len = version.length ؛ i <len ؛ i ++) {try {new ActiveXObject (version [i]) ؛ encuments.callee.activexString = الإصدار [i] ؛ استراحة؛ } catch (ex) {}}} إرجاع ActiveXObject جديد (وسيطات. callee.activexString) ؛ } آخر {رمي خطأ جديد ("لا يوجد دعم لـ XHR") ؛ }} var xhr = createxhr () ؛ تنبيه (XHR) ؛ // [Object XMLHTTPrequest]3. ملاحظة الاستخدام: يتم تطبيق جميع الأمثلة في هذا القسم على جانب الخادم
1. استدعاء طريقة Open (). يقبل 3 معلمات: نوع الطلب الذي سيتم إرساله ("GET" ، "Post" ، وما إلى ذلك) ، عنوان URL للطلب ، والقيمة المنطقية التي تشير إلى ما إذا كان يتم إرسال الطلب بشكل غير متزامن.
2. لإرسال طلب ، اتصل بالطريقة send () وقبول المعلمة ، أي أن يكون موضوع الطلب. فارغ إذا لم يكن مطلوبًا
3. سيتم ملء البيانات التي تم إرجاعها تلقائيًا في خصائص كائن XHR.
var xhr = createxhr () ؛ // افتح ملف example.txt في الحصول على متزامن // المزامنة: سوف ينتظر رمز JavaScript حتى يستجيب الخادم وتنفيذ XHR.Open ("get" ، "example.txt" ، false) ؛ XHR.SEND (NULL) ؛ // تمثل الحالة حالة http للاستجابة // 200 تمثل OK ، 304 تمثل ذاكرة التخزين المؤقت إذا ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {Alert (xhr.responsetext) ؛ // إرجاع نص الاستجابة ، 123456} آخر {Alert ("لم ينجح الطلب:" + xhr.status) ؛ }4.Example.text محتوى ملف هو سلسلة: 123456
4. بالطبع ، لن تكون هناك مشكلة في طريقة التزامن المستخدمة في العملية السابقة. علينا أن نتحدى طريقة غير متزامنة.
var xhr = createxhr () ؛// xhr.readyState يمثل الحالة الحالية للطلب/الاستجابة ، و 4 تمثل أن جميع بيانات الاستجابة قد تم قبولها // بالإضافة إلى ذلك ، طالما أن قيمة XHR.ReadyState تتغير ، فإن حدث XHR.ONREADESTATECHANG && XHR.Status <300) || XHR.STATUS == 304) {Alert ( } آخر {Alert ("لم ينجح الطلب:" + xhr.status) ؛ }}} ؛ XHR.Open ("get" ، "example.txt" ، true) ؛ XHR.SEND (NULL) ؛
5. كل طلب HTTP والاستجابة سيكون له معلومات الرأس المقابلة.
1. افتراضيًا ، أثناء إرسال طلب XHR ، سيتم أيضًا إرسال معلومات الرأس التالية.
① Accept: نوع المحتوى الذي يمكن للمتصفح التعامل معه.
② Accept-Charset: مجموعة الأحرف التي يمكن للمتصفح عرضها.
③ Accept-encoding: تشفير مضغوط يمكن للمتصفح التعامل معه.
language-language: اللغة التي تم تعيينها حاليًا من قبل المتصفح.
⑤connection: نوع الاتصال بين المتصفح والخادم.
⑥cookies: أي ملفات تعريف الارتباط التي تم تعيينها على الصفحة الحالية.
⑦ هاء: المجال الذي توجد فيه الصفحة التي تم إصدار الطلب فيها.
⑧referer: uri من الصفحة التي أصدرت الطلب.
⑨user-Agent: سلسلة وكيل مستخدم المستعرض.
2. استخدم طريقة SetRequestHeader () لتعيين معلومات رأس الطلب المخصصة. قبول معلمتين: اسم حقل الرأس وقيمة حقل الرأس
var xhr = createxhr () ؛ // xhr.readyState يمثل الحالة الحالية للطلب/الاستجابة ، و 4 تمثل أن جميع بيانات الاستجابة قد تم قبولها // بالإضافة إلى ذلك ، طالما أن قيمة XHR.ReadyState تتغير ، فإن حدث XHR.ONREADESTATECHANG && XHR.Status <300) || XHR.STATUS == 304) {Alert ( } آخر {Alert ("لم ينجح الطلب:" + xhr.status) ؛ }}} ؛ XHR.Open ("get" ، "example.txt" ، true) ؛ // XHR.SetRequestHeader ("name" ، "Zhang") ؛ // يمكن رؤية "الاسم" المقبول في http of exmentment.txt: "Zhang" xhr.send (null) ؛3.
var xhr = createxhr () ؛ // xhr.readyState يمثل الحالة الحالية للطلب/الاستجابة ، و 4 تمثل أن جميع بيانات الاستجابة قد تم قبولها // بالإضافة إلى ذلك ، طالما أن قيمة XHR.ReadyState تتغير ، فإن حدث XHR.ONREADESTATECHANG && xhr.status <300) || XHR.Status == 304) // تنبيه (اتصال) ؛ // text/plain // الحصول على جميع معلومات الاستجابة var all = xhr.getAllResponseHeaders () ؛ تنبيه (الكل) ؛ } آخر {Alert ("لم ينجح الطلب:" + xhr.status) ؛ }}}} ؛ XHR.Open ("get" ، "example.txt" ، true) ؛ XHR.SEND (NULL) ؛6. احصل على طلب. لقد ناقشنا طريقة الحصول على الطلب من قبل. الآن دعنا نوسعه ونضيف بعض المعلمات إلى طلب الحصول على.
/ ** URL: URL بدون طلب اسم الطلب: طلب مفتاح القيمة: REPRET VALUE RETRRING: url مع سلسلة طلب*/ وظيفة addurlparam (url ، الاسم ، القيمة) {url += (url.indexof ("؟") == -1؟ "؟": "&") ؛ url + = EncodeUricomponent (name) + "=" + EncodeUricomponent (value) ؛ إرجاع عنوان URL ؛ } var xhr = createxhr () ؛ XHR.OnReadyStateChange = function () {if (xHr.ReadyState == 4) {if ((xhr.status> = 200 && xhr.status <300) || xHr.Status == 304) } آخر {Alert ("لم ينجح الطلب:" + xhr.status) ؛ }}}} ؛ var url = "example.txt" ؛ url = addurlparam (url ، "name" ، "Zhang") ؛ url = addurlparam (url ، "Age" ، "23") ؛ // يصبح عنوان URL المطلوب: example.txt؟ name = Zhang & Age = 23 XHR.Open ("get" ، url ، true) ؛ XHR.SEND (NULL) ؛7. طلب البريد
1. تحليل الحالة: بعد ذلك ، دعنا نناقش تطبيق Ajax الذي يرسل طلبات في طريقة POST ، أي تسجيل المستخدم ، وسيتم إرجاع المطالبة بناءً على اسم المستخدم المسجل.
2. خطوات التنفيذ
1) أولاً ، يجب أن تكون هناك صفحة مسجلة (بالطبع ، إنها بسيطة للغاية هنا) ajax.html
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"> <title> unitled document </title> <trade> <style> </style> </head> <body> id = "userLabel"> الرجاء إدخال اسم المستخدم </label> <bord/> كلمة المرور: <إدخال type = "password" name = "password"/> <ber/> <input type = "president" value = "login"/> <br/> src = "ajax.js"> </script> <script src = "ajaxdo.js"> </script> <script src = "ajaxdo.js"> </script> </body> </html>
2) ثم بالطبع جزء JavaScript
①eventutil.js ، إليك مجرد قائمة بأجزاء الاستماع للحدث
var eventUtil = {addEvent: function (element ، type ، handler) {if (element.addeventListener) {element.addeventListener (type ، handler ، false) ؛ } آخر إذا (element.attachevent) {element.attachevent ("on" + type ، handler) ؛ }}}}②serialize.js: شكل التسلسل
دالة Serialize (form) {var parts = [] ، field = null ، i ، len ، j ، optlen ، orport ، optValue ؛ لـ (i = 0 ، len = form.elements.length ؛ i <len ؛ i ++) {field = form.elements [i] ؛ Switch (field.type) {case "select-One": case "select-multiple": if (field.name.length) {for (j = 0 ، optlen = field.options.length ؛ j <optlen ؛ j ++) {option = field.options [j] ؛ if (Option.selected) {optValue = "" ؛ if (Option.hasattribute) {optValue = (Option.hasAttribute ("value")؟ Option.value: Option.Text) ؛ } else {optValue = (Option.attributes ["value"]. المحددة؟ Option.value: Option.text) ؛ } parts.push (EncodeUricomponent (field.name) + "=" + EncodeUricomponent (optValue)) ؛ } } } استراحة؛ CASE غير محدد: // حقل مجموعة الحالة "ملف": // CASE FILE INPUT "إرسال": // إرسال Case Case "Reset": // Reset Button Case "Button": // Custom Button Break ؛ حالة "Radio": // Case Button Case "مربع الاختيار": // مربع الاختيار if (! field.checked) {break ؛ } /* قم بإجراء العملية الافتراضية* /الافتراضي: // توقف حقول النماذج بدون أسماء إذا (field.name.length) {parts.push (EncodeUricomponent (field.name) + "=" + EncodeUricomponent (field.value)) ؛ }}} parts.join ("&") ؛ }③ajax.js هي وظيفة Createxhr () أعلاه ، ولن يتم سردها هنا.
④ajaxdo.js ، الملف الأساسي ، هو جزء التشغيل من اسمنا ، الذي يتم كتابته بشكل عشوائي.
var form = document.forms [0] ؛ // الحصول على نموذج var username = form.elements ['username'] ؛ // username var userLabel = document.querySelector ("#userLabel") ؛ ] XHR.ResponSetext ؛ userlabel.firstchild.data = "آسف ، موجود بالفعل" ؛ "Application/X-WWW-Form-urlencoded") ؛3. جزء التحسين: الجميع رأى ذلك. عندما قدمنا النموذج الآن ، قمنا بتسلسل النموذج. يتم تعريف نوع formdata لهذا في XMLHTTPrequest المستوى 2 ، والذي سيقوم تلقائيًا بتسلسل النموذج بالنسبة لنا ولا نحتاج إلى كتابته بأنفسنا.
ننقل فقط بعض الكود
// ... الكود المحذوف هنا يتوافق مع طلب Post // post very xhr.open ("post" ، "dome.php" ، true) ؛ // يجب تغييره هنا فقط لاستبدال الوظيفة السابقة XHR.Send (FormData (Form)) ؛8. أجزاء أخرى (فهم لأن التوافق لا يكفي)
1. إعداد المهلة
XHR.Open ("get" ، "example.txt" ، true) ؛ XHR.Timeout = 1000 ؛ // قم بتعيين المهلة على ثانية واحدة (فقط لـ ie8+) xhr.ontimeout = function () {Alert ("لم يعود الطلب في ثانية.") ؛ } ؛ XHR.SEND (NULL) ؛2. طريقة OverRideMiMetype () ، النوع الذي تم إرجاعه بواسطة الخادم
var xhr = createxhr () ؛ XHR.Open ("get" ، "example.txt" ، true) ؛ XHR.OverridemImetype ("text/xml") ؛ // السابق كان النص/عادي XHR.Send (NULL) ؛3. أحداث التقدم
1. تحميل الحدث ، تم تشغيله طالما أن المتصفح يتلقى معلومات الخادم.
var xhr = createxhr () ؛ xhr.onload = function () {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {Alert (xhr.responsetext) ؛ } آخر {Alert ("لم ينجح الطلب:" + xhr.status) ؛ }} ؛ XHR.Open ("get" ، "example.txt" ، true) ؛ XHR.SEND (NULL) ؛2. حدث التقدم ، الذي تم تشغيله بشكل دوري خلال المتصفح الذي يتلقى بيانات جديدة
var xhr = createxhr () ؛ xhr.onprogress = function (event) {var divstatus = document.getElementById ("status") ؛ // حساب النسبة المئوية للبيانات التي تم استلامها من الاستجابة إذا (event.length Computable) {divstatus.innerhtml = "trauct" + event.position + "of" + event.totalsize + "bytes" ؛ }} ؛ XHR.Open ("get" ، "altevents.php" ، true) ؛ XHR.SEND (NULL) ؛ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.