Ajax 시리즈의 첫 번째 부분에서 XHR 객체에 대한 심층적인 이해

ajax는 비동기식 javascript와 XML의 약어입니다. 중국어 번역은 asynchronous javascript와 XML입니다. 이 기술은 페이지를 언로드하지 않고도 서버에서 추가 데이터를 요청할 수 있으므로 ajax에 관심이 있는 친구에게 도움이 됩니다. ajax 시리즈의 첫 번째 기사인 XHR 객체를 살펴보세요.

앞의 단어

Ajax는 비동기식 javascript 및 XML의 약어입니다. 이 기술은 비동기식 javascript 및 XML입니다. 페이지를 언로드하지 않고 서버에서 데이터를 가져오면 더 나은 사용자 경험이 제공됩니다. 이름에는 XML이 들어있지만 Ajax 통신은 데이터 형식과 아무런 관련이 없습니다. ajax의 내용은 아래에서 자세히 소개하겠습니다

Creation

ajax 기술의 핵심은 XMLHttpRequest 객체(약칭 XHR)로, 이는 Microsoft에서 처음 선보인 기능이며, 이후 다른 브라우저 제공업체에서도 제공하는 기능입니다. 같은 성취. XHR은 서버에 요청을 보내고 서버 응답을 구문 분석하기 위한 원활한 인터페이스를 제공합니다. 서버에서 비동기적으로 더 많은 정보를 얻을 수 있습니다. 즉, 사용자가 클릭한 후 페이지를 새로 고치지 않고도 새 데이터를 얻을 수 있습니다

　 IE5는 최초입니다. XHR 객체를 소개하는 브라우저. IE5에서 XHR 개체는 MSXML 라이브러리의 ActiveX 개체를 통해 구현되는 반면 IE7+ 및 기타 표준 브라우저는 기본 XHR 개체를 지원합니다

　XHR 개체를 생성하는 것은 XMLHTTPRequest()가 생성자이기 때문에 XHR 개체 인스턴스화라고도 합니다. 다음은 XHR 객체를 생성하는 호환 가능한 방법입니다

var xhr;
if(window.XMLHttpRequest){
  xhr = new XMLHttpRequest();
}else{
  xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

요청 보내기

open()

XHR 객체를 사용할 때 호출되는 첫 번째 방법은 open입니다. (), 3가지 매개변수를 허용합니다: 전송할 요청 유형("get", "post" 등), 요청된 URL 및 요청을 비동기적으로 보낼지 여부를 나타내는 부울 값

xhr.open("get","example.php", false);

　[참고] URL은 상대 코드입니다. 코드가 실행되는 현재 페이지에만 적용되며, 동일한 포트 및 프로토콜을 사용하는 동일한 도메인의 URL에만 요청을 보낼 수 있습니다. URL이 요청을 시작한 페이지와 다른 경우 보안 오류가 발생합니다. send() 메서드는 요청 본문으로 전송될 데이터인 매개변수를 받습니다. send() 메소드를 호출한 후 요청은 서버로 전달됩니다

xhr.open("get", "example.txt", false);
xhr.send(null);

Receive response

응답을 받은 후 응답 데이터는 자동으로 XHR 개체의 속성을 채웁니다. , 주로 다음 4가지 속성을 포함합니다. responseText: 응답 본문으로 반환된 텍스트 responseXML: 응답의 콘텐츠 유형이 'text/xml' 또는 'application/xml'인 경우 이 속성은 XML DOM 문서를 보유합니다. of the response data

status : 응답의 HTTP 상태

statusText: HTTP 상태 설명

응답을 받은 후 첫 번째 단계는 상태 속성을 확인하여 응답이 성공적으로 반환되었는지 확인하는 것입니다. 일반적으로 HTTP 상태 코드 200은 성공의 신호로 사용될 수 있습니다. 이 시점에서 responseText 속성의 컨텐츠가 준비되었으며 컨텐츠 유형이 올바른 경우 responseXML에도 액세스할 수 있습니다. 또한 상태 코드 304는 요청한 리소스가 수정되지 않았음을 의미하며 브라우저에 캐시된 버전을 직접 사용할 수 있다는 의미이기도 합니다.

　 콘텐츠 유형에 관계없이 응답 본문의 내용은 responseText 속성에 저장되며, XML이 아닌 데이터의 경우 responseXML 속성 값은 요청/응답 프로세스의 현재 활성 단계를 나타내는 속성입니다. 이 속성에 가능한 값은 다음과 같습니다:

0 (UNSENT): 초기화되지 않았습니다. open() 메소드가 아직 호출되지 않았습니다

1(OPENED): 시작합니다. open() 메소드가 호출되었지만 send() 메소드가 호출되지 않았습니다.

2 (HEADERS_RECEIVED): Send. send() 메소드가 호출되었으며 헤더 정보

3(LOADING)이 수신되었습니다. 응답 본문 정보의 일부가 수신되었습니다

4(완료): 완료되었습니다. 모든 응답 데이터가 수신되어 클라이언트에서 사용될 수 있습니다. ReadyState 속성 값이 한 값에서 다른 값으로 변경될 때마다 Readystatechange 이벤트가 트리거됩니다. 이 이벤트를 사용하여 각 상태 변경 후 ReadyState 값을 감지할 수 있습니다. 일반적으로 우리는 ReadyState 값이 4인 단계에 관심이 있습니다. 왜냐하면 이때 모든 데이터가 준비되어 있기 때문입니다

　 [참고] 브라우저 간 호환성을 보장하려면 open()을 호출하기 전에 onreadystatechange 이벤트 핸들러를 지정해야 합니다. ReadyState 속성이 0, 1인 경우

if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
  alert(xhr.responseText);
}else{
  alert(&#39;request was unsuccessful:&#39; + xhr.status);
}

Example

다음은 ajax

xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){
    if(xhr.status == 200){
      alert(xhr.responseText);
    }
  }
}

/에서 xhr 객체를 적용하는 간단한 예제입니다. /message.xml

<button id="btn">获取信息</button>
<p id="result"></p>
<script>
btn.onclick = function(){
  //创建xhr对象
  var xhr;
  if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
  }else{
    xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
  }
  //异步接受响应
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        //实际操作
        result.innerHTML += xhr.responseText;
      }
    }
  }
  //发送请求
  xhr.open(&#39;get&#39;,&#39;message.xml&#39;,true);
  xhr.send();
}
</script>

예제 시연을 통해 Ajax 프론트엔드의 내용 자체는 어렵지 않다는 것을 알 수 있었습니다. 그러나 Ajax에는 백엔드 및 네트워크 지식이 일부 포함되어 있기 때문에 배우기가 쉽지 않습니다. 앞으로의 블로그 포스팅에서는 ajax의 주요 내용을 차차 심도있게 소개하겠습니다

위는 편집자가 XHR 객체에 대해 소개한 ajax 시리즈의 심층적 이해의 첫 번째 글입니다. 모두에게 도움이 되었으면 좋겠습니다!

관련 권장 사항:

AJAX 페이징 효과의 간단한 구현에 대한 자세한 설명

Ajax 제출 양식 및 json 수신 방법

진행률 표시줄을 사용한 간단한 Ajax 구현 설명

위 내용은 Ajax 시리즈의 첫 번째 부분에서 XHR 객체에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!