> 웹 프론트엔드 > JS 튜토리얼 > JavaScript AJAX에 대한 간단한 이해

JavaScript AJAX에 대한 간단한 이해

黄舟
풀어 주다: 2017-03-17 15:14:20
원래의
1420명이 탐색했습니다.

이 글은 JavaScript에서 AJAX 관련 지식을 주로 소개하고 있는데, 참고할만한 가치가 매우 높습니다. 아래의 에디터와 함께 살펴보겠습니다.

요약

AJAX 기술은 웹페이지 구축에 꼭 필요한 기술 중 하나입니다. 이 글을 통해 누구나 이 기술을 쉽게 배울 수 있기를 바랍니다.

1. Ajax란?

ajax(비동기 javascript xml)는 전체 웹페이지를 다시 로드하는 대신 부분적인 웹페이지 데이터를 새로 고칠 수 있습니다.

2. Ajax 사용법

1단계: xmlhttprequest 객체 생성

생성 xmlhttprequest 객체, XMLHttpRequest 객체는 서버와 데이터를 교환하는 데 사용됩니다.

var xmlhttp =new XMLHttpRequest();

2단계: 콜백 함수

onreadystatechange 함수를 등록합니다. 서버가 요청에 응답하고 데이터를 반환한 후 클라이언트가 데이터를 처리하도록 하려면 onreadystatechange 함수를 사용해야 합니다. xmlhttprequest 객체의 ReadyState가 변경될 때마다 onreadystatechange 함수가 트리거됩니다. ReadyState에 대해서는 다음 장에서 자세히 소개하겠습니다.

 xmlHttp.onreadystatechange= callback;
  function callback(){}
로그인 후 복사

3단계: 요청 구성 및 보내기

xmlhttprequest 개체의 open() 및 send() 메서드를 사용하여 구성 및 보내기 서버에 리소스 요청을 보냅니다. <… 🎜>

xmlhttp.send(); get 메소드를 사용하여 서버에 요청을 보냅니다.

xmlhttp.send(string); 서버에 요청을 보내려면 post 메소드를 사용하세요.

게시 양식 데이터는 xmlhttprequest 개체의 setRequestHeader 메서드를 사용하여 HTTP 헤더를 추가해야 합니다.

게시물 요청은 언제 가능한가요?

(1)파일 또는 데이터베이스를 업데이트하는 경우

.

(2) 포스트 요청

에는 글자 수 제한이 없으므로 서버에 많은 양의 데이터를 보냅니다.

(3) 사용자가 입력한 암호화된 데이터를 보냅니다.

xhttp.open("POST", "ajax_test.aspx", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
로그인 후 복사

4단계: 응답 데이터 처리

서버의 응답을 얻으려면 xmlhttprequest 객체의 responseText 또는 responseXML 속성을 사용하세요.

서버 응답의

문자열

데이터를 가져오려면 responseText 속성을 사용하고, 서버 응답의 XML 데이터를 가져오려면 responseXML 속성을 사용하세요.

콜백 함수에서 ReadyState==4 및 status==200을 사용하여 상호 작용이 끝났는지, 응답이 올바른지 확인하고 필요에 따라 서버에서 반환된 데이터를 가져와 페이지 콘텐츠를 업데이트합니다. rree

AJAX 작업 중 3.5가지 상태(readyState)

실제 AJAX 작업에서는 XMLHttpRequest(XHR)에 대한 액세스가 한꺼번에 완료되지 않습니다. AJAX에는 각각 5가지 상태가 있습니다. 이 5가지 상태는 각각 AJAX 엔진에 의해 전환되고 설정됩니다.

0: XHR이 정의되었지만 아직 초기화되지 않았습니다.

1: send() 메서드가 호출되고 요청이 전송되는 중입니다. 요청이 전송된 후 응답 수신을 기다리기 시작합니다.

2 : 응답 수신 완료

3: 응답 내용 파싱 중

4: 응답 내용 파싱이 완료되어 클라이언트 호출로 반환

의 경우 위의 상태는 "0" 상태 정의 후 자동으로 획득되는 상태 값으로, 접속 성공 상태(정보 획득)에 대해서는 주로 "4"를 사용하여 판단한다.

상태가 전환될 때마다 onreadystatechange

이벤트

가 발생하므로 전체 프로세스에서 onreadystatechange 이벤트가 5번 발생한다는 점에 주목할 필요가 있습니다

4. AJAX 장점 단점

장점

가장 큰 포인트는 페이지가 새로고침되지 않고 소통이 된다는 점이다. 중단 없이 페이지 내 서버를 사용하면 사용자 작업이 보다 신속하게 응답하여 사용자에게 매우 좋은 경험을 제공합니다.

2. 서버의 부담을 줄입니다. Ajax의 원칙은 "요청 시 데이터 가져오기"로, 중복된 요청과 응답으로 인해 발생하는 서버의 부담을 최소화할 수 있습니다.

단점

1. Ajax는 뒤로 버튼을 종료하여 브라우저의 뒤로 메커니즘을 파괴합니다.

2. 검색엔진에 대한 지원이 상대적으로 약합니다.

위 내용은 JavaScript AJAX에 대한 간단한 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