Ajax (غير متزامنjavascriptandxml) جافا سكريبت غير المتزامن وXML.
إنه حل عيوب نموذج "إرسال الطلب وانتظار الاستجابة" في تطبيقات الويب التقليدية (بعد إرسال الطلب، يمكن للمتصفح فقط انتظار استجابة الخادم. ولا يمكن للمستخدم القيام بعمليات أخرى. بعد أن يرسل المتصفح الطلب، سيتخلى عن الصفحة بأكملها وينتظر حتى يقوم الخادم بإرجاع صفحة جديدة. بمعنى آخر، كمية البيانات المتفاعلة بين المتصفح والخادم كبيرة جدًا ولا يمكن الحصول على البيانات عند الطلب هو: من خلال كائن (XmlHttpRequest) المدمج في المتصفح، يرسل طلبًا إلى الخادم بشكل غير متزامن.
ما يسمى غير المتزامن يعني أن المتصفح لا يتخلى عن الصفحة بأكملها، أي أنه لا يرسل البيانات إلى الخادم من خلال إرسال النموذج. بعد معالجة الخادم للطلب، فإنه يعيد البيانات إلى كائن XmlHttpRequest، والبيانات يمكن الحصول على XmlHttpRequest من خلال جافا سكريبت، ثم استخدم هذه البيانات لتحديث الصفحة أثناء العملية بأكملها، ولا يتعين على المستخدم انتظار الرد من الخادم.
الوصف: تقنية النقل غير المتزامن لصفحات الويب، وهي طريقة للتواصل مع الخادم دون تحديث الصفحة بأكملها، أثناء انتظار نقل صفحة الويب، لا يزال بإمكان المستخدم التفاعل مع النظام، ويمكن للصفحة تحديث المحتوى دون تحديث. الاستخدام المعقول يمكن أن يسمح بأنه أفضل وأكثر ملاءمة للمستخدمين، ولكن لا تسيء استخدامه
متزامن وغير متزامن
يشير التزامن إلى طريقة الاتصال التي يرسل من خلالها المرسل البيانات وينتظر حتى يرسل المتلقي ردًا قبل إرسال حزمة البيانات التالية.
على سبيل المثال، المزامنة: إرسال الطلب -> انتظار معالجة الخادم -> العودة بعد المعالجة، خلال هذه الفترة، لا يمكن لمتصفح العميل القيام بأي شيء غير متزامن: بعد أن يرسل المرسل البيانات، لا ينتظر المتلقي لإرسالها مرة أخرى الاستجابة، ومن ثم يرسل طريقة الاتصال حزمة البيانات التالية
على سبيل المثال، غير متزامن: يتم تشغيل الطلب بواسطة حدث -> تمت معالجته بواسطة الخادم (لا يزال بإمكان المتصفح القيام بأشياء أخرى في هذا الوقت) -> تمت معالجته.
كائن مهم من AjaxXMLHttpRequest
كائن Javascript مهم، يمكن من خلاله تقديم الطلبات إلى الخادم من خلال Javascript. في حالة إجراء طلبات متعددة، تكون هناك حاجة إلى كائنات XHR متعددة. تتم معالجة نتيجة الطلب بطريقة محددة مسبقًا.
كيفية إنشاء كائن XmlHttpRequest
الدالة getXmlHttpRequest(){
var xmlHttpRequest = null;
إذا ((نوع XMLHttpRequest) != 'غير محدد') {
// غير المتصفح
xmlHttpRequest = new XMLHttpRequest();
}آخر {
// أي المتصفح
xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
}
إرجاع xmlHttpRequest;
}
أو
وظيفة createXmlHttpRequest(){
var xmlHttpRequest = null;
إذا (window.ActiveXObject) {
xmlHttpRequest = new AvtiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttpRequest = new XMLHttpRequest();
}
}
خصائص مهمة لكائن xmlHttpRequest.
ResponseXml: احصل على بيانات XML الخاصة باستجابة الخادم
الحالة: احصل على رمز الحالة الذي أعاده الخادم (مثل 200)
ReadyState: احصل على حالة الاتصال بين xmlHttpRequest والخادم (0، 1، 2، 3، 4، تصف الحالات المختلفة على التوالي).
(غير مهيأ): تم إنشاء الكائن، ولكن لم تتم تهيئته (لم يتم استدعاء الطريقة المفتوحة بعد)
(التهيئة): تم إنشاء الكائن ولم يتم استدعاء طريقة الإرسال بعد.
(إرسال البيانات): تم استدعاء طريقة الإرسال، لكن الحالة الحالية ورأس http غير معروفين
(جاري نقل البيانات): تم قبول البيانات الجزئية.
(نهاية الاستجابة): في هذه المرحلة، يمكن الحصول على البيانات من خلال ResponseText/responseXml.
مثال تطبيقي تم تنفيذه بواسطة شخص يستخدم Ajax
لقطة شاشة للنظام
وصف النظام:
مخطط هيكل النظام
عرض الصفحة الأولى Register.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<أتش تي أم أل>
<الرأس>
<title>تسجيل المستخدم</title>
<link href="css/regist.css" rel="stylesheet" type="text/css" />
<script src="js/regist_ajax.js" type="text/javascript"></script>
</الرأس>
<body onload="getRegistRuleTxt(),getCheckcode()">
<form action="regist.do" onsubmit="return check(this);">
<جدول حدود اللون = "رمادي" خلية الحشو = "6" محاذاة = "المركز">
<تر>
<td كولسبان = "2">
>> <font color="red">تسجيل المستخدم</font>
<font color="gray">[وصف الوحدة: التحقق من اسم المستخدم، شروط الخدمة تستخدم معالجة Ajax غير المتزامنة، إنشاء خادم رمز التحقق]</font>
</TD>
</tr>
<تر>
<td محاذاة = "يمين">
اسم المستخدم:
</TD>
<TD>
<نوع الإدخال = "نص" اسم = "اسم المستخدم" معرف = "اسم المستخدم" onblur = "postValidate ()"/>
<span style="color:orange" id="checkMsg" > * يتكون اسم المستخدم من أحرف وأرقام وشرطات سفلية.</span>
</TD>
</tr>
<تر>
<td محاذاة = "يمين">
كلمة المرور:
</TD>
<TD>
<نوع الإدخال = "كلمة المرور" الاسم = "كلمة المرور" معرف = "كلمة المرور">
<span style="color:orange" id="pwdMsg" > * طول كلمة المرور هو 6-8 أحرف. لأسباب تتعلق بالأمان، يجب تجنب التنسيقات الفريدة.</span>
</TD>
</tr>
<تر>
<td محاذاة = "يمين">
تأكيد كلمة المرور:
</TD>
<TD>
<نوع الإدخال = "كلمة المرور" name = "إعادة كلمة المرور" id = "إعادة كلمة المرور">
<span style="color:orange" id="repwdMsg" > * قم بتأكيد كلمة المرور للتأكد من أنك لم ترتكب أي خطأ عند تعيين كلمة المرور</span>
</TD>
</tr>
<تر>
<td محاذاة = "يمين">
بريد:
</TD>
<TD>
<نوع الإدخال = "نص" معرف = "البريد الإلكتروني" اسم = "البريد الإلكتروني">
<span style="color:orange" id="emailMsg" > * أدخل عنوان بريدك الإلكتروني المعتاد حتى نتمكن من الاتصال بك.</span>
</TD>
</tr>
<تر>
<td محاذاة = "يمين">
رمز التحقق:
</TD>
<TD>
<نوع الإدخال = "نص" معرف = "رمز التحقق">
<img id="ckcodeimage" src="imgsrc" style="border:solid #92CEDB 1px "> <!-- رمز التحقق-->
<a href="javascript:;" onclick="getCheckcode()">لا أستطيع الرؤية بوضوح، قم بتغيير واحدة أخرى</a>
<span style="color:orange" id="ckcodeMsg" > </span>
</TD>
</tr>
<تر>
<td محاذاة = "يمين">
شروط الخدمة:
</TD>
<TD>
<صفوف منطقة النص = "5" cols = "48" نمط = "الهامش السفلي: 6px؛ الهامش الأيسر: 5px؛ اللون: رمادي" readonly = "readonly" id = "item">
</textarea>
</TD>
</tr>
<تر>
<td محاذاة = "يمين">
</TD>
<TD>
<input type="submit" value="وافق على الشروط وقم بالتسجيل"/>
</TD>
</tr>
</الجدول>
<div محاذاة = "المركز">
حقوق الطبع والنشر (ج) 2013 محفوظة لـ Su Ruonian ( <a href="mailto:[email protected]">اتصل بنا:[email protected]</a> )
جميع الحقوق محفوظة.
</div>
</النموذج>
</الجسم>
</html>
/*
قم بإنشاء طريقة للحصول على كائن xmlHttpRequest
*/
الدالة getXmlHttpRequest(){
var xmlHttpRequest = null;
إذا ((نوع XMLHttpRequest) != 'غير محدد'){
/*المتصفحات غير التابعة لـ IE تنشئ كائنات XMLHttpRequest*/
xmlHttpRequest = new XMLHttpRequest();
}آخر{
/*يقوم متصفح IE بإنشاء كائن XMLHttpRequest*/
xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
}
إرجاع xmlHttpRequest;
}
/*
حدث الاستجابة لرمز التحقق
*/
الدالة getCheckcode(){
var codeimage = document.getElementById("ckcodeimage");
فار url = "checkcode.do";
codeimage.src=addTimestamp(url);
}
/*
استخدام Ajax للحصول على شروط الخدمة
*/
الدالة getRegistRuleTxt(){
var item = document.getElementById("item");
var url = "rulesText.do";
// حل مشكلة الترميز الصيني عند الإرسال في وضع الحصول. استخدم encodeURI(url).true للإشارة إلى أن الطلب يتم إرساله بشكل غير متزامن، ويمنع addTimestamp(url) التخزين المؤقت للمتصفح.
xmlHttpRequest.open("post",encodeURI(url),true);
xmlHttpRequest.setRequestHeader("Content-Type"،"application/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=function(){
إذا (xmlHttpRequest.readyState == 4){
إذا (xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
item.value=respText;
}آخر{
// خطأ في النظام.
item.value = "خطأ في النظام"؛
}
}آخر{
//فحص العرض...
item.value="loading...";
}
};
xmlHttpRequest.send(null);
}
/*
استخدم طريقة get للتحقق
*/
الدالة getValidate(){
فار اسم المستخدم = document.getElementById("username");
var url = "validatename.do?username=" + username.value;
// حل مشكلة الترميز الصيني عند الإرسال في وضع الحصول. استخدم encodeURI(url).true للإشارة إلى أن الطلب يتم إرساله بشكل غير متزامن، ويمنع addTimestamp(url) التخزين المؤقت للمتصفح.
xmlHttpRequest.open("get",encodeURI(addTimestamp(url)),true);
// اتصل بالطريقة للتحقق من حالة الإرجاع
xmlHttpRequest.onreadystatechange=callback;
xmlHttpRequest.send(null);
}
/*
استخدم طريقة النشر للتحقق
*/
وظيفة ما بعد التحقق من الصحة () {
فار اسم المستخدم = document.getElementById("username");
var url = "validatename.do";
// صحيح يعني استخدام طريقة غير متزامنة لإرسال الطلب. الإعداد الافتراضي هو صحيح، ويمكن الحصول على طريقة الطلب ونشرها ووضعها وحذفها
xmlHttpRequest.open('post',url,true);
xmlHttpRequest.setRequestHeader("Content-Type"،"application/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=callback;
// إذا كانت هناك معلمات متعددة، استخدم الرمز & لربط أزواج القيمة الرئيسية، ويتم استخدام الهروب لحل المشكلات الصينية
xmlHttpRequest.send('username=' + escape(username.value));
}
/*
طريقة إرجاع حالة المراقبة
*/
رد اتصال الوظيفة () {
إذا (xmlHttpRequest.readyState == 4){
إذا (xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
الداخليHtmlMsg(respText);
}آخر{
// خطأ في النظام.
الداخليHtmlMsg("خطأ");
}
}آخر{
//فحص العرض...
الداخليHtmlMsg("التحقق");
}
}
/*
أضف طابعًا زمنيًا لمنع التخزين المؤقت للمتصفح، حيث يقوم التخزين المؤقت للمتصفح فقط بتخزين طريقة الحصول.
*/
وظيفة addTimestamp(url){
إذا (url.indexOf("؟")!=-1){
//إذا كانت هناك معلمات
return url+"×tamp=" + new Date().valueOf();
}آخر{
// لا توجد معلمات
return url+"?timestamp=" + new Date().valueOf();
}
}
الوظيفة الداخليةHtmlMsg(رسالة){
var checkMsg = document.getElementById("checkMsg");
إذا (الرسالة=='موجود'){
// اسم المستخدم موجود
checkMsg.innerHTML= "<font color='red'>* عذرًا، اسم المستخدم موجود بالفعل.</font>";
}
إذا (الرسالة=='غير موجود'){
//يمكن استخدام اسم المستخدم
checkMsg.innerHTML= "<font color='green'>* تهانينا، اسم المستخدم متاح.</font>";
}
إذا (رسالة=='التحقق'){
// فحص النظام
checkMsg.innerHTML= "<font color='#0099aa'>* يقوم النظام بالتحقق من البيانات...</font>";
}
إذا (رسالة=='خطأ'){
// خطأ في النظام
checkMsg.innerHTML= "<font color='red'>فشل النظام، يرجى التحقق من الشبكة، أو <a href='#'>اتصل بنا</a></font>";
}
}
} /* تحديد العرض العام ونمط الحدود للجدول، وتحديد نمط كل النص في الجدول */
.غادر{
وزن الخط: 500؛
اللون:#708899;
الحشو الأيمن: 20 بكسل؛
لون الخلفية: #D6ECF5؛
}
.إنبت {
الحدود: الصلبة #92CEDB 1px؛
العرض: 210 بكسل؛
الارتفاع: 22 بكسل؛
الهامش الأيسر: 10 بكسل؛
}
.رغس{
الهامش العلوي: 20 بكسل؛
اللون:#708899;
حجم الخط: 12 بكسل؛
}
<سيرفيليت>
<servlet-name>UserServlet</servlet-name>
<servlet-class>com.webapp.servlet.UserServlet</servlet-class>
<init-param>
<param-name>مسار ملف القواعد</param-name>
<param-value>/txt/item.txt</param-value>
</init-param>
</سيرفلت>
<رسم الخرائط servlet>
<servlet-name>UserServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<قائمة ملفات الترحيب>
<welcome-file>regist.jsp</welcome-file>
</welcome-file-list>
</web-app>
import java.awt.Color;
import java.awt.Font;
استيراد java.awt.Graphics؛
import java.awt.image.BufferedImage;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;
/**
*
* @الإصدار: 1.1
*
*@author: Su Ruonian<a href="mailto:[email protected]">أرسل بريدًا إلكترونيًا</a>
*
*@منذ: 1.0 وقت الإنشاء: 2013-1-20 04:26:52 مساءً
*
* @function: TODO
*
*/
الطبقة العامة CheckCodeImageUtil {
سلسلة نهائية ثابتة خاصة[] chars = { "0"، "1"، "2"، "3"، "4"، "5"، "6"،
"7"، "8"، "9"، "أ"، "ب"، "ج"، "د"، "ه"، "و"، "ز"، "ح"، "أنا" }؛
Private static Final int SIZE = 4; // عدد الأحرف في رمز التحقق
نهائي ثابت خاص LINES = 4؛ // عدد خطوط التداخل
Private static Final int WIDTH = 110; // عرض صورة رمز التحقق
Private static Final int HEIGHT = 40; // ارتفاع صورة رمز التحقق
Private static Final int FONT_SIZE = 21; // حجم الخط في رمز التحقق
/**
* توليد رمز التحقق
*
* @return Map<قيمة رمز التحقق، صورة رمز التحقق>
*
*/
الخريطة الثابتة العامة <String,BufferedImage> creatCheckImage(){
// احفظ السلسلة التي تنشئ القيمة الحقيقية لرمز التحقق
StringBuffer buffer = new StringBuffer();
// كائن صورة مخصص
BufferedImage image = new BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_RGB);
Map<String,BufferedImage> Map = new HashMap<String,BufferedImage>();
الرسومات الرسومية = image.getGraphics();
graphics.setColor(Color.WHITE);
graphics.fillRect(0, 0, WIDTH, HEIGHT);
عشوائي عشوائي = عشوائي جديد ()؛
// ارسم أحرفًا عشوائية
ل(int i=0;i<SIZE;i++){
// احصل على عنصر من مجموعة الأحرف المحددة
int rand = Random.nextInt(chars.length);
graphics.setColor(randomColor());
graphics.setFont(new Font(null,Font.BOLD+Font.ITALIC,FONT_SIZE));
graphics.drawString(chars[rand],(i)*WIDTH/SIZE+8, HEIGHT/2+10);
buffer.append(chars[rand]); // احفظ السلسلة التي تم إنشاؤها في المخزن المؤقت واستخدمها للمقارنة مع القيمة التي أدخلها المستخدم عند الحصول عليها في المستقبل.
}
// ارسم خطوط التداخل
ل(int i=1;i<=LINES;i++){
graphics.setColor(randomColor());
graphics.drawLine(random.nextInt(WIDTH), Random.nextInt(HEIGHT), Random.nextInt(WIDTH),random.nextInt(HEIGHT));
إذا (ط == خطوط) {
graphics.setFont(new Font(null,Font.ITALIC,13));
graphics.setColor(Color.GRAY);
graphics.drawString("Su Ruonian Studio"، 5,15);
}
}
Map.put(buffer.toString(), image);
خريطة العودة؛
}
/**
* سيتم إنشاء اللون على الفور
* @يعود
*/
اللون الثابت العام لون عشوائي () {
عشوائي عشوائي = عشوائي جديد ()؛
لون اللون = لون جديد (random.nextInt(256)،random.nextInt(256)،random.nextInt(256));
لون العودة
}
}
import java.awt.image.BufferedImage;
import java.io.BufferedReader;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
استيراد java.io.File؛
استيراد java.io.FileReader؛
import java.io.FileWriter;
import java.io.IOException;
استيراد java.io.InputStream؛
import java.io.PrintWriter;
import java.util.List;
import java.util.Map;
import java.util.Vector;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;
import com.sun.imageio.plugins.common.ImageUtil;
import com.webapp.util.CheckCodeImageUtil;
الطبقة العامة UserServlet تمتد HttpServlet {
قائمة خاصة <سلسلة> قائمة المستخدمين؛
سلسلة خاصة txtFilePath = فارغة؛
init الفراغ العام () يلقي ServletException {
txtFilePath = this.getInitParameter("rulesfilepath");
// محاكاة قاعدة البيانات
userList = new Vector<String>();
userList.add("zhangsan");
userList.add("lisi");
userList.add("wangwu");
userList.add("zhaoliu");
}
doGet الفراغ العام (طلب HttpServletRequest، استجابة HttpServletResponse)
يلقي ServletException، IOException {
doPost(request, Response);
}
doPost باطلة عامة (طلب HttpServletRequest، استجابة HttpServletResponse)
يلقي ServletException، IOException {
String uri = request.getRequestURI();
مسار السلسلة = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
إذا (path.equals("/validatename")){
request.setCharacterEncoding("utf-8");
Response.setContentType("text/html;charset=utf-8");
يحاول {
Thread.sleep(3000);
} قبض على (InterruptedException e) {
printStackTrace();
}
// يقوم نظام المحاكاة بإنشاء اختبار الاستثناء
/*إذا(1==2){
طرح ServletException جديد ("بعض الأخطاء")؛
}*/
اسم مستخدم السلسلة = request.getParameter("اسم المستخدم");
System.out.println("اسم المستخدم:" + اسم المستخدم);
// محاكاة استعلام بيانات المستخدم
وجود منطقي = userList.contains(username);
إذا (موجود){
Response.getWriter().print("موجود");
}آخر{
Response.getWriter().print("noexists");
}
}
إذا (path.equals("/rulesText")){
request.setCharacterEncoding("utf-8");
Response.setContentType("text/html;charset=utf-8");
String filePath = this.getServletContext().getRealPath(txtFilePath);
ملف الملف = ملف جديد(filePath);
StringBuffer buffer = new StringBuffer();
يحاول {
BufferedReader Reader = new BufferedReader(new FileReader(file));
سلسلة تمب = ""؛
while((tmp = Reader.readLine())!=null){
buffer.append(new String(tmp.getBytes("gbk"),"utf8")).append("/n");
}
Reader.Close();
} قبض (الاستثناء ه) {
printStackTrace();
}
إذا (buffer.toString().trim()!=null){
Response.getWriter().print(buffer.toString());
}
}
إذا (path.equals("/checkcode")){
Response.setContentType("image/jpeg");
Map<String, BufferedImage> Map = CheckCodeImageUtil.creatCheckImage();
مفتاح السلسلة = (سلسلة)map.keySet().iterator().next();
request.getSession().setAttribute("code",key);
System.out.println("checkcode = " + request.getSession().getAttribute("code"));
صورة BufferedImage = Map.get(key);
ImageIO.write(image, "jpeg",response.getOutputStream());
}
}
}