เมื่อใช้ AJAX สำหรับการโต้ตอบข้อมูลหากข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์มีขนาดค่อนข้างใหญ่จอแสดงผลสตรีมมิ่งจะเป็นมิตรมากขึ้นเมื่อเทียบกับจอแสดงผลแบบรวมหลังจากการส่งเสร็จสมบูรณ์
การใช้งานการสตรีมมิ่ง
หลักการคือการตั้งค่าตัวจับเวลาดูสถานะของวัตถุ AJAX เป็นประจำและอัปเดตเนื้อหา หากการส่งเสร็จสมบูรณ์ตัวจับเวลาจะถูกยกเลิก
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น ajax_stream (url, data, element) {
var xmlhttp = null;
if (window.xmlhttprequest)
{// รหัสสำหรับ IE7, Firefox, Opera ฯลฯ
xmlhttp = ใหม่ xmlhttprequest ();
-
อื่นถ้า (window.activexobject)
{// รหัสสำหรับ IE6, IE5
xmlhttp = new ActiveXObject ("Microsoft.xmlhttp");
-
if (xmlhttp == null)
-
การแจ้งเตือน ("เบราว์เซอร์ของคุณไม่รองรับ XMLHTTP");
element.val ('เบราว์เซอร์ของคุณไม่รองรับ XMLHTTP คลิกลิงก์บันทึกเพื่อตรวจสอบขั้นตอน');
กลับ 0;
-
var xhr = xmlhttp;
xhr.open ('โพสต์', url, true);
// หากคุณต้องการข้อมูลโพสต์เช่นแบบฟอร์ม HTML ให้ใช้ SetRequestHeader () เพื่อเพิ่มส่วนหัว HTTP จากนั้นระบุข้อมูลที่คุณต้องการส่งในวิธีการส่ง ():
XHR.SetRequestHeader ("ประเภทเนื้อหา", "แอปพลิเคชัน/x-www-form-urlencoded");
XHR.Send (ข้อมูล);
ตัวจับเวลา var;
timer = window.setInterval (function () {
if (xhr.readystate == xmlhttprequest.done) {
window.cleartimeout (ตัวจับเวลา);
-
element.val (xhr.responsetext);
}, 1,000);
-
โพสต์การแปลงข้อมูล
เนื่องจากการใช้งานในการใช้งานมาตรฐานสามารถยอมรับอินพุตประเภทต่อไปนี้ได้เท่านั้นจึงจำเป็นต้องแปลงวัตถุข้อมูลที่จะส่งผ่านเป็นรูปแบบสตริงหรือฟอร์ดูดาล่วงหน้าซึ่งไม่สะดวกเท่ากับ jQuery อย่างไรก็ตามไม่มีใครรู้ว่า jQuery สามารถใช้การตอบสนองของเหตุการณ์ในช่วงกลางของการส่งได้อย่างไรดังนั้นจึงไม่สามารถใช้งานได้และคุณอาจแปลงวัตถุทั้งหมดเป็น JSON
การคัดลอกรหัสมีดังนี้:
โมฆะส่ง ();
โมฆะส่ง (ข้อมูล ArrayBuffer);
โมฆะส่ง (ข้อมูลหยด);
โมฆะส่ง (ข้อมูลเอกสาร);
โมฆะส่ง (domstring? data);
เป็นโมฆะส่ง (ข้อมูลฟอร์ดาทา);
ต่อไปนี้เป็นรหัสการแปลง หากเบราว์เซอร์รองรับ formData มันจะถูกแปลงมิฉะนั้นจะถูกแปลงเป็นสตริง
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น ajax_generate_data (jsobj) {
var i;
if (window.formdata) {
ข้อมูล var = new FormData ();
สำหรับฉันใน jsobj {
data.append (i, jsobj [i]);
-
} อื่น {
var data = '';
var datas = [];
สำหรับฉันใน jsobj {
// สำหรับค่าเพื่อให้เป็นไปได้และมีอยู่ในสตริงจะไม่ทำลายรูปแบบ
var value = encodeuricomponent (jsobj [i]);
dataS.Append (i + '=' + ค่า);
-
data = dataS.oin ('&')
-
console.log (ข้อมูล);
ส่งคืนข้อมูล
-