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中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
jQuery 表格工具集
Apr 25 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 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下载远程文件类(支持断点续传)
2008/11/14 PHP
php中实现简单的ACL 完结篇
2011/09/07 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
php中请求url的五种方法总结
2017/07/13 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
python是否适合网页编程详解
2019/10/04 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
Whistles官网:英国女装品牌
2020/08/14 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
国际贸易专业推荐信
2013/11/15 职场文书
保荐人的岗位职责
2013/11/19 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
兴趣班停课通知
2015/04/24 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
Python - 10行代码集2000张美女图
2021/05/23 Python
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL