AJAX를 통해 비동기 요청을 만드는 방법

오늘은 AJAX를 통해 비동기 요청을 하는 방법을 공유하겠습니다. 이는 특정 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

AJAX 정의

AJAX는 Asynchronous JavaScript + XML의 약어로,

페이지를 다시 로드할 필요 없이 JavaScript를 통해 서버의 최신 콘텐츠를 직접 얻을 수 있습니다. 웹을 더욱 사용자 친화적으로 만드십시오. 실제로 AJAX는 브라우저에서 제공하는 API 세트로, 코드를 통해 요청과 응답을 제어하기 위해 JavaScript를 통해 호출할 수 있습니다.

HTTP는 요청-응답 프로토콜입니다. 즉, 브라우저가 웹 서버에 요청을 하면 웹 서버가 응답을 생성하여 브라우저로 다시 보내고, 브라우저는 해당 텍스트를 사용자에게 시각적으로 표시합니다. 그러나 페이지의 작은 부분만 업데이트해야 하는 경우 AJAX를 사용한 다음 브라우저의 DOM 모델을 사용하여 응답을 페이지에 동적으로 삽입해야 합니다.

AJAX 비동기 요청의 4단계

(1) 브라우저용 XMLHttpRequest 객체 생성

var xhr = new XMLHttpRequest();

(2) 서버에 요청을 보내는 함수 생성:

xhr.open('GET', './demo.php');

(3) 하나의 요청은 다음을 통해 발생합니다. 연결

xhr.send(string);

(4) xhr 상태 변경 이벤트 처리 함수의 4가지 상태 지정

xhr.onreadystatechange = function () {
  // 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
  if (this.readyState === 4) {
    // 通过 xhr 的 responseText 获取到响应的响应体
    console.log(this)

readyState

0: xhr이 생성되었지만 open 메서드가 호출되지 않았음을 나타냅니다.

1: 연결을 설정하기 위해 open() 메서드가 호출되었습니다.

2: send() 메서드가 호출되고 상태 줄과 응답 헤더를 이미 얻을 수 있습니다.

3: 응답 본문이 로드될 때 responseText 속성에 이미 일부 데이터가 포함되어 있을 수 있습니다.

4: 응답 본문이 로드되고 responseText를 직접 사용할 수 있습니다.

예:

var xhr = new XMLHttpRequest()//0状态
xhr.open('GET', 'time.php')//1状态，open方法已经调用了，建立一个与服务端特定端口的连接
xhr.send()
xhr.addEventListener('readystatechange', function () {
})//里面包含了2，3，4三种状态，2分别为接受到了响应头但还没有接受到响应体；
正在下载响应报文；
报文下载下来处理响应体
xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
  }//处理函数

요약: 위 내용은 이 글의 전체 내용입니다. Ajax를 배우는 모든 분들께 도움이 되었으면 좋겠습니다.

위 내용은 AJAX를 통해 비동기 요청을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!