JavaScript combines AJAX_stream to implement streaming display_javascript skills

When using AJAX for information interaction, if the information returned by the server is relatively large, then streaming display is more friendly than the unified display after the transmission is completed.

Streaming implementation

The principle is to set a timer, check the status of the AJAX object regularly and update the content. If the transmission is completed, cancel the timer.

Copy code The code is as follows:

function ajax_stream(url,data,element) {
var xmlHttp=null;
If (window.XMLHttpRequest)
{// code for IE7, Firefox, Opera, etc.
xmlHttp=new XMLHttpRequest();
}
​ else if (window.ActiveXObject)
{// code for IE6, IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
If (xmlHttp==null)
          {
alert("Your browser does not support XMLHTTP.");
         element.val('Your browser does not support XMLHTTP. Click the LOG link to monitor the procedure.');
Return 0;
}
var xhr = xmlHttp;
xhr.open('POST', url, true);
// If you need to POST data like an HTML form, please use setRequestHeader() to add HTTP headers. Then specify the data you wish to send in the send() method:
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(data);
var timer;
Timer = window.setInterval(function() {
If (xhr.readyState == XMLHttpRequest.DONE) {
               window.clearTimeout(timer);
}
          element.val(xhr.responseText);
}, 1000);
}

post data conversion

Since send in the standard implementation can only accept the following types of inputs, the data objects that need to be transferred need to be converted into string or FormData format in advance. This is not as convenient as JQuery, but how does JQuery implement it in the middle of the transmission? The event response is not known yet, so you can't use it, or convert all objects to JSON.

Copy code The code is as follows:

void send();
void send(ArrayBuffer data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);

The following is the conversion code. If the browser supports FormData, it will be converted, otherwise it will be converted into a string.

Copy code The code is as follows:

function ajax_generate_data(jsobj) {
var i;
If (window.FormData) {
      var data = new FormData();
           for i in jsobj {
              data.append(i,jsobj[i]);
}
} else {
      var data = '';
        var datas = [];
           for i in jsobj {
// for the values ​​so that possible & contained in the strings do not break the format
              var value = encodeURIComponent(jsobj[i]);
              datas.append(i '=' value);
}
          data = datas.join('&')
}
console.log(data);
Return data;
}