농담입니다. 원본 소스: http://java.sun.com/developer/technicalArticles/J2EE/AJAX/
중국어와 영어의 비교는 모두 제가 번역한 것입니다. 레벨이 제한되어 있습니다(CET-6 시험에서는 78점 수정 가능).
비동기 JavaScript 기술 및 XML(AJAX)
Java 2 플랫폼, Enterprise Edition 사용
——"비동기 JavaScript XML 기술 및 J2EE"
Greg Murray 작성, 2005년 6월 9일
Flickr, GMail, Google Suggest 또는 Google Maps를 사용해 본 사람이라면 새로운 유형의 동적 웹 애플리케이션이 등장하고 있다는 사실을 깨닫게 될 것입니다. 이러한 애플리케이션은 플러그인에 의존하지 않고도 기존 데스크톱 애플리케이션과 모양과 작동이 매우 유사합니다. 또는 브라우저별 기능은 전통적으로 JavaScript 프로그래밍 언어 및 CSS(Cascading Style Sheet)와 같은 콘텐츠의 일부를 변경하기 위해 다시 로드해야 하는 HTML 페이지 집합이었습니다. 모든 주요 브라우저에서 작동하는 매우 동적인 웹 애플리케이션을 만드는 데 효과적으로 사용할 수 있습니다. 이 기사에서는 오늘날 웹 애플리케이션을 데스크톱 애플리케이션처럼 더욱 풍부하고 대화형으로 만들기 위해 사용할 수 있는 몇 가지 기술을 자세히 설명합니다. GMail, Google, Suggest 또는 Google Maps를 아는 사람이라면 새로운 종류의 동적 WEB 애플리케이션이 형성되고 있다는 것을 알고 있습니다. 이러한 애플리케이션은 기존 데스크톱 애플리케이션과 매우 유사하며 플러그인이나 브라우저 특수 효과에 의존하지 않습니다. 전통적인 의미에서 웹 애플리케이션은 웹 페이지 집합입니다. 페이지의 콘텐츠가 변경되면 전체 웹 페이지가 업데이트되어야 합니다. JavaScript 및 CSS와 같은 일부 기술은 매우 성숙하여 동적 웹 페이지를 효율적으로 만들고 대부분의 주요 브라우저에서 실행할 수 있습니다. 이 기사에서는 웹 애플리케이션을 더욱 풍부하고 대화형으로 만들 수 있는 몇 가지 기술을 자세히 설명합니다(데스크톱 애플리케이션과 마찬가지로).
비동기 JavaScript 기술 및 XML(AJAX) 소개
——AJAX 소개
JavaScript 기술을 사용하면 HTML 페이지는 자신이 로드된 서버를 비동기식으로 호출하고 XML 문서를 가져올 수 있으며, 그런 다음 JavaScript 기술을 통해 ML 문서를 사용하여 문서 객체 모델(DOM)을 업데이트하거나 수정할 수 있습니다. ) HTML 페이지의 AJAX(Asynchronous JavaScript Technology and XML)라는 용어는 최근 이 상호 작용 모델을 설명하기 위해 등장했습니다. ——JavaScript 기술을 사용하면 HTML 페이지를 생성하는 서버에서 비동기적으로 호출할 수 있습니다. XML로 문서화된 결과를 반환했습니다. 그런 다음 JavaScript는 이 XML 문서를 사용하여 이 웹 페이지의 DOM(문서 개체 모델)을 업데이트하거나 변경합니다. AJAX라는 용어는 이러한 상호 작용 모드를 설명하기 위해 최근 몇 년간 등장한 새로운 용어입니다.
AJAX는 새로운 것이 아닙니다. 이러한 기술은 수년 동안 Windows 플랫폼에서 인터넷을 대상으로 하는 개발자가 사용할 수 있었습니다. 최근까지 이 기술은 웹 원격 또는 원격 스크립팅으로 알려졌습니다. 웹 개발자는 또한 플러그인, Java, 애플릿, 숨겨진 프레임의 조합을 사용하여 이 상호작용 모델을 한동안 에뮬레이트했습니다. 최근에 변경된 사항은 XMLHttpRequest 객체에 대한 지원이 주류 브라우저에서 모든 플랫폼에 걸쳐 보편화되었다는 것입니다. 진짜 마법은 JavaScript 기술의 XMLHttpRequest 객체의 결과입니다. 이 개체는 공식적인 JavaScript 기술 사양에 지정되지는 않았지만 모든 현재의 주류 브라우저는 이를 지원합니다. 현재 세대의 브라우저 중에서 JavaScript 기술과 CSS 지원의 미묘한 차이점은 Firefox, Internet Explorer, Safari 및 Safari와 같은 관리가 가능합니다. 귀하가 오래된 브라우저를 지원해야 하는 경우에는 AJAX가 답이 될 수 없습니다. ——AJAX는 최신 정보를 제공하지 않으며, 이전에 AJAX를 사용하지 않은 사용자는 IE에서 사용하는 광고를 사용하여 直到最近, 这项技术被冠以远程脚本而更器了.以前WEB开发者使用插件、애플릿或者隐藏框架来仿效这种交互模式。但是现에서 XMLHttpRequest对象技术已经에서 主流浏览器上普及、所以这种模仿的情况越来越少了.JavaScript와 XMLHttpRequest对象技术的结합에서 진짜 신의 진실에 대한 정보 、尽管XMLHttpRequest는 对象技术并不属于JavaScript标准规范、但是现代的主流浏览器都支持、Firefox、IE、 Safari这些浏览器对JavaScript와 CSS의 활동이 있습니다微小不同、但这些不同之处很容易理解화处理。如果你一定要兼容老一代浏览器那还是不要用AJAX了。
///////////////////////////////////////////// ///////////////////////////////////////////
1楼
BS 娄猪
2楼
AJAX 기반 클라이언트를 독특하게 만드는 것은 클라이언트에 페이지별 컨트롤이 포함된 로직이 내장되어 있다는 점입니다. 페이지는 문서가 로드되는 마우스 클릭, 포커스 변경, 또는 심지어 타이머와 같은 페이지와 상호작용합니다. AJAX 상호작용은 데이터로부터 로직을 간단히 분리할 수 있도록 허용합니다. 페이지는 HTML 페이지를 전체를 다시 로드하는 대신 전체를 변경할 때마다 표시할 때마다 필요에 따라 데이터 조각을 한 바이트 크기로 가져올 수 있습니다. AJAX는 이 상호작용 모델을 지원하기 위해 다른 서버측 아키텍처가 필요합니다. 전통적으로, 서버측 웹 애플리케이션은 모든 클라이언트에 대한 HTML 문서 생성에 초점을 두었습니다. 그러면 클라이언트는 새로고침하고 다시 렌더링하고 각 응답에 대한 전체 HTML 페이지 를 새로고침합니다. 리치 웹 애플리케이션 애플리케이션 초점을 클라이언트에 초점을 맞춰 문서를 가져오는 HTML 문서 템플릿 또는 컨테이너로 컨텐츠를 삽입하는 클라이언트에 기반으로 클라이언트 서버측 구성요소에서 XML 데이터를 사용하여 검색됨 특히?基础上(比如文档加载事件、鼠标点击事件、焦点变化事件、甚至一个时钟事件).AJAX는 AJAX가 제공하는 웹사이트에서 이전에는 전혀 다른 방식으로 새로운 방식으로 새로운 방식을 사용하는 것이 좋습니다. AJAX는 AJAX와 완전히 동일하지 않습니다.户端的每一次请求生成HTML页端、每一次客户端接到响应都要刷新和密新渲染整个页면.우리가 이야기하고 있는 WEB 애플리케이션은 HTML 문서를 템플릿이나 컨테이너로 사용하는 클라이언트에 초점을 맞추고 있으며 클라이언트는 이 컨테이너에 콘텐츠를 삽입합니다. 이를 수행하는 원리는 클라이언트에서 이벤트가 발생할 때마다 클라이언트가 이를 보낼 수 있다는 것입니다. 서버에서 반환된 XML 데이터를 요청하고 사용합니다.
AJAX 상호작용의 일부 용도는 다음과 같습니다.
실시간 양식 데이터 유효성 검사: 사용자 ID, 일련번호, 우편번호 또는 서버 측 유효성 검사가 필요한 특수 쿠폰 코드와 같은 양식 데이터는 사용자가 양식을 제출하기 전에 양식에서 유효성을 검사할 수 있습니다.
자동 완성: 사용자가 입력하면 이메일 주소, 이름, 도시 이름 등 양식 데이터의 특정 부분이 자동 완성될 수 있습니다.
마스터 세부 정보 작업: 클라이언트 이벤트를 기반으로 HTML 페이지는 클라이언트가 페이지를 새로 고치지 않고도 개별 제품 정보를 볼 수 있도록 하는 제품 목록과 같은 데이터에 대한 더 자세한 정보를 가져올 수 있습니다.
정교한 사용자 인터페이스 컨트롤: 페이지 새로 고침이 필요하지 않은 트리 컨트롤, 메뉴 및 진행률 표시줄과 같은 컨트롤이 제공될 수 있습니다.
페이지의 데이터 새로 고침: HTML 페이지는 점수, 주식 시세, 날씨 또는 애플리케이션별 데이터와 같은 최신 데이터를 얻기 위해 서버에서 데이터를 폴링할 수 있습니다.
——AJAX 사용의 몇 가지 예는 다음과 같습니다.
실시간 양식 데이터 유효성 검사: 사용자가 전체 양식을 제출하기 전에 ID 번호, 일련번호, 우편번호, 쿠폰 번호 등과 같은 양식 데이터를 확인할 수 있습니다!
자동 완성: 이메일, 이름, 도시 이름 등 일부 특정 양식 데이터를 사용자 유형에 따라 자동으로 채울 수 있습니다.
세부 운영 : 클라이언트 이벤트를 기반으로 고객이 페이지를 새로 고치지 않고도 특정 상품의 세부 정보를 볼 수 있습니다.
지능형 클라이언트 인터페이스 제어: 페이지를 새로 고치지 않고도 언제든지 트리, 메뉴, 도구 모음 등의 서비스를 제공할 수 있습니다.
실시간 데이터 새로 고침: 페이지는 서버에서 동적 데이터를 필터링하여 점수, 주식 시세, 일기 예보 등과 같은 데이터를 표시할 수 있습니다.
이 목록은 모든 것을 포함하지는 않지만 AJAX 상호 작용을 통해 애플리케이션이 이전보다 더 많은 작업을 수행할 수 있음을 보여줍니다. 과거. 비록 많은 이러한 혜택이 주목할만한 것이지만 이 접근 방식에는 몇 가지 단점이 있습니다.
복잡성: 서버 측 개발자는 프레젠테이션이 로직이 클라이언트에서 HTML 페이지에서와 마찬가지로 서버 측에서 로직이 필요하다는 것을 이해해야 합니다. 클라이언트 페이지에 필요한 XML 콘텐츠를 생성합니다. HTML 페이지 개발자는 JavaScript 기술 기술을 가지고 있어야 합니다. AJAX 지원 애플리케이션 생성은 새 프레임워크가 생성되고 기존 프레임워크가 진화되어 상호작용 모델을 지원하므로 더 쉬워질 것입니다.
표준화 XMLHttpRequest 객체: XMLHttpRequest 객체는 아직 아님 부분 기술의 JavaScript 기술 사양의 일부입니다. 클라이언트에 따라
JavaScript 기술 구현: AJAX 상호작용은 클라이언트에 따라 미묘한 차이가 있는 JavaScript 기술에 크게 의존합니다. 브라우저별 차이점에 대한 자세한 내용은 QuirksMode.org를 참조하세요.
디버깅: AJAX 애플리케이션은 또한 디버깅하기가 어렵습니다.
볼 수 있는 소스: 클라이언트측 JavaScript 기술은 간단히 AJAX 지원 페이지에서 보기 소스 를 선택하여 간단히 볼 수 있습니다. 잘못 설계된 AJAX 기반의 애플리케이션은 자체로 해커에게 또는 표절이 발생할 수 있습니다.
AJAX 기술을 위한 프레임워크와 패턴은 개발자가 AJAX 상호작용 모델을 사용하는 애플리케이션을 작성하면서 더 많은 경험을 얻음에 따라 등장할 가능성이 높습니다. AJAX 상호작용을 위한 단일 프레임워크에 초점을 맞추는 것은 아직 초기 단계입니다. 이 문서 및 관련 솔루션은 AJAX 상호 작용이 현재 2 기존 Java 2 플랫폼 Enterprise Edition (J2EE) 기술에 의해 지원될 수 있는 방법에 중점을 두고 있습니다. 서블릿으로, JavaServer 페이지 (JSP) 소프트웨어, JavaServer Faces 애플리케이션, 및 태그 라이브러리 (JSTL ).
复杂性: 服务端开发者必须掌握XML、页face开发者必须掌握JavaScript技术。
XMLHttpRequest는 XMLHttpRequest를 지원하는 방식이며, XMLHttpRequest는 JavaScript를 사용하지 않습니다.
JavaScript는 AJAX를 지원합니다.
디버깅：AJAX难于调试。
查看原文件：使用这种方法可以容易的看到JavaScript源码、给黑客、剽窃者以可乘之机。
AJAX 상호작용의 해부학
이제 우리는 AJAX가 무엇인지에 대해 논의했고, 일부 문제는 무엇인지에 대해 논의했으며, 모든 부분을 함께 모아서 AJAX를 보여드리겠습니다. 활성화된 J2EE 애플리케이션.
예를 들어 고려해 보겠습니다. 웹 애플리케이션에는 정적 페이지, HTML 페이지, 또는 JSP 기술로 생성된 페이지, HTML 페이지, 데이터를 검증하기 위해 서버측에서 필요한 로직, HTML 양식이 포함되어 있습니다. 페이지를 새로 고치지 않고 페이지를 새로 고치지 않고 서버 측 웹 구성 요소 (서블릿) ValidateServlet이라는 이름의 는 검증 로직을 제공합니다. 그림 1 은 AJAX 상호작용의 세부정보를 설명합니다. 유효성 검사 로직을 제공합니다.
——AJAX는 AJAX를 사용하여 J2EE 응용 프로그램을 사용합니다. 이름은 ValidateServlet의 서블릿을 사용하는 것입니다.步骤如下：
1、A 클라이언트 이벤트가 발생합니다. ——客户端事件发生。
2、XMLHttpRequest 객체가 생성되고 구성됩니다. ——一个XMLHttpRequest가 XMLHttpRequest를 통해 확인되었습니다.
3、 XMLHttpRequest 개체는 호출을 합니다. ——XMLHttpRequest가 반환되었습니다.
4、요청은 ValidateServlet에 의해 처리됩니다. ——ValidateServlet의 관리.
5、ValidateServlet은 결과를 포함하는 문서를 반환합니다. ——ValidateServlet은 XML 문서를 통해 확인되었습니다.
6、 XMLHttpRequest 객체는 callback() 함수를 호출하고 결과를 처리합니다. ——XMLHttpRequest는 callback()을 사용하여 프로세스를 관리합니다.
7、 HTML DOM이 업데이트되었습니다.——HTML文档对象被更新。
3층
각 단계의 세부 내용은 다음과 같습니다.
1. 클라이언트 이벤트가 발생합니다.——클라이언트 이벤트가 발생합니다.
링크나 양식 요소를 클릭하는 키보드 이벤트는 JavaScript 함수인 verify()를 트리거합니다.
크기="20"
이름="ID"
onkeyup="validate();">
2. XMLHttpRequest 객체가 생성 및 구성됩니다. - XMLHttpRequest 객체가 생성 및 구성됩니다.
var req;
함수 유효성 검사() {
var idField = document.getElementById("idField");
var url = "validate?id=" escape(idField.value);
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");——XMLHttpRequest 개체 만들기
req.open("GET", url, true);——XMLHttpRequest 객체의 open 메서드를 호출합니다. url은 요청된 서버 구성 요소 경로이며, true는 호출이 비동기적임을 의미합니다.
비동기로 설정한 경우 다음과 같은 콜백 함수가 있어야 합니다.
req.onreadystatechange = 콜백;
req.send(null);
}
3. XMLHttpRequest 객체가 호출을 합니다.——XMLHttpRequest 객체가 요청을 합니다.
req.send(null)이 실행되면 요청을 발행합니다.
GET 요청인 경우 콘텐츠가 비어 있을 수 있으며 매개변수가 URL에 추가될 수 있습니다.
POST 요청인 경우 Content-Type 헤더를 다음과 같이 설정해야 합니다.
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("id=" escape(idTextField.value));
JavaScript를 사용하여 양식 요소 값을 생성하는 경우 값 인코딩이 올바른지 확인해야 합니다. JavaScript에는 올바른 인코딩을 보장하고 특정 문자를 올바르게 무시하는 escape() 함수가 있습니다.
4. 요청은 ValidateServlet에 의해 처리됩니다.——请求被ValidateServlet所处리:
서블릿은 XMLHttpRequest를 처리하고 HTTP 요청을 처리합니다.
공개 클래스 ValidateServlet 확장 HttpServlet {
비공개 ServletContext 컨텍스트;
비공개 HashMap 사용자 = 신규 HashMap();
public void init(ServletConfig config) 발생 ServletException {
this.context = config.getServletContext();
users.put("greg","계정 데이터");
users.put("duke","account data");
}
공개 무효 doGet(HttpServletRequest 요청, HttpServletResponse 응답)
발생 IOException, ServletException {
String targetId = request.getParameter("id");
if ((targetId != null) && !users.containsKey(targetId.trim())) {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("valid");
} 그 밖에 {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("invalid");
}
}
}
5. ValidateServlet은 결과를 포함하는 XML 문서를 반환합니다.——ValidateServlet返回一个包含结果的XML文档。
ValidateServlet은 XML 문서를 응답으로 생성합니다. 더 복잡한 상황에서는 DOM, XSLT 등을 사용할 수 있습니다.
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("잘못됨");
개발자는 두 가지를 알아야 합니다. 첫째: Content-Type을 text/xml로 설정해야 합니다. 둘째: Cache-Control을 no-cache로 설정해야 합니다.
4층
위로
5층
6. XMLHttpRequest 객체는 callback() 함수를 호출하고 결과를 처리합니다.
——XMLHttpRequest 객체는 callback() 함수를 호출하고 결과를 처리합니다.
——XMLHttpRequest 객체의 준비 상태가 변경되면 callback() 메서드가 호출됩니다. ValidateServlet에 대한 요청이 완료되었다고 가정하고 준비 상태는 4로 XMLHttpRequest 호출이 완료되었음을 나타냅니다. HTTP 상태 코드는 200이며, 이는 HTTP 상호 작용이 성공했음을 나타냅니다.
함수 콜백() {
if (req.readyState == 4) {
if (req.status == 200) {
// 업데이트 메시지가 유효한지 여부에 따라 HTML DOM을 기반으로
}
}
}
브라우저는 표시되는 문서의 표현을 유지 관리합니다. 페이지의 JavaScript 기술은 페이지가 로드된 후 DOM을 수정할 수 있는 기술을 허용하는 및 API를 사용할 수 있습니다.
요청이 성공하면 JavaScript 기술 코드가 페이지의 DOM을 수정할 수 있습니다. ValidateServlet에서 검색된 문서의 객체 표현은 req.responseXML을 사용하여 JavaScript 기술에 사용할 수 있습니다. XMLHttpRequest 객체. DOM을 제공하는 API는 JavaScript 기술을 통해 해당 문서의 콘텐츠를 탐색하고 해당 콘텐츠를 사용하여 페이지의 DOM을 수정하는 것을 의미합니다. 반환된 문서의 문자열 표현은 req.responseText를 호출하여 액세스할 수 있습니다. 이제 JavaScript 기술에서 DOM API를 사용하는 방법을 살펴보겠습니다.
유효
이 예는 단순히 유효하거나 유효하지 않은 문자열인 메시지 요소의 발신자를 포함하는 간단한 XML 조각입니다. 고급 샘플에는 메시지에 표시될 수 있는 둘 이상의 메시지와 유효한 이름이 포함될 수 있습니다. 사용자:
- 위의 예는 간단한 XML 조각이며 실제 애플리케이션에는 다음이 더 포함될 수 있습니다.
함수 구문 분석() {
var Message = req.responseXML.getElementsByTagName("message")[0];
setMessage(message.childNodes[0].nodeValue);
}
parseMessages() 함수는 ValidateServlet에서 검색된 XML 문서를 처리합니다. 이 함수는 HTML DOM을 업데이트하기 위해 메시지 요소의 값으로 setMessage()를 호출합니다.
-parseMessages() 메소드는 서버에서 반환된 XML 문서를 처리합니다. 이 메소드는 HTML DOM을 변경하기 위해 setMessage() 메소드를 호출하기 위해 message 요소의 값을 사용합니다.
6층
멋지네요. 존경하다. . . 감사합니다, 호스트님
7층
나쁘지 않아요! 아주 잘 번역되었습니다! 호스트분이 영어를 아주 잘 하십니다! 레벨 6... 히히...
8층
7. HTML DOM이 업데이트됩니다.——HTML 문서 개체가 업데이트됩니다.
JavaScript 기술은 한 개의 API를 사용하여 HTML DOM의 요소에 대한 참조를 얻을 수 있습니다. 권장되는 방법은 요소에 대한 참조를 얻는 방법입니다. 표시되는 HTML 문서에 표시됩니다. a 요소에 대한 참조를 통해 JavaScript 기술을 이제 사용하여 요소 속성을 수정하는 데 사용할 수 있습니다. 수정 요소의 스타일 속성을 수정합니다. 또는 추가, 제거, 또는 수정 하위 요소
공통적인 의미는 요소의 본문 컨텐츠를 변경한다는 의미는 다음 예와 같이 요소에 내부 HTML 속성을 설정하는 것입니다.
——JavaScript可以获得HTML DOM中任何元素（对象）적용, 推荐使사용document.getElementById("userIdMessage")방법법来获取。userIdMessage就是网页上任의 뜻 특정 ID 유형, 유원지(对象)의 JavaScript를 사용하면 JavaScript를 사용할 수 있고, JavaScript를 사용할 수도 있습니다.设置innerHTML属性、如下所示：
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
