Ajax 시리즈의 XHR 객체 이해

이전 단어

1999년 Microsoft는 IE5를 출시했습니다. IE5에는 처음으로 자바스크립트 스크립트가 서버에 대한 HTTP 요청을 시작할 수 있도록 허용하는 새로운 기능이 도입되었습니다. 이 기능은 당시에는 주목을 받지 못했습니다. 2004년 Gmail과 2005년 Google 지도가 출시된 후에야 널리 주목을 받았습니다. 2005년 2월에 ajax라는 용어가 처음으로 공식적으로 제안되었으며, 이는 이 기능에 대한 일련의 개발 관행을 나타냅니다. 그 이후로 ajax는 스크립트 시작 HTTP 통신의 대명사가 되었으며 W3C도 2006년에 국제 표준을 발표했습니다. 이 기사는 ajax 시리즈의 첫 번째 기사입니다 - 개요는 더 나은 사용자 경험을 가져올 것입니다. 이름에는 XML이 포함되어 있지만 Ajax 통신은 데이터 형식과 관련이 없습니다.

Ajax에는 다음 단계가 포함됩니다. 1. AJAX 객체 생성 2. HTTP 요청 발행 3. 서버에서 반환된 데이터 수신; 페이지 데이터

요약 한 문장으로 말하면 ajax는 네이티브

객체를 통해 HTTP 요청을 보내고, 서버에서 반환된 데이터를 받은 후 이를 처리합니다.

XMLHttpRequestCreation

　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');
}

[참고] N개의 다른 요청을 생성하려면 N개의 다른 XHR 객체를 사용해야 합니다. 물론 기존 XHR 개체를 재사용하는 것이 가능하지만 이렇게 하면 해당 개체를 통해 이전에 보류 중인 요청이 모두 종료됩니다.

요청 보내기

open()

XHR 개체를 사용할 때 호출되는 첫 번째 메서드 아래와 같이 open()입니다. 이 메소드는 3개의 매개변수

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

　1을 허용합니다. open() 메소드의 첫 번째 매개변수는 요청을 보내는 방법을 지정하는 데 사용됩니다. 이 문자열은 대소문자를 구분하지 않습니다. 하지만 일반적으로 대문자를 사용합니다. "GET" 및 "POST"가 널리 지원됩니다.

"GET"은 일반 요청에 사용되며 URL이 요청된 리소스를 완전히 지정하는 경우, 요청이 서버에 부작용이 없는 경우, 서버의 응답이 다음과 같은 경우에 적합합니다. 캐시 가능

　"POST" 방법은 HTML 형식에서 일반적으로 사용됩니다. 요청 본문에 추가 데이터가 포함되며 이 데이터는 종종 서버의 데이터베이스에 저장됩니다. 동일한 URL에 대한 반복적인 POST 요청은 서버로부터 다른 응답을 받을 수 있으므로 이 방법을 사용하는 요청은 캐시되어서는 안 됩니다.

"GET" 및 "POST" 외에도 매개변수는 "HEAD", "OPTIONS", "놓다" ". 보안상의 위험으로 인해 "CONNECT", "TRACE", "TRACK"은 사용이 금지됩니다

　[참고] HTTP 프로토콜에서 일반적으로 사용되는 8가지 방법에 대한 자세한 소개는 여기로 이동합니다

　2. open() 메소드 첫 번째 매개변수는 코드가 실행되는 현재 페이지에 상대적인 URL이며, 동일한 포트 및 프로토콜을 사용하는 동일한 도메인의 URL로만 요청을 보낼 수 있습니다. URL과 요청을 시작한 페이지 간에 차이가 있으면 보안 오류가 발생합니다

3. open() 메서드의 세 번째 매개 변수는 채워지지 않은 경우 요청을 비동기적으로 보낼지 여부를 나타내는 Boolean 값입니다. , 기본값은 true이며 요청이 비동기식으로 전송됨을 나타냅니다

　4. 비밀번호로 보호된 URL을 요청하는 경우 인증에 사용되는 사용자 이름과 비밀번호를 4번째 및 5번째 매개변수로 open() 메소드

send( )

