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 Ajax 跨域访问的解决方案
Mar 12 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
原生js封装的ajax方法示例
Aug 02 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
PHP children()函数讲解
2019/02/03 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
用JAVASCRIPT如何给<textarea></textarea>赋值
2007/04/20 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
Python实现的Kmeans++算法实例
2014/04/26 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
幼儿教育感言
2014/02/05 职场文书
会计系毕业生求职信
2014/05/28 职场文书
植树造林的宣传标语
2014/06/23 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
辩护词范文大全
2015/05/21 职场文书
党支部考察意见范文
2015/06/02 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
vue里使用create, mounted调用方法
2022/04/26 Vue.js
vue使用watch监听属性变化
2022/04/30 Vue.js