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에는 다음과 같은 상태가 있습니다.

0 요청이 초기화되지 않았고, open 메소드가 아직 호출되지 않았습니다.

1 서버 연결이 설정되었으며, open 메소드가 호출되었으며, send 메소드가 아직 호출되지 않았습니다.

2 요청이 즉, 헤더 정보를 받았습니다

3 요청을 처리하는 중이며, 이때 응답 본문도 수신되므로 응답 및 http 헤더가 불완전하므로 일부를 가져오는 경우 오류가 발생합니다.

4 요청이 완료되었으며, 이때 responseXml 및 responseText를 통해 완전한 데이터를 얻을 수 있습니다.

xhr.status 일반적인 HTTP 상태

0**: 초기화되지 않음

1**: 요청 수신, 계속 처리

2**: 작업이 성공적으로 수신, 분석 및 수락됨

3**: 이 요청 완료는 추가 처리가 필요함

4**: 요청에 잘못된 구문이 포함되어 있거나 완료할 수 없습니다.

5**: 서버가 완전히 유효한 요청을 실행하지 못했습니다.

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- 함수의 성공 방법이

$.ajax인지 여부 성공적인 콜백을 받으면 jQuery는 다음과 같은 상태를 확인합니다. 소스 코드에 다음 코드가 있습니다(약 8193행)

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

304---일반적으로 브라우저라고 합니다. 서버도 클라이언트에 캐싱이 있음을 알려줍니다. 원래 캐시된 문서는 계속 사용할 수 있습니다.

async-boolean

async. 이 상황은 비동기식입니다. 즉, Ajax가 요청을 보낸 후 서버가 반환되기를 기다리는 동안 프런트 데스크는 ajax 블록 뒤에 있는 스크립트를 계속 실행합니다. 즉, 이번에는 ajax 블록이 요청을 보낸 후 두 개의 스레드가 실행됩니다. ajax 블록 뒤의 스레드 및 스크립트(다른 스레드)

asyn이 false로 설정되면 ajax 요청이 동기화됩니다. 즉, 이때 ajax 블록이 요청을 보낸 후 fn1()에서 대기합니다. , fn1() 부분이 실행될 때까지 fn2()를 실행하지 않습니다.

dataType--문자열

dataType은 다음 값을 지정할 수 있습니다. ​

xml: JQuery로 처리할 수 있는 XML 문서를 반환합니다.

html: 포함된 스크립트 태그가 실행될 일반 텍스트 HTML 정보를 반환합니다. DOM

script에 삽입될 때: 일반 텍스트 JavaScript 코드를 반환합니다. 결과는 자동으로 캐시되지 않습니다. 캐시 매개변수가 설정되지 않은 경우. (동일한 도메인이 아닌) 원격 요청을 할 때 모든 게시 요청은 가져오기 요청

json: JSON 데이터 반환

jsonp: JSONP 형식으로 변환됩니다. myurl?callback=?과 같은 SONP 형식을 사용하여 함수를 호출하면 JQuery는 콜백 함수를 실행하기 위해 마지막 "?"를 올바른 함수 이름으로 자동으로 바꿉니다. -function

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

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

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

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