　send() 메소드는 요청 본문으로 전송될 데이터인 하나의 매개변수를 받습니다. send() 메소드를 호출한 후 요청은 서버로 전달됩니다. GET 메소드인 경우 send() 메소드에는 매개변수가 없거나 POST 메소드인 경우 매개변수는 null입니다. send() 메소드는 전송될 데이터입니다

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

응답 수신

완전한 HTTP 응답은 상태 코드, 응답 헤더 수집 및 응답 본문으로 구성됩니다. 응답을 받은 후 XHR 객체의 속성과 메서드를 통해 사용할 수 있습니다. 주로 다음과 같은 4가지 속성이 있습니다

responseText: 作为响应主体被返回的文本(文本形式)
responseXML: 如果响应的内容类型是'text/xml'或'application/xml'，这个属性中将保存着响应数据的XML DOM文档(document形式)
status: HTTP状态码(数字形式)
statusText: HTTP状态说明(文本形式)

　　在接收到响应后，第一步是检查status属性，以确定响应已经成功返回。一般来说，可以将HTTP状态码为200作为成功的标志。此时，responseText属性的内容已经就绪，而且在内容类型正确的情况下，responseXML也可以访问了。此外，状态码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的

　　无论内容类型是什么，响应主体的内容都会保存到responseText属性中，而对于非XML数据而言，responseXML属性的值将为null

if((xhr.status >=200 && xhr.status 

 

同步

　　如果接受的是同步响应，则需要将open()方法的第三个参数设置为false，那么send()方法将阻塞直到请求完成。一旦send()返回，仅需要检查XHR对象的status和responseText属性即可

　　同步请求是吸引人的，但应该避免使用它们。客户端javascript是单线程的，当send()方法阻塞时，它通常会导致整个浏览器UI冻结。如果连接的服务器响应慢，那么用户的浏览器将冻结

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

//message.xml
<p>hello world</p>

 

 

异步

　　如果需要接收的是异步响应，这就需要检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下：

0(UNSENT):未初始化。尚未调用open()方法
1(OPENED):启动。已经调用open()方法，但尚未调用send()方法
2(HEADERS_RECEIVED):发送。己经调用send()方法，且接收到头信息
3(LOADING):接收。已经接收到部分响应主体信息
4(DONE):完成。已经接收到全部响应数据，而且已经可以在客户端使用了

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

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

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

<button>获取信息</button>
<div></div>
<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>

//message.xml
<p>hello world</p>

 

超时

　　XHR对象的timeout属性等于一个整数，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止。该属性默认等于0，表示没有时间限制

　　如果请求超时，将触发ontimeout事件

　　[注意]IE8-浏览器不支持该属性

xhr.open('post','test.php',true);
xhr.ontimeout = function(){
    console.log('The request timed out.');
}
xhr.timeout = 1000;
xhr.send();

 

优化

　　使用AJAX接收数据时，由于网络和数据大小的原因，并不是立刻就可以在页面中显示出来。所以，更好的做法是，在接受数据的过程中，显示一个类似loading的小图片，并且禁用按钮；当数据完全接收后，再隐藏该图片，并启用按钮

<button>获取信息</button>
<img  src="/static/imghwm/default1.png" data-src="data:image/gif;base64,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" class="lazy" alt="Ajax 시리즈의 XHR 객체 이해" >
<div></div>
<script>
var add = (function(){
    var counter = 0;
    return function(){
        return ++counter;
    }
})();
btn.onclick = function(){
    img.style.display = &#39;inline-block&#39;;
    btn.setAttribute(&#39;disabled&#39;,&#39;&#39;);
    //创建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){
              img.style.display = &#39;none&#39;;
              btn.removeAttribute(&#39;disabled&#39;);
              var data = JSON.parse(xhr.responseText);
              var sum = add() - 1;
              if(sum < data.length){
                result.innerHTML += data[sum];    
              }
            }
        }
    }
    //发送请求
    xhr.open(&#39;get&#39;,&#39;data.php&#39;,true);
    xhr.send();
}
</script>

<?php echo json_encode([1,2,3,4,5]);
?>

드디어

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

위 내용은 Ajax 시리즈의 XHR 객체 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!