>웹 프론트엔드 >JS 튜토리얼 >JavaScript는 AJAX_stream을 결합하여 스트리밍 display_javascript 기술을 구현합니다.

JavaScript는 AJAX_stream을 결합하여 스트리밍 display_javascript 기술을 구현합니다.

WBOY
WBOY원래의
2016-05-16 16:21:391382검색

정보 상호 작용을 위해 AJAX를 사용할 때 서버에서 반환하는 정보가 상대적으로 크면 전송이 완료된 후 통합 디스플레이보다 스트리밍 디스플레이가 더 친숙합니다.

스트리밍 구현

타이머를 설정하고 정기적으로 AJAX 객체의 상태를 확인하여 내용을 업데이트하는 것이 원칙입니다. 전송이 완료되면 타이머를 취소하세요.

코드 복사 코드는 다음과 같습니다.

함수 ajax_stream(url,data,element) {
var xmlHttp=null;
If (window.XMLHttpRequest)
{// IE7, Firefox, Opera 등용 코드
xmlHttp=새 XMLHttpRequest();
}
​ else if (window.ActiveXObject)
{// IE6, IE5용 코드
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
If (xmlHttp==null)
          {
Alert("귀하의 브라우저는 XMLHTTP를 지원하지 않습니다.");
         element.val('귀하의 브라우저는 XMLHTTP를 지원하지 않습니다. 절차를 모니터링하려면 로그 링크를 클릭하세요.');
0을 반환합니다;
}
var xhr = xmlHttp;
xhr.open('POST', url, true);
// HTML 양식과 같이 데이터를 POST해야 하는 경우 setRequestHeader()를 사용하여 HTTP 헤더를 추가하세요. 그런 다음 send() 메소드에 보내려는 데이터를 지정하십시오.
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(데이터);
변수 타이머;
타이머 = window.setInterval(function() {
If (xhr.readyState == XMLHttpRequest.DONE) {
               window.clearTimeout(타이머);
}
          element.val(xhr.responseText);
}, 1000);
}

데이터 변환 후

표준 구현에서 전송은 다음 유형의 입력만 허용할 수 있으므로 전송해야 하는 데이터 개체를 미리 문자열 또는 FormData 형식으로 변환해야 합니다. 이는 JQuery만큼 편리하지 않지만 JQuery는 어떻게 수행합니까? 전송 중에 구현하나요? 이벤트 응답을 아직 알 수 없어 사용할 수 없거나 모든 개체를 JSON으로 변환할 수 없습니다.

코드 복사 코드는 다음과 같습니다.

무효 보내기();
무효 전송(ArrayBuffer 데이터);
보내기 무효(Blob 데이터);
발송 무효(문서 데이터);
무효 전송(DOMString? 데이터);
무효 전송(FormData 데이터);

다음은 변환 코드입니다. 브라우저가 FormData를 지원하면 변환되고, 그렇지 않으면 문자열로 변환됩니다.

코드 복사 코드는 다음과 같습니다.

함수 ajax_generate_data(jsobj) {
var i;
If (window.FormData) {
      var data = new FormData();
           jsobj의 i용 {
              data.append(i,jsobj[i]);
}
} 그 밖의 {
      var 데이터 = '';
        var 데이터 = [];
           jsobj의 i용 {
// 문자열에 포함된 &가 형식을 깨뜨리지 않도록 값에 대해
              var 값 = encodeURIComponent(jsobj[i]);
              datas.append(i '=' 값);
}
          데이터 = datas.join('&')
}
console.log(데이터);
데이터 반환;
}
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.