Ajax로 웹페이지의 비동기 업데이트를 구현하는 방법-HTML 튜토리얼-php.cn

Ajax로 웹페이지의 비동기 업데이트를 구현하는 방법

php中世界最好的语言

풀어 주다： 2018-02-28 09:41:11

원래의

2218명이 탐색했습니다.

이번에는 Ajax가 웹 페이지의 비동기 업데이트를 구현하는 방법을 보여 드리겠습니다. Ajax가 웹 페이지의 비동기 업데이트를 구현하는 데 있어 주의사항은 무엇입니까?

1: ajax의 개념

전체 이름: Asynchronous Javascript And Xml

AJAX는 새로운 프로그래밍 언어가 아니라 더 빠르고, 더 좋고, 더 인터랙티브한 웹 애플리케이션을 만들기 위한 기술입니다. 이 기술은 1998년경에 적용되었습니다. AJAX를 통해 JS는 페이지를 다시 로드하지 않고도 JS의 XMLHttpRequest 객체를 통해 서버와 직접 통신할 수 있습니다. 이를 통해 서버는 전체 페이지 대신 원하는 데이터를 요청할 수 있습니다. AJAX의 핵심은 JS의 XMLHttpRequest 객체입니다. xhr 개체는 IE5에서 처음 도입되었으며 비동기 요청을 지원하는 개체입니다.

2: ajax의 장점

새로 고침 없이 데이터를 업데이트합니다.

서버와 비동기식으로 통신합니다.

표준에 따라 광범위하게 지원됩니다.

프런트엔드와 백엔드 분리.

대역폭을 절약하세요.

3: 작성 단계

1. XMLHttpRequest 객체를 생성합니다.

모든 최신 브라우저(IE7+, Chrome, Firefox, Opera, Safari)에는 XMLHttpRequest 개체가 내장되어 있습니다. 하지만 IE5와 6은 ActiveXObject 개체를 사용합니다.

function getAjax() {
var  xmlhttp = null;
if(window.ActiveXObject){
         xmlhttp = new ActiveXObject(’Microsoft.XMLHTTP’);
} else if(window.XMLHttpRequest){
         xmlhttp = new XMLHttpRequest();
}
return  xmlhttp;
}

로그인 후 복사

2. 서버와의 연결을 열고 전송 방법, URL, 권한 등을 지정합니다.

open 메서드: 새 HTTP 요청을 생성하고 이 요청의 메서드, URL 및 확인 정보를 지정합니다.

xhr.open(유형, url, async, 사용자, 비밀번호);

유형: HTTP 요청 방법, GET, POST 등 대소문자를 구분하지 않습니다.

url: 요청 주소.

async: 부울, 요청이 비동기인지 여부. 기본값은 true입니다. true인 경우 상태가 변경될 때 onreadystatechange 속성으로 지정된 콜백 함수가 호출됩니다. (선택)

user: 서버에서 인증이 필요한 경우 여기에 사용자 이름을 지정합니다. 지정하지 않으면 서버에서 인증이 필요할 때 인증 창이 나타납니다. (드물게 사용됨, 이해만 됨)

password: 확인 정보 중 비밀번호 부분입니다. 사용자 이름이 비어 있으면 이 값은 무시됩니다. (적게 사용하고 이해하세요)

참고:

AJAX에서는 실제로 일반 양식 제출 데이터를 시뮬레이션하고 있습니다. 일반 양식은 데이터를 게시할 때 Content-Type 필드를 전송하므로 이 필드의 값을 AJAX에서 application/x-www-form-urlencoded로 지정해야 합니다. 그리고 필드 이름과 값이 인코딩되어 전송됩니다. setRequestHeader 사용: 요청의 특정 HTTP 헤더를 개별적으로 지정합니다.

참고: 데이터는 encodeURIComponent() 함수를 사용하여 인코딩되어야 합니다.

3. 지침을 보냅니다.

send(): HTTP 서버에 요청을 보내고 응답을 받습니다.

이 메서드의 동기 또는 비동기 모드는 open 메서드의 async 매개 변수에 따라 다릅니다. async가 true인 경우 이 메서드는 즉시 반환됩니다. false인 경우 이 메서드는 반환되기 전에 요청이 완료되거나 시간 초과될 때까지 기다립니다.

xhr.send(body);

body: 이 요청을 통해 전송된 데이터입니다. GET 요청을 null로 설정하면 됩니다.

4. 서버에서 반환되는 처리 결과를 기다리고 받습니다.

5. 클라이언트 수신.

6. XMLHttpRequest 개체를 해제합니다.

4: 콜백 함수

onreadystatechange 속성을 통해 Readystate 속성이 변경될 때 이벤트 처리 콜백 함수를 지정합니다.

xhr.onreadystatechange = function(){}