JavaScript结合AJAX_stream实现流式显示


Posted in Javascript onJanuary 08, 2015

当使用AJAX进行信息交互的时候,如果服务器返回的信息比较大,那么相对于传送完成之后的统一显示,流式显示就比较友好了。

流式实现

原理就是设置定时器,定时的查看AJAX对象的状态并更新内容,如果传送完成,就取消定时器。

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);

    // 如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

    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数据转换

由于标准实现中的send只能接受以下几种输入,所以需要提前对需要传递的数据对象转换为字符串或者FormData格式,这一点就不如JQuery的方便了,但是JQuery如何在传输中间实现事件响应还不得而知,所以不能用,再或者把所有的对象转换中JSON。

void send();

void send(ArrayBuffer data);

void send(Blob data);

void send(Document data);

void send(DOMString? data);

void send(FormData data);

下面是转换的代码,如果浏览器支持FormData就转换,否则转成字符串。

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;

}
Javascript 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
浅谈javascript的闭包
Jan 23 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
iview table高度动态设置方法
Mar 14 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
构建Vue大型应用的10个最佳实践(小结)
Nov 07 Javascript
jQuery中siblings()方法用法实例
Jan 08 #Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 #Javascript
jQuery中prevUntil()方法用法实例
Jan 08 #Javascript
jQuery中prevAll()方法用法实例
Jan 08 #Javascript
jQuery中prev()方法用法实例
Jan 08 #Javascript
深入探密Javascript数组方法
Jan 08 #Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 #Javascript
You might like
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
php截取中文字符串函数实例
2015/02/23 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
Nodejs libuv运行原理详解
2019/08/21 NodeJs
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
Python获取邮件地址的方法
2015/07/10 Python
Python 备份程序代码实现
2017/03/06 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
标准导师推荐信(医学类)
2013/10/28 职场文书
检讨书1000字
2014/10/11 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
中学生检讨书范文
2014/11/03 职场文书
2014小学年度工作总结
2014/12/20 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
同学联谊会邀请函
2019/06/24 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers