Пример, который я привел, — это приложение, когда регистрируется корпоративный пользователь. Когда пользователь регистрируется, он проверяет, доступны ли имя пользователя и корпоративное имя. Предыдущий метод заключался в том, чтобы добавить кнопку рядом с ним, нажать «Проверить», отправить запрос. на сервер, а затем Подождите... сервер вернет информацию и продолжит операцию.
Если мы используем технологию AJAX для реализации вышеуказанных операций, нам не нужно ждать, пока сервер вернет информацию. Когда пользователь вводит имя пользователя или название компании, когда текстовое поле ввода теряет фокус, запрос будет автоматически отправлен. сервер, а пользователь продолжит выполнять следующие операции, нет необходимости нажимать «Проверить» или ждать, пока сервер вернет информацию. Проверка и пользовательская операция являются асинхронными и могут выполняться одновременно. Когда информация о сервере возвращается, возвращенная информация будет автоматически отображаться в соответствующем месте на странице без обновления страницы, что эквивалентно эффекту частичного обновления. Давайте посмотрим на код ниже.
Полный код HTML-страницы выглядит следующим образом:
Ниже приведен фрагмент в кавычках:
1＜ %@page Language="java" contentType="text/html;charset=GBK"%＞
2＜язык сценариев="javascript" type="text/javascript">
3＜!--
4/**//**Ajax запущен Alpha 31 декабря 2005 г.*/
5
6 вар http = getHTTPObject();
7
8 функция handleHttpResponse(){
9, если (http.readyState == 4) {
10, если(http.status == 200){
11 вар xmlDocument = http.responseXML;
12 if(http.responseText!=""){
13 document.getElementById("showStr").style.display = "";
14 document.getElementById("userName").style.background= "#FF0000";
15 document.getElementById("showStr").innerText = http.responseText;
16 }еще{
17 document.getElementById("userName").style.background= "#FFFFFF";
18 document.getElementById("showStr").style.display = "none";
19}
20
двадцать один }
еще 22{
23 alert("Запрошенная вами страница является ненормальной, что может повлиять на просмотр информации на этой странице!");
24 оповещения (http.status);
25}
26}
27}
28
29 функция handleHttpResponse1(){
30 если(http.readyState == 4){
31 если(http.status == 200){
32 вар xmlDocument = http.responseXML;
33 if(http.responseText!=""){
34 document.getElementById("comNmStr").style.display = "";
35 document.getElementById("comNm").style.background="#FF0000";
36 document.getElementById("comNmStr").innerText = http.responseText;
37 }еще{
38 document.getElementById("comNm").style.background= "#FFFFFF";
39 document.getElementById("comNmStr").style.display = "none";
40}
41
42 }
еще 43{
44 alert("Запрошенная вами страница является ненормальной, что может повлиять на просмотр информации на этой странице!");
45 оповещение (http.status);
46 }
47 }
48 }
49
50 функция chkUser(){
51 var url = "/chkUserAndCom";
52 var name = document.getElementById("userName").value;
53 URL += ("&userName="+name+"&oprate=chkUser");
54 http.open("GET",url,true);
55 http.onreadystatechange = handleHttpResponse;
56 http.send(ноль);
57 возврат;
58 }
59 функция chkComNm(){
60 var url = "/chkUserAndCom";
61 var name = document.getElementById("comNm").value;
62 URL += ("&comName="+name+"&oprate=chkCom");
63 http.open("GET",url,true);
64 http.onreadystatechange = handleHttpResponse1;
65 http.send(ноль);
66 возврат;
67 }
68
69 //Эта функция может создать нужный нам объект XMLHttpRequest
70 функция getHTTPObject(){
71 вар xmlhttp = ложь;
72 если(окно.XMLHttpRequest){
73 xmlhttp = новый XMLHttpRequest();
74 если(xmlhttp.overrideMimeType){
75 xmlhttp.overrideMimeType('text/xml');
76 }
77 }
еще 78{
79 попыток{
80 xmlhttp = новый ActiveXObject("Msxml2.XMLHTTP");
81 }поймать(е){
82 попытка{
83 xmlhttp = новый ActiveXObject("Microsoft.XMLHTTP");
84 }поймать(Е){
85 xmlhttp = ложь;
86}
87 }
88}
89 вернуть xmlhttp;
90}
91/**//**Аякс завершает игру*/
92
93//Форма обнаружения
94функция chkpassword()
95{
96 вар m=document.form1;
97 if(len(m.password.value) ＞ 20 || len(m.password.value) ＜ 5 || !isStr(m.password.value))
98 {
99 document.getElementById("passwordStr").style.display = "";
100 document.getElementById("пароль").style.background= "#FF0000";
101 document.getElementById("passwordStr").innerText = "Извините, пароль должен состоять из английских букв, цифр или знаков подчеркивания, а длина — 5–20!";
102 }
еще 103
104 {
105 document.getElementById("пароль").style.background= "#FFFFFF";
106 document.getElementById("passwordStr").style.display = "none";
107 }
108}
109
110функция chkconfirmPassword()
111{
112 вар m=document.form1;
113 if (m.password.value != m.confirmPassword.value)
114 {
115 document.getElementById("confirmPasswordStr").style.display = "";
116 document.getElementById("confirmPassword").style.background= "#FF0000";
117 document.getElementById("confirmPasswordStr").innerText = "К сожалению, пароль не соответствует повторяющемуся паролю!";
118 }
еще 119
120 {
121 document.getElementById("confirmPassword").style.background= "#FFFFFF";
122 document.getElementById("confirmPasswordStr").style.display = "none";
123 }
124}
125
126 контрольное поле функции()
127{
128 вар m=document.form1;
129 if(m.userName.value.length==0)
130 {
131 alert("Извините, имя пользователя должно состоять из английских букв, цифр или знаков подчеркивания, а длина — от 5 до 20.");
132 m.userName.focus();
133 вернуть ложь;
134}
135 if(m.password.value.length==0)
136 {
137 alert("К сожалению, пароль должен состоять из английских букв, цифр или символов подчеркивания, а длина — от 5 до 20.");
138 m.password.focus();
139 вернуть ложь;
140 }
141 if (m.password.value != m.confirmPassword.value)
142 {
143 alert("К сожалению, пароль не соответствует повторенному паролю!");
144 m.confirmPassword.focus();
145 вернуть ложь;
146 }
147 if(m.comNm.value.length==0)
148 {
149 alert("К сожалению, название компании не может быть пустым!!");
150 м.комНм.фокус();
151 вернуть ложь;
152 }
153 м.submit();
154}
155
156//-->
157＜/скрипт＞
158＜верхнее поле тела="0">
159＜имя формы="form1" метод="post" action="/Control?act=Register"＞
160＜ширина таблицы="100%">
161 ＜tr＞＜td align="center"＞ ＜H2＞Демонстрационная программа Ajax＜/H1＞＜/td＞＜/tr＞
162 ＜tr＞＜td align="center"＞ ------ Регистрация предприятия по Alpha＜/td＞＜/tr＞
163＜/таблица＞
164
165＜ЧСС＞
166 ＜ширина таблицы="400" border="0" cellpadding="1" cellpacing="1" align="center" ＞
167 ＜тр＞
168 ＜td＞＜font color="red"＞*＜/font＞＜/td＞
169 ＜td＞Учетная запись пользователя:＜/td＞
170 ＜тд＞
171 ＜input type="text" name="userName" maxlength="20" style="background:#FFFFFF" onBlur="chkUser()" value=""/＞
172 ＜div id="showStr" style="background-color:#FF9900;display:none"＞＜/div＞
173 ＜/тд＞
174 ＜/тр＞
175 ＜тр＞
176 ＜td＞＜font color="red"＞*＜/font＞＜/td＞
177 ＜td＞Название компании:＜/td＞
178＜тд＞
179 ＜input type="text" name="comNm" maxlength="100" style="background:#FFFFFF" onBlur="chkComNm()" value=""/＞
180 ＜div id="comNmStr" style="background-color:#FF9900;display:none"＞＜/div＞
181
182 ＜/тд＞
183 ＜/тр＞
184 ＜тр＞
185 ＜td＞＜font color="red"＞*＜/font＞＜/td＞
186 ＜td＞Пароль пользователя: ＜/td＞
187 ＜td＞＜input type="password" name="password" maxlength="20" style="background:#FFFFFF" onBlur="chkpassword()"/＞
188 ＜div id="passwordStr" style="background-color:#FF9900;display:none"＞＜/div＞
189 ＜/тд＞
190 ＜/тр＞
191 ＜тр＞
192 ＜td＞＜font color="red"＞*＜/font＞＜/td＞
193 ＜td＞Подтвердите пароль: ＜/td＞
194 ＜td＞＜input type="password" name="confirmPassword" maxlength="20" style="background:#FFFFFF" onBlur="chkconfirmPassword()"/＞
195 ＜div id="confirmPasswordStr" style="background-color:#FF9900;display:none"＞＜/div＞
196 ＜/тд＞
197 ＜/тр＞
198 ＜/таблица＞
199
200 <div align="center">
201 <input type="button" name="ok" value="OK" onclick="checkfield()">
202
203 ＜тип ввода="сброс" имя="сброс" значение="Отмена"＞
204 ＜/дел＞
205
206＜/форма＞
207＜/тело＞
208＜/html＞
Используйте JavaScript для создания класса XmlHttpRequest. После отправки HTTP-запроса на сервер следующим шагом будет принятие решения о том, что необходимо сделать после получения ответа от сервера. Для этого необходимо сообщить объекту HTTP-запроса, какую функцию JavaScript использовать для обработки ответа.
Вы можете установить атрибут onreadystatechange объекта наимя
используемой функции JavaScript следующим образом:
Создано после onreadystatechange.Мы вызываем request.open() — он открывает канал сокета с сервером, используя команду HTTP (GET или POST) в качестве первого параметра и URL-адрес поставщика данных в качестве второго параметра. Последний параметр request.open() имеет значение true — это указывает на асинхронный характер запроса. Обратите внимание, что запрос еще не был отправлен. С вызова request.send() начинается отправка — это обеспечивает всю необходимую полезную нагрузку для POST. При использовании асинхронных запросов мы должны использовать свойство request.onreadystatechanged, чтобы назначить функцию обратного вызова запроса. (Если запрос синхронный, мы сможем обработать результаты сразу после вызова request.send, но мы также можем заблокировать пользователя до тех пор, пока запрос не будет завершен.)
Глядя на URL-адрес поставщика данных, url = "/chkUserAndCom" , сервлет выглядит следующим образом:
Ниже приведен ссылочный фрагмент:
1/**//*
2 * Создано 31 декабря 2005 г.
3*
4 * TODO Чтобы изменить шаблон для этого сгенерированного файла, перейдите в раздел
5 * Окно — Настройки — Java — Стиль кода — Шаблоны кода
6*/
7пакет com.event;
8
9импортировать javax.servlet.ServletException;
10импортировать javax.servlet.http.HttpServletRequest;
11импортировать javax.servlet.http.HttpServletResponse;
12
13импортировать com.beans.EBaseInfo;
14
15/** *//**
16 * @author Альфа 31 декабря 2005 г.
17*
18 * ＜P＞Демонстрация Ajax --- Проверка имени пользователя и названия предприятия во время регистрации предприятия＜/P＞
19*
20 * TODO Чтобы изменить шаблон для этого сгенерированного комментария типа, перейдите по ссылке
21 * Окно — Настройки — Java — Стиль кода — Шаблоны кода
двадцать два */
23публичный класс CheckUserAndComNm {
24 частная строка msgStr = "";
25 protected void doGet (запрос HttpServletRequest, ответ HttpServletResponse)
26 выдает ServletException
27 {
28
29 EComBaseInfo info = новый EComBaseInfo();
30 String oprate=request.getParameter("oprate")).trim();
31 String userName=request.getParameter("userName");
32 String passWord=request.getParameter("пароль");
33 String comName=request.getParameter("comName");
34
35 попыток
36 {
37 if(oprate.equals("chkUser"))
38 {
39 response.setContentType("text/html;charset=GB2312");
40 if(userName.length()<5||userName.length()>20)
41 {
42 msgStr = "Извините, имя пользователя должно состоять из букв, цифр или символов подчеркивания, а длина — 5-20 символов!";
43}
еще 44
45 {
46 boolean bTmp=info.findUser(userName); //Проверяем, существует ли имя пользователя в базе данных
47 если(бТмп)
48 msgStr = "К сожалению, это имя пользователя уже существует, пожалуйста, измените имя пользователя, чтобы зарегистрироваться!";
еще 49
50 мсгСтр ="";
51 }
52 ответ.getWriter().write(msgStr);
53}
54 иначе if(oprate.equals("chkCom"))
55 {
56 response.setContentType("text/html;charset=GB2312");
57 if(comName.length()<6||comName.length()>100)
58 {
59 msgStr = "К сожалению, длина названия компании составляет 6–100 символов (без учета пробелов внутри символов)!";
60 }
еще 61
62 {
63 boolean bTmp=info.findCom(comName); //проверяем, существует ли название компании в базе данных;
64 если(бТмп)
65 msgStr = "К сожалению, это название компании уже существует. Пожалуйста, измените название компании, чтобы зарегистрироваться!";
еще 66
67 msgStr ="";
68 }
69 ответ.getWriter().write(msgStr);
70
71 }
72 }
73 улова (исключение ex)
74 {
75 }
76 наконец
77 {
78 request.setAttribute("url",url);
79 }
80}
81
82 protected void doPost (запрос HttpServletRequest, ответ HttpServletResponse)
83 выдает ServletException
84 {
85 doGet(запрос,ответ);
86}
87}
88
Краткое описание технологии AJAX
1. AJAX (асинхронный JavaScript и Xml) — это технология программирования, сочетающая в себе технологию Java, Xml и JavaScript. Она позволяет создавать веб-приложения на основе технологии Java и нарушает правила использования перезагрузки страниц.
2. AJAX, асинхронный JavaScript и Xml, — это метод разработки веб-приложений, который использует клиентские сценарии для обмена данными с веб-сервером. Таким образом, веб-страницу можно будет динамически обновлять, не прерывая процесс взаимодействия и не осуществляя его повторное редактирование. Используя AJAX, вы можете создать прямой, высокодоступный, богатый и динамичный веб-интерфейс пользователя, близкий к собственным настольным приложениям.
3. Для Mozilla.Netscape, Safari, Firefox и других браузеров метод создания XmlHttpRequest следующий:
Xmlhttp_request=
new XmlHttpRequest();
4. IE и другие браузеры для создания XmlHttpRequest следующим образом:
ActiveXObject("Microsoft.XmlHTTP") ;5. Xmlhttp_request.open('GET', URL, true); Xmlhttp_request.send(null);
6. Первый параметр open() — это метод HTTP-запроса — GET, POST или любой другой метод, который поддерживает ваш сервер. Согласно спецификации HTTP, этот параметр пишется с заглавной буквы; в противном случае некоторые браузеры (например, Firefox) не смогут обработать запрос. Второй параметр — URL запрашиваемой страницы. Третий параметр определяет, находится ли запрос в асинхронном режиме. Если TRUE, функция JavaScript продолжит выполнение, не дожидаясь ответа от сервера. Это буква «А» в «AJAX».
Если технология AJAX используется правильно, она добавит к нашим веб-страницам множество приятных эффектов и улучшит восприятие пользователями. AJAX — это хорошо.