يرمز Ajax إلى "Asynchronous JavaScript and XML" ويشير إلى تقنية تطوير الويب لإنشاء تطبيقات الويب التفاعلية. تقنية Ajax هي عبارة عن مجموعة من جميع التقنيات المتوفرة حاليًا في المتصفحات من خلال برامج JavaScript النصية. يستخدم Ajax كل هذه التقنيات بطريقة جديدة، مما يؤدي إلى تنشيط أسلوب B/S القديم لتطوير الويب.
من بين تقنيات Ajax، التقنية الأساسية هي XMLHttpRequest. واسمها الأصلي هو XMLHTTP، وقد تم إطلاقها لأول مرة بواسطة Microsoft في متصفح IE5.0 في عام 1999 من أجل تلبية احتياجات المطورين. لاحقًا تم تسمية هذه التقنية باسم XMLHttpRequest وفقًا للمواصفات المذكورة أعلاه. وهذا ما يجعل تكنولوجيا أجاكس فريدة من نوعها. باختصار، يوفر XMLHttpRequest وسيلة لبرامج JavaScript النصية التي تعمل في المتصفح للتواصل مع الخادم داخل الصفحة. يمكن لـ JavaScript داخل الصفحة الحصول على البيانات من الخادم أو إرسال البيانات إلى الخادم دون تحديث الصفحة. يوفر ظهور XMLHttpRequest إمكانية جديدة لتطوير الويب، بل ويغير تمامًا وجهة نظر الأشخاص حول مكونات تطبيقات الويب. فهو يتيح لنا القيام بتطوير الويب بطريقة جديدة تمامًا وتزويد المستخدمين بتجربة تفاعلية أفضل.
على عكس تطوير الويب التقليدي، لا يعرض Ajax تطبيقات الويب بطريقة تعتمد على الصفحات الثابتة. من وجهة نظر Ajax، يجب أن يتكون تطبيق الويب من عدد صغير من الصفحات، كل واحدة منها هي في الواقع تطبيق Ajax أصغر. تتضمن كل صفحة بعض مكونات Ajax التي تم تطويرها باستخدام JavaScript. تستخدم هذه المكونات كائن XMLHttpRequest للتواصل مع الخادم بطريقة غير متزامنة. وبعد الحصول على البيانات المطلوبة من الخادم، فإنها تستخدم واجهة برمجة تطبيقات DOM لتحديث جزء من المحتوى على الصفحة. لذلك، هناك ثلاثة اختلافات رئيسية بين تطبيقات Ajax وتطبيقات الويب التقليدية:
1. التواصل مع الخادم داخل الصفحة دون تحديث الصفحة بأكملها.
2. استخدم الوضع غير المتزامن للتواصل مع الخادم، دون مقاطعة عملية المستخدم، والحصول على إمكانات استجابة أسرع.
3. يتكون التطبيق من بضع صفحات فقط. تتم معظم التفاعلات داخل الصفحة، وليس هناك حاجة لتبديل الصفحة بأكملها.
يمكن ملاحظة أن Ajax يجعل تطبيقات الويب أكثر ديناميكية، ويجلب ذكاءً أعلى، ويزود مكونات Ajax UI بقدرات تعبيرية غنية. يسمى هذا النوع الجديد من تطبيقات الويب تطبيق RIA (تطبيقات الإنترنت الغنية).
في المقدمة بعض المعلومات عن مقدمة AJAX التي وجدتها على الإنترنت لمساعدة القراء الذين لا يعرفون تقنية AJAX على فهم تقنية AJAX في أسرع وقت ممكن، وبعد ذلك سأقدم لكم بعض تقنيات وتقنيات AJAX التي استخدمتها عملية التطوير الفعلية.
أهم شيء عند استخدام تقنية AJAX هو إنشاء كائن XMLHttpRequest. هناك الكثير من المعلومات حول كيفية إنشاء هذا الكائن على الإنترنت. إحدى الطرق الأكثر استخدامًا هي
الدالة createXMLHttpRequest() {
فار xmlhttp;
يحاول {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} قبض (ه) {
يحاول {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} قبض (ه) {
يحاول {
xmlhttp = new XMLHttpRequest();
} قبض (ه) {
تنبيه ("فشل إنشاء كائن XMLHttpRequest!")؛
}
}
}
إرجاع xmlhttp;
}
وفيما يلي سأدرج بعض الأمثلة وبعض الأشياء التي يمكن تعلمها من خلال هذه الأمثلة.
يعد الجزء التالي من التعليمات البرمجية مثالاً لكيفية التحقق مما إذا كان العنصر موجودًا بالفعل في قاعدة البيانات عند إضافة عنصر معين.
<input type = "text" style = "width:100٪" class = "noEmptyInput" name = "segment10" value = "<%=segment10٪>" maxlength = "16" onblur = "do_verify ()؛">
وظيفة do_verify() {
var section10 = document.mainFrm.segment10.value;
var مخزونItemId = document.mainFrm.inventoryItemId.value;
// تنبيه (الجزء 10)
xmlHttp = createXMLHttpRequest();
var url = "/servlet/com.sino.ies.inv.maintenance.servlet.ItemMaintainServlet?forward=doVerify&segment10=" + section10 + "&inventoryItemId=" + مخزونItemId;
xmlHttp.onreadystatechange = HandleReadyStateChange;
xmlHttp.open("post", url, true); // هناك أيضًا طريقتان لنقل البيانات: GET و POST، ولكن عندما تكون الطريقة POST، يجب كتابة الجملة التالية
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlHttp.send(null);
}
وظيفة مقبضReadyStateChange() {
إذا (xmlHttp.readyState == 4) {
إذا (xmlHttp.status == 200) {
إذا (xmlHttp.responseText == 'Y') {
document.mainFrm.isExist.value = 'Y';
document.getElementById("flag").style.display = "block"
document.mainFrm.segment10.focus();
} آخر {
document.mainFrm.isExist.value = 'N';
document.getElementById("flag").style.display = "none"
}
} آخر {
تنبيه (xmlHttp.status)؛
}
}
}
رمز الخلفية هو:
boolean Success = itemDAO.doVerifyItem(); //doVerifyItem هي الطريقة الرئيسية للتحقق مما إذا كان العنصر المحدد موجودًا في قاعدة البيانات
PrintWriter out = res.getWriter();
إذا (النجاح) {
print("Y");
}
out.flush();
out.Close();
}