ajax의 XHR 객체에 대한 심층적인 이해-JS 튜토리얼-php.cn

ajax의 XHR 객체에 대한 심층적인 이해

php中世界最好的语言

풀어 주다： 2018-04-03 10:33:42

원래의

1437명이 탐색했습니다.

이번에는 ajax의 XHR 객체에 대해 심도 깊게 알아보겠습니다. ajax의 XHR 객체 사용 시 주의사항은 무엇인가요?

앞의 단어　Ajax는 비동기식

javascript

의 약자이며 중국어 번역은 비동기식 javascript 및 XML입니다. 이 기술은 페이지를 언로드하지 않고도 서버에 추가 데이터를 요청할 수 있으므로 더 나은 결과를 가져올 수 있습니다. 결과. 이름에는 XML이 들어있지만 Ajax 통신은 데이터 형식과 아무런 관련이 없습니다. ajax의 내용은 아래에서 자세히 소개하겠습니다

Creation ajax 기술의 핵심은 XMLHttpRequest 객체(약칭 XHR)로, 이는 마이크로소프트에서 처음 선보인 기능이며, 이후 다른 브라우저 제공업체에서 제공하는 기능입니다. 동일한 구현. 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 객체를 사용할 때 호출되는 첫 번째 메소드는 3을 허용하는 open()입니다. 매개변수: 전송할 요청 유형("get", "post" 등), 요청의 URL 및 요청을 비동기적으로 보낼지 여부를 나타내는 부울 값

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

로그인 후 복사

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

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

로그인 후 복사

서버로 전달됩니다

응답을 받은 후 응답 데이터는 주로 XHR 객체의 속성을 자동으로 채웁니다. 다음 4가지 속성

responseText: 응답 본문으로 반환되는 텍스트responseXML: 응답의 콘텐츠 유형이 'text/xml' 또는 'application/xml'인 경우 이 속성은 응답 데이터의 XML DOM 문서를 보유합니다. status: 응답의 HTTP 상태

statusText: HTTP 상태 설명

응답을 받은 후 첫 번째 단계는 상태 속성을 확인하여 응답이 성공적으로 반환되었는지 확인하는 것입니다. 일반적으로

HTTP 상태 코드

200은 성공의 신호로 간주될 수 있습니다. 이 시점에서 responseText 속성의 컨텐츠가 준비되었으며 컨텐츠 유형이 올바른 경우 responseXML에도 액세스할 수 있습니다. 또한 상태 코드 304는 요청한 리소스가 수정되지 않았음을 의미하며 브라우저에 캐시된 버전을 직접 사용할 수 있다는 의미이기도 합니다. , 응답 본문의 내용은 responseText 속성에 저장되고, XML이 아닌 데이터의 경우 responseXML 속성 값은 null

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

로그인 후 복사

asynchronous

이 됩니다. 비동기 응답을 받아야 하는 경우 응답 프로세스의 현재 활성 단계인 /The의 ReadyState 속성을 감지해야 합니다. 이 속성에 가능한 값은 다음과 같습니다:

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

1(OPENED): 시작합니다. open() 메소드가 호출되었지만 send() 메소드가 호출되지 않았습니다. 2 (HEADERS_RECEIVED): Send. send() 메소드가 호출되어 헤더 정보가 수신되었습니다. 3 (LOADING): 수신되었습니다. 응답 본문 정보의 일부가 수신되었습니다

4(완료): 완료되었습니다. 모든 응답 데이터가 수신되었으며

client

에서 사용할 수 있습니다.

　　只要readyState属性值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常，我们对readyState值为4的阶段感兴趣，因为这时所有数据都已就绪

　　[注意]必须在调用open()之前指定onreadystatechange 事件处理程序才能确保跨浏览器兼容性，否则将无法接收readyState属性为0和1的情况

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

로그인 후 복사

实例

　　下面以一个小实例来演示ajax中xhr对象的应用

<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('Microsoft.XMLHTTP');
  }
  //异步接受响应
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        //实际操作
        result.innerHTML += xhr.responseText;
      }
    }
  }
  //发送请求
  xhr.open('get','message.xml',true);
  xhr.send();
}
</script>

로그인 후 복사

//message.xml