지역 사회

배우다

도구 라이브러리

AI 도구

여가

한국어

AJAX 중국어 참조 매뉴얼

읽다（32716） 업데이트 시간(2022-04-12)

"AJAX 중국어 참조 매뉴얼"에서 AJAX는 새로운 프로그래밍 언어가 아니라 기존 표준을 사용하는 새로운 방법입니다. AJAX는 전체 페이지를 다시 로드하지 않고 서버와 데이터를 교환하고 웹 페이지의 일부를 업데이트하는 기술입니다.

AJAX는 "Asynchronous JavaScript and XML"(비동기 JavaScript 및 XML 기술)을 의미하며, 여러 기술을 결합한 일련의 브라우저 측 웹 개발 기술을 나타냅니다. Ajax의 개념은 Jesse James Jarrett이 제안했습니다.

기존 웹 애플리케이션에서는 사용자가 양식을 작성할 수 있으며, 양식이 제출되면 요청이 웹 서버로 전송됩니다. 서버는 들어오는 양식을 수신하고 처리한 다음 새 웹 페이지를 다시 보내지만 두 페이지의 HTML 코드 대부분이 동일하기 때문에 대역폭이 많이 낭비됩니다. 각 애플리케이션 통신에는 서버에 요청을 보내야 하므로 애플리케이션의 응답 시간은 서버의 응답 시간에 따라 달라집니다. 이로 인해 기본 앱보다 응답 속도가 훨씬 느린 UI가 생성됩니다.

이와 달리 AJAX 애플리케이션은 필요한 데이터만 서버에 보내고 가져올 수 있으며, 클라이언트에서 JavaScript를 사용하여 서버의 응답을 처리할 수 있습니다. 서버와 브라우저 간에 교환되는 데이터가 적기 때문에 서버의 응답 속도가 더 빠릅니다. 동시에 요청을 수행하는 클라이언트 시스템에서 많은 처리 작업이 완료될 수 있으므로 웹 서버의 부하도 줄어듭니다.

팁: AJAX를 배우기 전에 HTML, CSS, javascript에 대한 기본적인 이해가 있어야 합니다.

DHTML이나 LAMP와 마찬가지로 AJAX는 단일 기술을 의미하지 않고 일련의 관련 기술을 유기적으로 활용합니다. 이름에는 XML이 포함되어 있지만 데이터 형식은 실제로 JSON으로 대체될 수 있으므로 데이터 양이 더욱 줄어들어 AJAJ라는 것이 형성됩니다. 클라이언트와 서버는 비동기식일 필요는 없습니다.

AJAX 최초 사용

Instance

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tryrun 1</title>
</head>
<body>
    <div id="view">
        <p>点击下面的按钮，将 Ajax 请求回来的数据更新在该文本内</p>
    </div>
    <button type="button" id="btn">发起 Ajax 请求</button>

    <script>
        document.getElementById("btn").onclick = ajaxRequest;

        function ajaxRequest () {
            var xhr = new XMLHttpRequest();

            xhr.open("GET", "https://www.php.cn/statics/demosource/ajax_info.txt", true);
            xhr.send();

            xhr.onreadystatechange = function(){
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById("view").innerHTML = xhr.responseText;
                }                
            }
        }
    </script>
</body>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

팁: 저희 AJAX 튜토리얼은 AJAX를 마스터하고 적용하는 방법을 단계별로 배우는 데 도움이 됩니다. 질문이 있는 경우 PHP 중국어 웹사이트 AJAX 커뮤니티로 이동하여 질문하면 열정적인 네티즌이 답변해 드립니다. 당신을 위해.

AJAX 장점과 단점

