دعنا نوضح ذلك بمثال نموذجي للتحقق من تسجيل الدخول.
بشكل عام، يتطلب استخدام كائن XMLHttpRequest للتحقق من تسجيل الدخول الخطوات التالية:
1. استخدم طريقة DOM للحصول على القيمة في مربع الإدخال
انسخ رمز الكود كما يلي:
var userName = document.getElementById("userName").value;
2. قم بإنشاء كائن XMLHttpRequest. هذه الخطوة أكثر تعقيدًا والسبب الرئيسي هو مراعاة مشكلات توافق المتصفح.
انسخ رمز الكود كما يلي:
إذا (window.XMLHttpRequest) {
// بالنسبة إلى FireFox وMozillar وOpera وSafari وIE7 وIE8
xmlhttp = new XMLHttpRequest();
// تصحيح الأخطاء في بعض الإصدارات المحددة من متصفح Mozillar
إذا (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} وإلا إذا (window.ActiveXObject) {
// لـ IE6، IE5.5، IE5
// اسمان للتحكم يمكن استخدامهما لإنشاء كائنات XMLHTTPRequest وتخزينها في مصفوفة js
// الإصدار المصنف أولاً هو الأحدث
var activexName = ["MSXML2.XMLHTTP"، "Microsoft.XMLHTTP"]؛
لـ (var i = 0; i < activexName. length; i++) {
يحاول{
// احصل على اسم عنصر التحكم وقم بإنشائه إذا كان الإنشاء ناجحًا، قم بإنهاء الحلقة.
// إذا فشل الإنشاء، فسيتم طرح استثناء، ثم يمكن للحلقة الاستمرار في محاولة الإنشاء
xmlhttp = new ActiveXObject(activexName[i]);
استراحة؛
} قبض (ه) {
}
}
}
3. قم بتسجيل وظيفة رد الاتصال لكائن XMLHttpRequest. عند تسجيل وظيفة رد الاتصال، فإنك تحتاج إلى اسم الوظيفة ولا تقم بإضافة الأقواس.
انسخ رمز الكود كما يلي:
// عند تسجيل وظيفة رد الاتصال، يكون اسم الوظيفة مطلوبًا، ولا تضيف أقواسًا
// نحتاج إلى تسجيل اسم الوظيفة. إذا أضفنا قوسين، فسيتم تسجيل القيمة المرجعة للوظيفة.
xmlhttp.onreadystatechange = رد الاتصال؛
4. قم بتعيين معلومات الاتصال (GET).
انسخ رمز الكود كما يلي:
// تشير المعلمة الأولى إلى طريقة طلب http، وتدعم جميع طرق طلب http، وتستخدم بشكل أساسي الحصول والنشر
// تمثل المعلمة الثانية عنوان URL للطلب، والمعلمات المطلوبة بواسطة طريقة الحصول موجودة أيضًا في عنوان URL.
// تشير المعلمة الثالثة إلى ما إذا كان سيتم استخدام تفاعل غير متزامن أو متزامن، ويشير صحيح إلى غير متزامن
xmlhttp.open("GET"،AJAXServer?name="+ userName,true);
5.أرسل الطلب
انسخ رمز الكود كما يلي:
xmlhttp.send(null);
6. طريقة (POST)، تحتاج إلى تعيين رأس طلب http بنفسك، ولأنه يحتاج إلى التشفير، لا يمكنك إرسال البيانات مباشرة في المعلمة الثانية لـ XHR.open، بدلاً من ذلك، يجب عليك استخدام طريقة الإرسال (). لإرسال البيانات.
انسخ رمز الكود كما يلي:
// رمز لطلب POST
//xmlhttp.open("POST"،"AJAXServer"،true)؛
// تتطلب طريقة POST منك تعيين رأس طلب http بنفسك
xmlhttp.setRequestHeader("Content-Type"،"application/x-www-form-urlencoded");
// إرسال البيانات في وضع POST
xmlhttp.send("name=" + userName);
وظيفة رد الاتصال:
انسخ رمز الكود كما يلي:
// وظيفة رد الاتصال
رد اتصال الوظيفة () {
// تنبيه (xmlhttp.readyState)؛
//5. تلقي بيانات الاستجابة
// تحديد ما إذا كانت حالة الكائن هي اكتمال تفاعلي
إذا (xmlhttp.readyState == 4) {
// تحديد ما إذا كان تفاعل http ناجحًا
إذا (xmlhttp.status == 200) {
// احصل على البيانات التي تم إرجاعها بواسطة خادم lacquerware
// احصل على إخراج بيانات النص العادي من خلال مقطع الخادم
فار ResponseText = xmlhttp.responseText;
// عرض البيانات على الصفحة
// ابحث عن عقدة العنصر المقابلة لعلامة div من خلال dom
var divNode = document.getElementById("result");
// قم بتعيين محتوى html في عقدة العنصر
divNode.innerHTML = ResponseText;
} آخر {
تنبيه ("حدث خطأ !!!")؛
}
}
}