Ajax 요청 과정 및 요청 방법 설명(코드 예시)

이 글은 ajax 요청 프로세스와 요청 방법에 대한 설명(코드 예제)을 제공합니다. 이는 특정 참조 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

ajax의 전체 이름은 비동기식 JavaScript 및 XML입니다. 여기서 비동기식은 비동기식을 의미하며 이는 기존 웹 개발에 사용되는 동기식 방법과 다릅니다. 편집자의 지식에 따르면 ajax는 오래 전부터 사용되었지만 나중에 Google에서 사용하기가 매우 편리하고 페이지가 필요하지 않았습니다. 새로 고쳐졌고 사용자 경험이 매우 좋았습니다(당시 웹 사이트에는 사용자 경험이 없었습니다^_^)

ajax 원리

XMLHttpRequest는 ajax의 핵심 메커니즘으로 IE5에서 처음 도입되었습니다. 비동기 요청을 지원하는 기술입니다. 간단히 말하면, 자바스크립트는 사용자를 차단하지 않고 적시에 서버에 요청하고 응답을 처리할 수 있어 페이지 새로 고침이 없는 효과를 얻을 수 있습니다

var xhr = new XMLHttpRequest()
//IE浏览器使用var xhr = new ActiveXObject
xhr.open('get', url, true)
xhr.send(null)
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            success(xhr.responseText)
        } else {
            fail && fail(xhr.status)
        }
    }
}

xhr.open()

세 번째 매개변수: true/fasle 기본값 true
false인 경우 계속하기 전에 데이터가 반환될 때까지 기다리는 것을 의미합니다. 데이터를 얻지 못하면 데이터를 얻을 때까지 거기에 머물러 있습니다.
True는 기다리지 않고 직접 반환하는 것을 의미합니다. 이것은 소위 비동기 데이터 수집입니다!

xhr.send

전송할 데이터는 문자열 유형을 허용합니다.

xhr.onreadystatechange

상태가 변경될 때마다 트리거되는 이벤트 핸들러

xhr.readyState에는 다음과 같은 상태가 있습니다.

xhr.status 일반적인 HTTP 상태

jQuery.ajax

$.ajax({
    url: '',
    Type: '',
    data: '',
    async:true,
    dataType: '',
    beforeSend: function(xhr) {
      xhr.setRequestHeader("Access-Toke");
    },
    success: function (data) {
        fn1()
    },
    error: function (err) {
       error && error(err) 
    }
})
fn2()

로그인 후 복사

success- 함수의 성공 방법이

isSuccess = status >= 200 && status < 300 || status === 304

async-boolean

dataType--문자열

요청을 보내기 전에 사용자 정의 HTTP 헤더를 추가하는 등 XMLHttpRequest 객체의 기능을 수정할 수 있습니다. beforeSend에서 false가 반환되면 이 ajax 요청을 취소할 수 있습니다. XMLHttpRequest 객체는 유일한 매개변수입니다

ajax의 장점과 단점장점: 비동기를 통해 사용자 경험을 개선하고, 불필요한 데이터 왕복을 줄이고, 로컬 새로 고침을 달성합니다.

단점: 검색 엔진에 대한 지원이 상대적으로 약함

위 내용은 Ajax 요청 과정 및 요청 방법 설명(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!