Ajax를 사용하는 가장 큰 장점은 전체 페이지를 업데이트하지 않고도 데이터를 유지할 수 있다는 점입니다. 이를 통해 웹 애플리케이션은 사용자 작업에 더 빠르게 응답하고 네트워크를 통해 변경되지 않은 정보를 보내는 것을 방지할 수 있습니다.
Ajax에는 브라우저 플러그인이 필요하지 않지만 사용자가 브라우저에서 JavaScript를 실행할 수 있도록 허용해야 합니다. DHTML 애플리케이션과 마찬가지로 Ajax 애플리케이션도 다양한 브라우저와 플랫폼에서 엄격하게 테스트되어야 합니다. Ajax가 성숙해짐에 따라 Ajax 사용을 단순화하는 일부 프로그램 라이브러리도 나왔습니다. 마찬가지로, JavaScript를 지원하지 않는 사용자에게 대체 기능을 제공하기 위해 또 다른 보조 프로그래밍 기술이 등장했습니다.
Ajax 사용에 대한 주요 비판은 브라우저의 뒤로 및 북마크 기능을 손상시킬 수 있다는 것입니다. 동적으로 업데이트되는 페이지의 경우 브라우저는 기록에서 정적 페이지만 기억할 수 있으므로 사용자는 이전 페이지 상태로 돌아갈 수 없습니다. 완전히 읽힌 페이지와 동적으로 수정된 페이지 사이의 차이는 매우 미미합니다. 사용자는 종종 이전 작업을 취소하기 위해 뒤로 버튼을 클릭할 것으로 예상하지만 Ajax 애플리케이션에서는 그렇지 않습니다. 그렇게 하려면. 그러나 개발자들은 이 문제를 해결하기 위해 다양한 방법을 고안해냈습니다. HTML5 이전의 대부분의 방법은 사용자가 기록에 액세스하기 위해 뒤로 버튼을 클릭할 때 페이지의 변경 사항을 재현하기 위해 숨겨진 IFRAME을 생성하거나 사용하는 것이었습니다. (예를 들어 사용자가 Google 지도에서 다시 클릭하면 숨겨진 IFRAME에서 검색한 다음 검색 결과를 Ajax 요소에 반영하여 애플리케이션 상태를 당시의 상태로 복원합니다.)
즐겨찾기나 북마크에 상태를 추가할 수 없는 문제와 관련하여 HTML5 이전의 한 가지 방법은 URL 조각 식별자(종종 앵커라고 함, URL에서 # 다음 부분)를 사용하여 추적하고 사용자가 다음을 수행할 수 있도록 하는 것이었습니다. 지정된 애플리케이션 상태로 돌아갑니다. (많은 브라우저는 JavaScript가 앵커를 동적으로 업데이트하도록 허용하므로 Ajax 애플리케이션은 표시된 콘텐츠를 업데이트하는 동안 앵커를 업데이트할 수 있습니다.) HTML5는 나중에 검색 기록을 직접 조작하고, 웹 페이지 상태를 문자열로 저장하고, 웹 페이지를 웹 즐겨찾기에 추가할 수 있습니다. 클리핑이나 북마크할 때 상태는 눈에 보이지 않게 유지됩니다. 위의 두 가지 방법은 동시에 후퇴할 수 없는 문제도 해결할 수 있습니다.
Ajax를 개발할 때 네트워크 대기 시간, 즉 사용자가 요청하고 서버가 응답을 보내는 사이의 간격을 신중하게 고려해야 합니다. 사용자에게 명확한 응답을 제공하지 않거나, 데이터를 제대로 미리 읽지 않거나, XMLHttpRequest를 부적절하게 처리하면 사용자는 지루함을 느끼게 됩니다. 일반적인 솔루션은 시각적 구성 요소를 사용하여 시스템이 백그라운드 작업을 수행하고 데이터와 콘텐츠를 읽고 있음을 사용자에게 알리는 것입니다.

Application

XHTML+CSS를 사용하여 정보를 표현합니다.
JavaScript를 사용하여 DOM(Document Object Model)을 작동하여 동적 효과를 실행합니다.
XML 및 XSLT를 사용하여 데이터를 작동합니다.
XMLHttpRequest 또는 새로운 Fetch API를 사용하면 웹 서버와 비동기 데이터 교환이 수행됩니다.

참고:

AJAX는 Flash, Silverlight 및 Java Applet과 같은 RIA 기술과 다릅니다.
이 AJAX 튜토리얼 매뉴얼에서 다루는 내용

이 AJAX 튜토리얼 매뉴얼은 AJAX 시작하기, AJAX 소개, AJAX 예제, XHR 생성 개체, XHR 요청, XHR 응답, XHR ReadyState, AJAX를 포함하여 AJAX의 모든 기본 사용 방법을 다룹니다. ASP/PHP, AJAX 데이터베이스, AJAX XML 및 기타 지식.

팁:

이 튜토리얼의 각 장에는 많은 AJAX 예제가 포함되어 있습니다. "예제 실행" 버튼을 직접 클릭하면 온라인에서 결과를 볼 수 있습니다. 이러한 예는 AJAX를 더 잘 이해하고 사용하는 데 도움이 됩니다.

최신 장

AJAX 实例 2016-10-19

AJAX XML 2016-10-19

AJAX 数据库 2016-10-19

AJAX ASP/PHP 2016-10-19

XHR readystate 2016-10-19

XHR 响应 2016-10-19

XHR 请求 2016-10-19

XHR 创建对象 2016-10-19

관련 강좌

웹 프론트 엔드 개발에 대한 빠른 소개 2021-12-10

당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본] 2022-09-30

Gulp 시작하기 비디오 튜토리얼 2022-04-18

전우 Gao Luofeng CSS3 비디오 튜토리얼 2022-04-20

AngularJS 개발 웹 애플리케이션 기본 예제 비디오 튜토리얼 2022-04-18

Ajax 전체 접촉 2022-04-13

MUI 프레임워크 기본 비디오 튜토리얼 2022-04-13

온라인 교육 수업 체험 수업 2019-01-10

제출하다