При использовании AJAX для взаимодействия с информацией, если информация, возвращаемая сервером, является относительно большой, потоковой дисплей будет более дружественным по сравнению с унифицированным дисплеем после завершения передачи.
Потоковая реализация
Принцип состоит в том, чтобы установить таймер, регулярно просматривать статус объекта Ajax и обновлять контент. Если передача завершена, таймер будет отменен.
Кода -копия выглядит следующим образом:
Функция ajax_stream (url, data, element) {
var xmlhttp = null;
if (window.xmlhttprequest)
{// код для IE7, Firefox, Opera и т. Д.
xmlhttp = new xmlhttprequest ();
}
иначе 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 ("контент-тип", "Application/xww-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 (data);
вернуть данные;
}