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 相关文章推荐
javascript 定义新对象方法
Feb 20 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
angular中的post请求处理示例详解
Jun 30 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获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
php实现文件上传基本验证
2020/03/04 PHP
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
Python素数检测的方法
2015/05/11 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
函授本科自我鉴定
2013/11/03 职场文书
学历公证书范本
2014/04/09 职场文书
如何写通讯稿
2015/07/22 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
决心书格式及范文
2019/06/24 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
Python中for后接else的语法使用
2021/05/18 Python