제가 제시한 예는 기업 사용자가 등록할 때 사용자 이름과 기업 이름이 유효한지 확인하는 애플리케이션입니다. 이전 방법은 옆에 버튼을 추가하고 "확인"을 클릭하여 요청을 보내는 것이었습니다. 서버에 전송한 다음 잠시만 기다려 주세요. 서버가 정보를 반환하고 작업을 계속합니다.
AJAX 기술을 사용하여 위 작업을 구현하면 서버가 정보를 반환할 때까지 기다릴 필요가 없습니다. 사용자가 사용자 이름이나 회사 이름을 입력할 때 입력 텍스트 상자가 포커스를 잃으면 요청이 자동으로 전송됩니다. 서버에서 사용자는 다음 작업을 계속 수행하므로 "확인"을 클릭하거나 서버가 정보를 반환할 때까지 기다릴 필요가 없습니다. 확인과 사용자 작업은 동시에 수행될 수 있습니다. 서버 정보가 반환되면 페이지를 새로 고치지 않고도 반환된 정보가 페이지의 해당 위치에 자동으로 표시됩니다. 이는 부분 새로 고침 효과와 같습니다. 아래 코드를 살펴보겠습니다.
HTML 페이지의 전체 코드는 다음과 같습니다.
다음은 인용된 부분입니다.
1< %@page 언어="java" contentType="text/html;charset=GBK"%>
2<스크립트 언어="javascript" type="text/javascript">
3<!--
4/**//**Alpha 2005-12-31에 의해 시작된 Ajax*/
5
6 var http = getHTTPObject();
7
8 함수 handlerHttpResponse(){
9 if(http.readyState == 4){
10 if(http.status == 200){
11 var 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 warning("요청하신 페이지는 비정상입니다. 이는 이 페이지의 정보 검색에 영향을 미칠 수 있습니다!");
24 경고(http.status);
25}
26}
27}
28
29 함수 handlerHttpResponse1(){
30 if(http.readyState == 4){
31 if(http.status == 200){
32 var 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 warning("요청하신 페이지는 비정상입니다. 이는 이 페이지의 정보 검색에 영향을 미칠 수 있습니다!");
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 = 핸들HttpResponse;
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 = 핸들HttpResponse1;
65 http.send(널);
66 반환;
67 }
68
69 //이 함수는 우리에게 필요한 XMLHttpRequest 객체를 생성할 수 있습니다
70 함수 getHTTPObject(){
71 var xmlhttp = false;
72 if(window.XMLHttpRequest){
73 xmlhttp = 새로운 XMLHttpRequest();
74 if(xmlhttp.overrideMimeType){
75 xmlhttp.overrideMimeType('text/xml');
76 }
77 }
그 외 78개{
79 시도하다
80 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
81 }잡기(e){
82 시도{
83 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
84 }잡기(E){
85 xmlhttp = 거짓;
86}
87 }
88}
89 xmlhttp를 반환;
90}
91/**//**Ajax가 종료됩니다*/
92
93//탐지 양식
94기능 chkpassword()
95{
96 var 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("password").style.Background= "#FF0000";
101 document.getElementById("passwordStr").innerText = "죄송합니다. 비밀번호는 영문, 숫자, 밑줄이어야 하며 길이는 5~20자여야 합니다!";
102 }
그 외 103개
104 {
105 document.getElementById("password").style.Background= "#FFFFFF";
106 document.getElementById("passwordStr").style.display = "none";
107 }
108}
109
110기능 chkconfirmPassword()
111{
112 var 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 var 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자입니다.");
138m.password.focus();
139는 거짓을 반환합니다.
140 }
141 if (m.password.value != m.confirmPassword.value)
142 {
143 Alert("죄송합니다. 비밀번호가 반복된 비밀번호와 일치하지 않습니다!");
144 m.confirmPassword.focus();
145 거짓을 반환;
146 }
147 만약(m.comNm.value.length==0)
148 {
149 Alert("죄송합니다. 회사명은 비워둘 수 없습니다!!");
150m.comNm.focus();
151 거짓을 반환;
152 }
153m.제출();
154}
155
156//-->
157</스크립트>
158<본문 상단마진="0">
159<form name="form1" method="post" action="/Control?act=등록">
160<테이블 너비="100%">
161 <tr><td align="center"> <H2>Ajax 데모 프로그램</H1></td></tr>
162 <tr><td align="center"> ------ Alpha에 의한 기업 등록</td></tr>
163</테이블>
164
165<HR>
166 ＜테이블 너비="400" border="0" cellpadding="1" cellpacing="1" align="center" >
167 〈tr〉
168 <td><font color="red">*</font></td>
169 <td>사용자 계정:</td>
170 <td>
171 ＜입력 유형="텍스트" 이름="사용자 이름" maxlength="20" 스타일="배경:#FFFFFF" onBlur="chkUser()" value=""/>
172 <div id="showStr" style="배경색:#FF9900;display:none"></div>
173 〈/td〉
174 </tr>
175 〈tr〉
176 <td><font color="red">*</font></td>
177 <td>회사명:</td>
178<td>
179 ＜입력 유형="텍스트" 이름="comNm" maxlength="100" 스타일="배경:#FFFFFF" onBlur="chkComNm()" value=""/>
180 <div id="comNmStr" style="배경색:#FF9900;display:none"></div>
181
182 〈/td〉
183 </tr>
184 〈tr〉
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="배경색:#FF9900;display:none"></div>
189 〈/td〉
190 </tr>
191 〈tr〉
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="배경색:#FF9900;display:none"></div>
196 〈/td〉
197 </tr>
198 </테이블>
199
200 <div 정렬="중앙">
201 <input type="button" name="ok" value=" OK" onclick="checkfield()">
202
203 ＜입력 유형="재설정" 이름="재설정" 값="취소">
204 </div>
205
206＜/형식＞
207</본문>
208</html>
JavaScript를 사용하여 XmlHttpRequest 클래스를 만듭니다. 서버에 HTTP 요청을 보낸 후 다음 단계는 서버로부터 응답을 받은 후 수행해야 할 작업을 결정하는 것입니다. 이를 위해서는 응답을 처리하는 데 사용할 JavaScript 함수를 HTTP 요청 개체에 알려야 합니다.
다음과 같이 객체의 onreadystatechange 속성을 사용할 JavaScript 함수의 이름으로 설정할 수 있습니다.
onreadystatechange 이후에 생성됩니다.
request.open()을 호출합니다. 이는 첫 번째 매개변수로 HTTP 동사(GET 또는 POST)를 사용하고 두 번째 매개변수로 데이터 공급자의 URL을 사용하여 서버와 소켓 채널을 엽니다. request.open()의 마지막 매개변수는 true로 설정됩니다. 이는 요청의 비동기 특성을 나타냅니다. 요청이 아직 제출되지 않았습니다. request.send()를 호출하면 제출이 시작됩니다. 이는 POST에 필요한 페이로드를 제공합니다. 비동기식 요청을 사용하는 경우 request.onreadystatechanged 속성을 사용하여 요청의 콜백 함수를 할당해야 합니다. (요청이 동기식이라면 request.send 호출 직후에 결과를 처리할 수 있어야 하지만, 요청이 완료될 때까지 사용자를 차단할 수도 있습니다.)
데이터 공급자 URL을 보면 url = "/chkUserAndCom" , 서블릿은 다음과 같습니다.
다음은 참조 조각입니다.
1/**//*
2 * 작성일자: 2005-12-31
3*
4 * TODO 이 생성된 파일의 템플릿을 변경하려면 다음으로 이동하세요.
5 * 창 - 환경 설정 - Java - 코드 스타일 - 코드 템플릿
6*/
7패키지 com.event;
8
9가져오기 javax.servlet.ServletException;
10import javax.servlet.http.HttpServletRequest;
11import javax.servlet.http.HttpServletResponse;
12
13import com.beans.EBaseInfo;
14
15/** *//**
16 * @author 알파 2005-12-31
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 정보=새로운 EComBaseInfo();
30 문자열 oprate=request.getParameter("oprate")).trim();
31 문자열 userName=request.getParameter("userName");
32 문자열 passWord=request.getParameter("비밀번호");
33 문자열 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 만약(bTmp)
48 msgStr = "죄송합니다. 이 사용자 이름은 이미 존재합니다. 등록하려면 사용자 이름을 변경하십시오!";
그 외 49개
50 msgStr="";
51 }
52 response.getWriter().write(msgStr);
53}
54 else 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 if(bTmp)
65 msgStr = "죄송합니다. 해당 회사명은 이미 존재합니다. 등록하려면 회사명을 변경하십시오!";
그 외 66개
67 msgStr="";
68 }
69 response.getWriter().write(msgStr);
70
71 }
72 }
73 catch(예외예외)
74 {
75 }
드디어 76화
77 {
78 request.setAttribute("url",url);
79 }
80}
81
82 보호 무효 doPost(HttpServletRequest 요청,HttpServletResponse 응답)
83번은 ServletException을 발생시킵니다.
84 {
85 doGet(요청,응답);
86}
87}
88
AJAX 기술 요약
1. AJAX(Asynchronous JavaScript and Xml)는 Java 기술, Xml 및 JavaScript를 결합한 프로그래밍 기술로, Java 기술을 기반으로 웹 애플리케이션을 구축할 수 있도록 하며 페이지 재로딩 사용 관례를 깨뜨립니다.
2. AJAX(Asynchronous JavaScript and 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"의 "A"입니다.
AJAX 기술을 잘 활용하면 웹페이지에 친근한 효과가 많이 추가되고 사용자에게 더 나은 느낌을 줄 수 있을 것입니다. AJAX는 좋은 것입니다.