Ajax 기술 의 XML HttpRequest (제1 편)

Ajax 는 모두 Asynchronous JavaScript + XML (비동기 JavaScript 와 XML) 이 라 고 하 며 브 라 우 저 를 새로 고치 지 않 은 상태 에서 페이지 의 데 이 터 를 업데이트 할 수 있 습 니 다.
Ajax 의 실현 방식 은 주로 다음 과 같은 네 가지 가 있다.

- XMLHttpRequest（     ）（2005 ）

- jQuery.ajax（    ）

- fetch    async await（     ，  Promise ECMAScript 2015 (ES6)）

- axios （    ，  Promise，vue          ）

Ajax 의 탄생 은 브 라 우 저 를 새롭게 만 들 었 고 기술 이 발전 하면 서 전단 의 인터페이스 호출 이 매우 간편 해 졌 다.오늘 여러분 과 함께 아 약 스 의 4 대 문 파 를 이야기 하 겠 습 니 다.
4 대 문 파 의 XML HttpRequest
2005 년 에 태 어 난 이 문 파 는 현존 하 는 문 파 중 가장 먼저 탄생 했다.그러나 그것 은 창시자 가 아니 었 다. 진정한 조상 은 XML HTTP ActiveX 였 다. 유명한 마이크로소프트 회 사 는 1999 년 에 출시 되 었 고 IE5 에서 실현 되 었 으 며 표준 에 없 었 기 때문에 나중에 폐기 되 었 다.IE5 ~ IE6 를 호 환 하기 위해 XML HTTP ActiveX 를 기록 합 니 다. 이 방법 은 기본적으로 역사 무대 에서 물 러 났 기 때문에 여러분 이 알 아 보시 면 됩 니 다.
오늘 이 편 은 XMLHttpRequest 에 중점 을 두 고 XHR 라 고 약칭 합 니 다.상위 코드: html 페이지 파일

js 파일

window.onload = function () {
    let xhr = new XMLHttpRequest()
    xhr.open('get', 'http://jsonplaceholder.typicode.com/posts/1')
    xhr.send(null)

    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                let data = JSON.parse(xhr.responseText)
                document.querySelector('#showData').innerHTML = data.title
            }
        }
    }
}

페이지 에 새 데 이 터 를 표시 하고 비동기 호출 에 성공 한 것 을 볼 수 있 습 니 다.onreadystatechange 방법 은 ready State 의 상태 변 화 를 감청 합 니 다. ready State 의 값 이 4 (성공 획득) 로 돌아 갈 때 xhr. response Text 는 서버 의 데 이 터 를 받 고 비동기 호출 이 완료 되 더 라 도 다음은 DOM 을 조작 하 는 것 입 니 다.
ie5 ~ ie6 의 쓰기 겸용

let xhr
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest()
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP")
}

ready State 의 다섯 가지 상태

0 (    )： (XMLHttpRequest)      ，      open()  。
1 (  )：    open()   ，       。
2 (    )：         。
3 (  )：           。
4 (  )：          ，        。

open()
XML HttpRequest. open () 은 괄호 안에 있 는 매개 변 수 를 입력 하 는 가장 높 은 주파수 로 설정 하 는 방법 입 니 다.

open(method,url,async)

method: 요청 한 형식;GET 또는 POST url: 서버 에 있 는 파일 의 위치 async: true (비동기) 또는 false (동기 화)
post 요청

//   post  
xmlhttp.open("POST","http://jsonplaceholder.typicode.com/posts",true);
xmlhttp.send()

//       post  
xmlhttp.open("POST","url",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");