JavaScript AJAX Stream Streaming display

When using Ajax for information interaction, if the information returned by the server is relatively large, the streaming display is more friendly than the unified display after the transfer is complete.


Streaming implementation
The principle is to set the timer, periodically check the status of the Ajax object and update the content, if the transfer is complete, cancel the timer.

2. function Ajax_stream (url,data,element) {
4. var xmlhttp=null;
6. if (window. XMLHttpRequest)
8. {//code for IE7, Firefox, Opera, etc.
10. Xmlhttp=new XMLHttpRequest ();
12. }
14. else if (window. ActiveXObject)
16. {//code for IE6, IE5
18. Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");
20. }
22. if (xmlhttp==null)
24. {
26. Alert ("Your browser does not support XMLHTTP.");
28. Element.val (' Your browser does not support XMLHTTP. Click the LOG link to monitor the procedure. ');
30. return 0;
32. }
34. var xhr = xmlHttp;
36. Xhr.open (' POST ', url, true);
38. If you need to POST data like an HTML form, use setRequestHeader () to add an HTTP header. Then specify the data you want to send in the Send () method:
40. Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
42. Xhr.send (data);
44. var timer;
46. Timer = Window.setinterval (function () {
48. if (xhr.readystate = = Xmlhttprequest.done) {
50. Window.cleartimeout (timer);
52. }
54. Element.val (Xhr.responsetext);
56. }, 1000);
58. }

Post Data conversion
Because send in the standard implementation can only accept the following types of inputs, it is better to convert the data objects that need to be passed into a string or formdata format in advance, which is not asJQuery, but how jquery can implement event response in the middle of the transmission is not known, so it cannot be used, or all objects can be converted to JSON.

1. void Send ();
2. void Send (ArrayBuffer data);
3. void Send (Blob data);
4. void Send (Document data);
5. void Send (domstring data);
6. void Send (FormData data);

The following is the code of the conversion, if the browser supports Formdata conversion, otherwise it will be converted into a string.

2. function Ajax_generate_data (jsobj) {
4. var i;
6. if (window. FormData) {
8. var data = new FormData ();
10. For I in Jsobj {
12. Data.append (I,jsobj[i]);
14. }
16. } else {
18. var data = ';
20. var datas = [];
22. For I in Jsobj {
24. For the values so, possible & contained in the strings does not break the format
26. var value = encodeURIComponent (Jsobj[i]);
28. Datas.append (i + ' = ' + value);
30. }
32. data = Datas.join (' & ')
34. }
36. Console.log (data);
38. return data;
40. }

JavaScript AJAX Stream Streaming display