Ajax(asynchronousjavascriptandxml) 비동기 javascript 및 xml.
이는 기존 웹 애플리케이션의 "요청 보내기-응답 대기" 모델의 단점을 해결하기 위한 것입니다. (요청을 보낸 후 브라우저는 서버의 응답만 기다릴 수 있습니다. 사용자는 다른 작업을 수행할 수 없습니다. 브라우저가 보낸 후에는 요청하면 전체 페이지를 버리고 서버가 새 페이지를 반환할 때까지 기다립니다. 즉, 브라우저와 서버 간에 상호 작용하는 데이터의 양이 매우 커서 요청 시 데이터를 얻을 수 없습니다.) 즉, 브라우저에 내장된 개체(XmlHttpRequest)를 통해 비동기적으로 서버에 요청을 보냅니다.
소위 비동기식은 브라우저가 전체 페이지를 포기하지 않는다는 것을 의미합니다. 즉, 서버가 요청을 처리한 후 데이터를 XmlHttpRequest 객체에 반환하고 데이터를 서버에 보내지 않습니다. XmlHttpRequest는 javascript를 통해 얻을 수 있습니다. 그런 다음 이 데이터를 사용하여 전체 프로세스 동안 사용자는 서버의 응답을 기다릴 필요가 없습니다.
설명: 웹 페이지의 비동기 전송 기술로, 전체 페이지를 새로 고치지 않고 서버와 통신하는 방법으로, 웹 페이지의 전송을 기다리는 동안에도 사용자는 시스템과 상호 작용할 수 있으며, 페이지는 새로 고치지 않고도 콘텐츠를 업데이트할 수 있습니다. . 합리적으로 사용하면 사용자에게 더 좋고 편리하다고 느낄 수 있지만 남용하지 마십시오.
동기식 및 비동기식
동기화란 송신자가 데이터를 보내고 수신자가 다음 데이터 패킷을 보내기 전에 응답을 다시 보낼 때까지 기다리는 통신 방법을 말합니다.
예: 동기화: 요청 제출 -> 서버 처리 대기 -> 처리 후 반환 이 기간 동안 클라이언트 브라우저는 아무 작업도 수행할 수 없습니다. 응답 후 다음 데이터 패킷을 전송합니다.
예: 비동기식: 요청이 이벤트에 의해 트리거됨 -> 서버에 의해 처리됨(브라우저는 현재도 다른 작업을 수행할 수 있음) -> 처리됨
AjaxXMLHttpRequest의 중요한 객체
서버에 요청을 할 수 있는 중요한 Javascript 객체입니다. 요청은 Javascript를 통해 이루어질 수 있습니다. 여러 요청이 이루어질 경우 요청 결과는 미리 정의된 방식으로 처리됩니다.
XmlHttpRequest 객체를 생성하는 방법
함수 getXmlHttpRequest(){
var xmlHttpRequest = null;
if ((typeof XMLHttpRequest) != '정의되지 않음') {
//IE가 아닌 브라우저
xmlHttpRequest = 새로운 XMLHttpRequest();
}또 다른 {
//즉, 브라우저
xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
}
xmlHttpRequest를 반환합니다.
}
또는
함수 createXmlHttpRequest(){
var xmlHttpRequest = null;
if(window.ActiveXObject){
xmlHttpRequest = new AvtiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttpRequest = 새로운 XMLHttpRequest();
}
}
xmlHttpRequest 객체의 중요한 속성입니다.
responseXml: 서버 응답의 xml 데이터를 가져옵니다.
status: 서버에서 반환된 상태 코드(예: 200)를 가져옵니다.
ReadyState: xmlHttpRequest와 서버 사이의 통신 상태를 가져옵니다(각각 다른 상태를 설명하는 0, 1, 2, 3, 4).
(Uninitialized): 객체가 생성되었으나 초기화되지 않았습니다. (아직 open 메소드가 호출되지 않았습니다.)
(초기화): 객체가 생성되었으며 전송 메서드가 아직 호출되지 않았습니다.
(데이터 보내기): 보내기 메소드를 호출했지만 현재 상태와 http 헤더를 알 수 없습니다.
(데이터 전송 진행 중): 일부 데이터가 승인되었습니다.
(응답 끝): 이 시점에서는 responseText/responseXml을 통해 데이터를 얻을 수 있습니다.
Ajax를 사용하는 사람이 구현한 응용예제
시스템 스크린샷
시스템 설명:
시스템 구조 다이어그램
첫 페이지를 표시합니다.register.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<머리>
<title>사용자 등록</title>
<link href="css/regist.css" rel="stylesheet" type="text/css" />
<script src="js/regist_ajax.js" type="text/javascript"></script>
</head>
<body onload="getRegistRuleTxt(),getCheckcode()">
<form action="regist.do" onsubmit="반품 확인(this);">
<table bordercolor="회색" cellpadding="6" align="center">
<tr>
<td colspan="2">
>> <font color="red">사용자 등록</font>
<font color="gray">[모듈 설명: 사용자 이름 확인, 이용약관 Ajax 비동기 처리, 인증코드 서버 생성]</font>
</td>
</tr>
<tr>
<td 정렬="오른쪽">
사용자 이름:
</td>
<TD>
<input type="text" name="username" id="username" onblur="postValidate()"/>
<span style="color:orange" id="checkMsg" > * 사용자 이름은 문자, 숫자, 밑줄로 구성됩니다.</span>
</td>
</tr>
<tr>
<td 정렬="오른쪽">
비밀번호:
</td>
<TD>
<input type="password" name="password" id="password">
<span style="color:orange" id="pwdMsg" > * 비밀번호 길이는 보안을 위해 6~8자입니다.</span>
</td>
</tr>
<tr>
<td 정렬="오른쪽">
비밀번호 확인:
</td>
<TD>
<input type="password" name="repassword" id="repassword">
<span style="color:orange" id="repwdMsg" > * 비밀번호 설정 시 실수가 없도록 비밀번호를 확인해주세요</span>
</td>
</tr>
<tr>
<td 정렬="오른쪽">
우편:
</td>
<TD>
<input type="text" id="email" name="email">
<span style="color:orange" id="emailMsg" > * 저희가 연락드릴 수 있도록 평소 이메일 주소를 입력해 주세요.</span>
</td>
</tr>
<tr>
<td 정렬="오른쪽">
인증 코드:
</td>
<TD>
<입력 유형="텍스트" id="체크코드">
<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>
<tr>
<td 정렬="오른쪽">
서비스 약관:
</td>
<TD>
<textarearows="5" cols="48" style="margin-bottom:6px;margin-left:5px; color:gray" readonly="readonly" id="item" >
</textarea>
</td>
</tr>
<tr>
<td 정렬="오른쪽">
</td>
<TD>
<input type="submit" value="약관에 동의하고 등록하세요"/>
</td>
</tr>
</table>
<div 정렬="중앙">
Copyright (c) 2013 Su Ruonian( <a href="mailto:[email protected]">문의:[email protected]</a> )
법인 All Rights Reserved.
</div>
</form>
</body>
</html>
/*
xmlHttpRequest 개체를 가져오는 메서드 만들기
*/
함수 getXmlHttpRequest(){
var xmlHttpRequest = null;
if((typeof XMLHttpRequest) != '정의되지 않음'){
/*IE가 아닌 브라우저는 XMLHttpRequest 객체를 생성합니다*/
xmlHttpRequest = 새로운 XMLHttpRequest();
}또 다른{
/*IE 브라우저는 XMLHttpRequest 객체를 생성합니다*/
xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
}
xmlHttpRequest를 반환합니다.
}
/*
인증코드 응답 이벤트
*/
함수 getCheckcode(){
var codeimage = document.getElementById("ckcodeimage");
var 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=함수(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
item.value=respText;
}또 다른{
//시스템 오류입니다.
item.value="시스템 오류";
}
}또 다른{
//표시 확인 중...
item.value="로드 중...";
}
};
xmlHttpRequest.send(null);
}
/*
get 메소드를 사용하여 확인
*/
함수 getValidate(){
var 사용자 이름 = document.getElementById("사용자 이름");
var url = "validatename.do?username=" + 사용자 이름.값;
//가져오기 모드로 제출할 때 중국어 인코딩 문제를 해결합니다. encodeURI(url).true를 사용하여 요청이 비동기적으로 전송되고 addTimestamp(url)가 브라우저 캐싱을 방지함을 나타냅니다.
xmlHttpRequest.open("get",encodeURI(addTimestamp(url)),true);
//반환 상태를 확인하는 메소드 호출
xmlHttpRequest.onreadystatechange=콜백;
xmlHttpRequest.send(null);
}
/*
게시 방법을 사용하여 확인
*/
함수 postValidate(){
var 사용자 이름 = document.getElementById("사용자 이름");
var url = "validatename.do";
//true는 비동기 메서드를 사용하여 요청을 보내는 것을 의미합니다. 기본값은 true이고 요청 메서드는 get, post, put, delete일 수 있습니다.
xmlHttpRequest.open('post',url,true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=콜백;
//매개변수가 여러 개인 경우 & 기호를 사용하여 키-값 쌍을 연결하고 이스케이프를 사용하여 중국어 문제를 해결합니다.
xmlHttpRequest.send('사용자 이름=' + escape(사용자 이름.값));
}
/*
모니터링 상태 반환 방법
*/
함수 콜백(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
innerHtmlMsg(respText);
}또 다른{
//시스템 오류입니다.
innerHtmlMsg("오류");
}
}또 다른{
//표시 확인 중...
innerHtmlMsg("검사 중");
}
}
/*
브라우저 캐싱을 방지하려면 타임스탬프를 추가하세요. 브라우저 캐싱은 get 메서드만 캐시합니다.
*/
함수 addTimestamp(url){
if(url.indexOf("?")!=-1){
//매개변수가 있는 경우
return url+"×tamp=" + new Date().valueOf();
}또 다른{
//매개변수 없음
return url+"?timestamp=" + new Date().valueOf();
}
}
함수 innerHtmlMsg(메시지){
var checkMsg = document.getElementById("checkMsg");
if(메시지=='존재합니다'){
//사용자 이름이 존재합니다
checkMsg.innerHTML= "<font color='red'>* 죄송합니다. 해당 사용자 이름은 이미 존재합니다.</font>";
}
if(메시지=='존재하지 않습니다'){
//사용자 이름을 사용할 수 있습니다
checkMsg.innerHTML= "<font color='green'>* 축하합니다. 해당 사용자 이름을 사용할 수 있습니다.</font>";
}
if(메시지=='확인 중'){
//시스템 검사
checkMsg.innerHTML= "<font color='#0099aa'>* 시스템이 데이터를 확인하는 중입니다...</font>";
}
if(메시지=='오류'){
//시스템 오류
checkMsg.innerHTML= "<font color='red'>시스템 오류입니다. 네트워크를 확인하거나 <a href='#'>저희에게 연락하세요</a></font>";
}
}
} /* 테이블의 전체 너비와 테두리 스타일을 정의하고 테이블의 모든 텍스트 스타일을 정의합니다 */
.왼쪽{
글꼴 두께:500;
색상:#708899;
오른쪽 패딩:20px;
배경색: #D6ECF5;
}
.inpt {
테두리:단색 #92CEDB 1px;
너비: 210px;
높이: 22px;
왼쪽 여백: 10px;
}
.맞아요{
여백 상단:20px;
색상:#708899;
글꼴 크기:12px;
}
<서블릿>
<servlet-name>UserServlet</servlet-name>
<servlet-class>com.webapp.servlet.UserServlet</servlet-class>
<초기화 매개변수>
<param-name>규칙파일 경로</param-name>
<param-값>/txt/item.txt</param-값>
</init-param>
</서블릿>
<서블릿 매핑>
<servlet-name>UserServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</서블릿 매핑>
<환영 파일 목록>
<welcome-file>regist.jsp</welcome-file>
</welcome-파일-목록>
</웹-앱>
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
java.util.HashMap 가져오기;
java.util.Map 가져오기;
import java.util.Random;
/**
*
* @version: 1.1
*
* @author: Su Ruonian<a href="mailto:[email protected]">이메일 보내기</a>
*
* @since: 1.0 생성시간: 2013-1-20 04:26:52 오후
*
* @function: TODO
*
*/
공개 클래스 CheckCodeImageUtil {
private static final String[] chars = { "0", "1", "2", "3", "4", "5", "6",
"7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I" };
private static final int SIZE = 4; //인증코드의 문자수
private static final int LINES = 4; 간섭선 수
private static final int WIDTH = 110; //인증코드 이미지 너비
private static final int HEIGHT = 40; //인증 코드 사진 높이
private static final int FONT_SIZE = 21; //인증코드의 글꼴 크기
/**
* 인증코드 생성
*
* @return Map<인증코드 값, 인증코드 사진>
*
*/
공개 정적 Map<String,BufferedImage> creatCheckImage(){
//인증코드의 참값을 생성하는 문자열을 저장합니다.
StringBuffer 버퍼 = 새로운 StringBuffer();
//사용자 정의 이미지 객체
BufferedImage 이미지 = new BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_RGB);
Map<String,BufferedImage> map = new HashMap<String,BufferedImage>();
그래픽 그래픽 = image.getGraphics();
graphic.setColor(Color.WHITE);
graphic.fillRect(0, 0, WIDTH, HEIGHT);
무작위 무작위 = 새로운 무작위();
//임의의 문자 그리기
for(int i=0; i<SIZE; i++){
//정의된 문자 집합에서 요소 가져오기
int rand = random.nextInt(chars.length);
graphic.setColor(randomColor());
graphic.setFont(new Font(null,Font.BOLD+Font.ITALIC,FONT_SIZE));
graphic.drawString(chars[rand],(i)*WIDTH/SIZE+8, HEIGHT/2+10);
buffer.append(chars[rand]); //생성된 문자열을 버퍼에 저장하고 나중에 얻을 때 사용자가 입력한 값과 비교하는 데 사용합니다.
}
//간섭선 그리기
for(int i=1;i<=LINES;i++){
graphic.setColor(randomColor());
graphic.drawLine(random.nextInt(WIDTH), random.nextInt(HEIGHT), random.nextInt(WIDTH),random.nextInt(HEIGHT));
if(i==라인){
graphic.setFont(new Font(null,Font.ITALIC,13));
graphic.setColor(Color.GRAY);
graphic.drawString("수 루오니안 스튜디오", 5,15);
}
}
map.put(buffer.toString(), 이미지);
반환 지도;
}
/**
* 색상은 즉시 생성됩니다
* @반품
*/
공개 정적 색상 RandomColor(){
무작위 무작위 = 새로운 무작위();
색상 color = new Color(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.파일 가져오기;
import java.io.FileReader;
import java.io.FileWriter;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
java.util.List 가져오기;
java.util.Map 가져오기;
java.util.Vector 가져오기;
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;
com.sun.image.codec.jpeg.JPEGCodec을 가져옵니다.
com.sun.image.codec.jpeg.JPEGImageEncoder 가져오기;
import com.sun.imageio.plugins.common.ImageUtil;
com.webapp.util.CheckCodeImageUtil 가져오기;
공용 클래스 UserServlet은 HttpServlet을 확장합니다.
개인 목록<String> userList;
개인 문자열 txtFilePath = null;
public void init()에서 ServletException이 발생합니다.
txtFilePath = this.getInitParameter("rulesfilepath");
//데이터베이스 시뮬레이션
userList = new Vector<String>();
userList.add("장산");
userList.add("lisi");
userList.add("왕우");
userList.add("자오리우");
}
공개 무효 doGet(HttpServletRequest 요청, HttpServletResponse 응답)
ServletException, IOException이 발생합니다.
doPost(요청, 응답);
}
공개 무효 doPost(HttpServletRequest 요청, HttpServletResponse 응답)
ServletException, IOException이 발생합니다.
문자열 uri = request.getRequestURI();
문자열 경로 = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if(path.equals("/validatename")){
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
노력하다 {
Thread.sleep(3000);
} 잡기(InterruptedException e) {
e.printStackTrace();
}
//시뮬레이션 시스템이 예외 테스트를 생성합니다.
/*if(1==2){
throw new ServletException("일부 오류");
}*/
String 사용자 이름 = request.getParameter("사용자 이름");
System.out.println("사용자 이름:" + 사용자 이름);
//사용자 데이터 쿼리 시뮬레이션
부울 존재 = userList.contains(사용자 이름);
만약(존재한다면){
response.getWriter().print("존재합니다");
}또 다른{
response.getWriter().print("없음");
}
}
if(path.equals("/rulesText")){
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String filePath = this.getServletContext().getRealPath(txtFilePath);
파일 파일 = 새 파일(filePath);
StringBuffer 버퍼 = 새로운 StringBuffer();
노력하다 {
BufferedReader 리더 = new BufferedReader(new FileReader(파일));
문자열 tmp = "";
while((tmp = reader.readLine())!=null){
buffer.append(new String(tmp.getBytes("gbk"),"utf8")).append("/n");
}
reader.close();
} 잡기(예외 e) {
e.printStackTrace();
}
if(buffer.toString().trim()!=null){
response.getWriter().print(buffer.toString());
}
}
if(path.equals("/checkcode")){
response.setContentType("image/jpeg");
Map<String, BufferedImage> map = CheckCodeImageUtil.creatCheckImage();
문자열 키 = (String)map.keySet().iterator().next();
request.getSession().setAttribute("code",key);
System.out.println("checkcode = " + request.getSession().getAttribute("code"));
BufferedImage 이미지 = map.get(key);
ImageIO.write(이미지, "jpeg", response.getOutputStream());
}
}
}