AJAX에 대한 간략한 소개:
AJAX는 Asynchronous JavaScript And XML(Asynchronous JavaScript And XML)을 말하며 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 말합니다. AJAX를 사용하면 JavaScript가 JavaScript의 XMLHttpRequest 개체를 사용하여 서버와 직접 통신할 수 있습니다. 이 개체를 사용하면 JavaScript가 페이지를 다시 로드하지 않고도 웹 서버와 데이터를 교환할 수 있습니다.
jQuery는 이해하기 쉬운 JavaScript를 경량으로 캡슐화한 JavaScript 프레임워크입니다.
Ajax는 xml javascript와 결합된 비동기 요청 기술로 동적 새로 고침을 수행할 수 있습니다.
ajax 준비:
1.jquery 다운로드:
공식 홈페이지 최신 다운로드 주소: http://blog.jquery.com/2011/09/01/jquery- 1- 6-3-released/
다운로드 시 jQuery 1.6.3 Minified 또는 jQuery 1.6.3 Uncompressed를 선택하고 마우스 오른쪽 버튼을 클릭한 후 "Download using Thunder"를 선택하세요
2. 주요 지식 소개
2.1. Ajax 비동기 전송 단계:
1. dom을 사용하여 텍스트 상자에서 속성 값을 가져옵니다.
document.getElementById("id name").value
2. XMLHttpRequest 객체를 만듭니다. 브라우저에는 XMLHttpRequest, ActiveXObject 두 종류의 객체가 있습니다
3. 콜백 함수 등록 콜백 함수 등록 시 함수 이름만 필요하며 괄호는 추가하지 마세요
콜백 함수 등록 시 반환되는 데이터는 다음과 같습니다.
첫 번째 방법: 클라이언트에서 서버 일반 텍스트 데이터 출력 가져오기
두 번째 방법: responseXML을 사용하여 XML 데이터 개체의 DOM 개체를 허용합니다
4. 연결 정보
5. 데이터 전송 및 서버와의 상호 작용 시작
Post 메서드/get 메서드
2.2.ajax 기본 메서드:
(1).getElementById("id 속성 값" ):
지정된 id 속성 값에 따라 객체 가져오기
(2 ).getElementsByTagName(tagname):
전체 HTML 문서에서 HTML 요소를 검색하여 지정된 요소의 컬렉션을 반환합니다. 이름
(3) 선택자:
선택자에는 기본 선택자, 계층적 선택자, 속성 선택자 등이 있습니다. 이 프로그램에는 다음과 같은 기본 선택기 #id만 있습니다.
$("#myDiv"): ID가 "myDiv"인 요소를 찾습니다.
2.3.XMLHttpRequest 개체:
XMLHttpRequest는 없이 기능을 제공할 수 있습니다. 페이지가 로드되면 웹페이지가 업데이트되고, 페이지가 로드된 후 클라이언트가 서버에 데이터를 요청하고, 페이지가 로드된 후 서버가 데이터를 수신하고 백그라운드에서 클라이언트에 데이터를 보냅니다.
2.3.1. 방법:
(1)overrideMimeType("text/html"):
서버로 전송된 헤더를 재정의하여 text/xml을 MIME 유형으로 지정합니다.
(2 ) open(method, url, async, 사용자 이름, 비밀번호):
URL 및 HTTP 메소드와 같은 HTTP 요청 매개변수를 초기화하지만 요청을 보내지는 않습니다.
method 매개변수는 GET, POST 및 HEAD를 포함하여 요청에 사용되는 HTTP 메서드입니다.
url 매개변수는 요청의 본문입니다.
async 매개변수는 요청이 동기식인지 비동기식인지를 나타내며 false 요청은 동기식입니다. , true 요청은 다음과 같습니다. 비동기
사용자 이름 및 비밀번호 매개변수는 선택사항이며 URL에 필요한 인증에 대한 인증 자격을 제공합니다. 지정된 경우 URL 자체에서 지정한 모든 자격을 재정의합니다.
(3)send(body):
open() 메소드에 전달된 매개변수와
send(body) 메소드에 전달된 선택적 요청 본문을 사용하여 HTTP 요청을 보냅니다. () ) 지정된 HTTP 메소드는 POST 또는 PUT이고 body 매개변수는 요청 본문을 문자열 또는 Document 객체로 지정합니다. 요청 본문이 필요하지 않은 경우 이 매개변수는 null이 됩니다.
이전에 호출된 open()의 async 매개변수가 false인 경우 이 메서드는 차단되고 ReadyState가 4가 되고 서버의 응답이 완전히 수신될 때까지 반환되지 않습니다.
비동기 매개변수가 true이거나 이 매개변수가 생략된 경우 send()는 즉시 반환되며 나중에 설명하는 것처럼 서버 응답은 백그라운드 스레드에서 처리됩니다.
(4)setRequestHeader(name, value):
열렸지만 전송되지 않은 요청에 HTTP 요청을 설정하거나 추가합니다.
name 매개변수는 설정할 헤더의 이름입니다. 이 매개변수에는 공백, 콜론 또는 개행 문자가 포함되어서는 안 됩니다.
값 매개변수는 헤더의 값입니다. 이 매개변수에는 개행 문자가 포함되어서는 안 됩니다.
2.3.2 속성:
(1)onreadystatechange:
readyState 속성이 변경될 때마다 호출되는 이벤트 핸들러 함수입니다. ReadyState가 3인 경우에도 여러 번 호출될 수 있습니다.
(2)readyState:
HTTP 요청의 상태입니다. XMLHttpRequest가 처음 생성되면 완전한 HTTP 응답이 수신될 때까지 이 속성의 값은 0부터 시작하여 4로 증가합니다.
5개 상태 각각에는 연관된 비공식 이름이 있습니다. 다음 표에는 상태, 이름 및 의미가 나열되어 있습니다.
readyState의 값은 요청이 처리되는 동안을 제외하고 감소되지 않습니다. 또는 프로세스 중에 open() 메소드가 호출됩니다. 이 속성의 값이 증가할 때마다 onreadystatechange 이벤트 핸들러가 트리거됩니다.
(3)상태:
서버에서 반환한 HTTP 상태 코드입니다(예: 성공의 경우 200, '찾을 수 없음' 오류의 경우 404). ReadyState가 3보다 작을 때 이 속성을 읽으면 예외가 발생합니다.
(4)responseText:
지금까지 서버로부터 받은 응답 본문(헤더 제외)이거나, 아직 데이터가 수신되지 않은 경우 빈 문자열입니다.
readyState가 3보다 작은 경우 이 속성은 빈 문자열입니다.ReadyState가 3인 경우 지금까지 수신한 응답 부분을 반환하는 속성입니다. ReadyState가 4인 경우 이 속성은 전체 응답 본문을 보유합니다.
응답에 응답 본문의 문자 인코딩을 지정하는 헤더가 포함되어 있는 경우 해당 인코딩을 사용하세요. 그렇지 않으면 유니코드 UTF-8이 가정됩니다.
(5)responseXML: 요청에 대한 응답, XML로 구문 분석되고 문서 객체로 반환됩니다.
코드 예:
참고: 이 예는 프런트엔드로 구성됩니다. 및 백엔드, 백엔드는 서블릿 구현을 사용하지만 데이터를 확인하기 위해 데이터베이스로 이동하지 않습니다. 프론트 데스크는 html과 자바스크립트로 구성되는데, 하나는 jquery로 캡슐화된 ajax를 사용하여 양식의 동적 검증을 구현하는 것입니다. 두 가지 확인 방법의 차이점은 단지 자바스크립트 스크립트가 다르고, 프론트 페이지와 백그라운드 서블릿이 동일하다는 것입니다.
프런트엔드 ajax.html
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
ajax < ;script type="text/javascript" src="jslib/jquery.js">
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
