집 > 기사 > 웹 프론트엔드 > Ajax로 웹페이지의 비동기 업데이트를 구현하는 방법

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

php中世界最好的语言원래의: 2018-02-28 09:41:112134검색

이번에는 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(){}

readyState 속성: 요청의 현재 상태를 반환합니다.

상태:

0: 개체가 생성되었지만 초기화되지 않았습니다(open 메서드가 호출되지 않음).

1: 개체가 생성되었으며 전송 메서드가 아직 호출되지 않았습니다.

2: 전송 메소드가 호출되었습니다. 그러나 현재 상태와 HTTP 상태를 알 수 없습니다.

3: 데이터 수신을 시작합니다. 응답 및 HTTP 헤더가 불완전하기 때문에 responseBody 및 responseText를 통해 일부 데이터를 가져올 때 오류가 발생합니다.

4: 데이터 수신이 완료되면 responseBody와 responseText를 통해 완전한 응답 데이터를 얻을 수 있습니다.

status 속성: 현재 요청의 상태 코드를 반환합니다.

200 OK: 요청한 문서를 찾아서 올바르게 반환했습니다.

304 수정되지 않음: 동일한 서버 측 콘텐츠가 포함된 로컬 캐시 사본이 있습니다.

403 금지됨: 요청자에게 요청한 문서에 대한 해당 권한이 없습니다.

404 찾을 수 없음: 요청한 문서를 찾을 수 없습니다.

statusText 속성: 현재 요청의 응답 라인 정보를 반환합니다.

responseXML 속성: 응답 정보를 XML 문서 객체로 형식화하고 반환합니다.

responseText 속성: 응답 정보를 문자열로 반환합니다.

5 네트워크 전송 속도.

ES5에 추가된 두 가지 새로운 메서드:

JSON.parse: JSON 문자열 데이터를 JSON 개체로 변환합니다.

JSON.stringify: JSON 개체를 JSON 문자열로 변환합니다.

참고: 1. 브라우저 지원: IE8+.

　2. JSON 형식 문자열의 키 또는 문자열 값은 큰따옴표로 묶어야 합니다.

6 실행(예: 일부 뉴스 웹사이트에서는 일부 사용자가 싫어하는 뉴스를 제거함)

8: 프런트엔드와 백엔드 분리

백엔드는 데이터 출력과 비즈니스 로직 처리만 담당하며, 프런트엔드는 상호 작용 논리와 인터페이스 표시를 담당합니다. 간단히 말하면 프런트 엔드 정적 페이지에는 백그라운드 프로그램 코드가 없으며 백그라운드에서는 HTML 태그 없이 데이터가 출력됩니다.

프런트엔드와 백엔드 분리는 Ajax를 사용하여 데이터 상호작용을 실현합니다. (구체적인 기능 패키징 분리는 데모에 나와 있습니다.)

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!