정보 상호 작용에 AJAX를 사용하는 경우 서버에서 반환 한 정보가 비교적 크면 전송이 완료된 후 통합 디스플레이에 비해 스트리밍 디스플레이가 더 친숙합니다.
스트리밍 구현
원칙은 타이머를 설정하고 Ajax 객체의 상태를 정기적으로보고 컨텐츠를 업데이트하는 것입니다. 전송이 완료되면 타이머가 취소됩니다.
코드 사본은 다음과 같습니다.
함수 ajax_stream (url, data, element) {
var xmlhttp = null;
if (window.xmlhttprequest)
{// IE7, Firefox, Opera 등의 코드.
xmlhttp = new 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 양식과 같은 게시물 데이터가 필요한 경우 setRequestheader ()를 사용하여 HTTP 헤더를 추가하십시오. 그런 다음 send () 메소드에서 보내려는 데이터를 지정하십시오.
XHR.SetRequestHeader ( "Content-Type", "Application/X-www-form-urlencoded");
xhr.send (데이터);
var 타이머;
TIMER = Window.SetInterVal (function () {
if (xhr.readystate == xmlhttprequest.done) {
Window.clearTimeout (타이머);
}
element.val (xhr.responsetext);
}, 1000);
}
데이터 변환 후
표준 구현에서 보내는 것은 다음 유형의 입력 만 허용 할 수 있으므로 데이터 개체를 사전에 문자열 또는 FormData 형식으로 전달할 수 있도록 jQuery만큼 편리하지 않습니다. 그러나 jQuery가 전송 중간에 이벤트 응답을 어떻게 구현할 수 있는지는 알려져 있지 않으므로 사용할 수 없으며 모든 객체를 JSON으로 변환 할 수 있습니다.
코드 사본은 다음과 같습니다.
void send ();
void Send (ArrayBuffer 데이터);
void send (blob data);
void send (문서 데이터);
void send (domstring? data);
void send (formData data);
다음은 변환 코드입니다. 브라우저가 FormData를 지원하면 변환됩니다. 그렇지 않으면 문자열로 변환됩니다.
코드 사본은 다음과 같습니다.
함수 ajax_generate_data (jsobj) {
var i;
if (window.formData) {
var data = new FormData ();
jsobj {
data.append (i, jsobj [i]);
}
} 또 다른 {
var data = '';
var datas = [];
jsobj {
// 문자열에 포함 가능하고 포함 된 값의 경우 형식이 깨지지 않습니다.
var value = encodeUricomponent (jsobj [i]);
DataS.Append (i + '=' + value);
}
data = datas.join ( '&')
}
Console.log (데이터);
반환 데이터;
}