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

流式实现

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

  1. function ajax_stream(url,data,element) {
  2. var xmlHttp=null;
  3. if (window.XMLHttpRequest)
  4. {// code for IE7, Firefox, Opera, etc.
  5. xmlHttp=new XMLHttpRequest();
  6. }
  7. else if (window.ActiveXObject)
  8. {// code for IE6, IE5
  9. xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  10. }
  11. if (xmlHttp==null)
  12. {
  13. alert("Your browser does not support XMLHTTP.");
  14. element.val('Your browser does not support XMLHTTP. Click the LOG link to monitor the procedure.');
  15. return 0;
  16. }
  17. var xhr = xmlHttp;
  18. xhr.open('POST', url, true);
  19. // 如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
  20. xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  21. xhr.send(data);
  22. var timer;
  23. timer = window.setInterval(function() {
  24. if (xhr.readyState == XMLHttpRequest.DONE) {
  25. window.clearTimeout(timer);
  26. }
  27. element.val(xhr.responseText);
  28. }, 1000);
  29. }

post数据转换

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

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

  1. function ajax_generate_data(jsobj) {
  2. var i;
  3. if (window.FormData) {
  4. var data = new FormData();
  5. for i in jsobj {
  6. data.append(i,jsobj[i]);
  7. }
  8. } else {
  9. var data = '';
  10. var datas = [];
  11. for i in jsobj {
  12. // for the values so that possible & contained in the strings do not break the format
  13. var value = encodeURIComponent(jsobj[i]);
  14. datas.append(i + '=' + value);
  15. }
  16. data = datas.join('&')
  17. }
  18. console.log(data);
  19. return data;
  20. }
 

JavaScript AJAX stream 流式显示的更多相关文章

  1. 第46天学习打卡(四大函数式接口 Stream流式计算 ForkJoin 异步回调 JMM Volatile)

    小结与扩展 池的最大的大小如何去设置! 了解:IO密集型,CPU密集型:(调优)  //1.CPU密集型 几核就是几个线程 可以保持效率最高 //2.IO密集型判断你的程序中十分耗IO的线程,只要大于 ...

  2. Java的Stream流式操作

    前言 最近在实习,在公司看到前辈的一些代码,发现有很多值得我学习的地方,其中有一部分就是对集合使用Stream流式操作,觉得很优美且方便.所以学习一下Stream流,在这里记录一下. Stream是什 ...

  3. java1.8新特性之stream流式算法

    在Java1.8之前还没有stream流式算法的时候,我们要是在一个放有多个User对象的list集合中,将每个User对象的主键ID取出,组合成一个新的集合,首先想到的肯定是遍历,如下: List& ...

  4. Stream流式编程

    Stream流式编程   Stream流 说到Stream便容易想到I/O Stream,而实际上,谁规定“流”就一定是“IO流”呢?在Java 8中,得益于Lambda所带来的函数式编程,引入了一个 ...

  5. Java8——Stream流式操作的一点小总结

    我发现,自从我学了Stream流式操作之后,工作中使用到的频率还是挺高的,因为stream配合着lambda表达式或者双冒号(::)使用真的是优雅到了极致!今天就简单分(搬)享(运)一下我对strea ...

  6. Java8中的Stream流式操作 - 入门篇

    作者:汤圆 个人博客:javalover.cc 前言 之前总是朋友朋友的叫,感觉有套近乎的嫌疑,所以后面还是给大家改个称呼吧 因为大家是来看东西的,所以暂且叫做官人吧(灵感来自于民间流传的四大名著之一 ...

  7. Stream流式计算

    Stream流式计算 集合/数据库用来进行数据的存储 而计算则交给流 /** * 现有5个用户,用一行代码 ,一分钟按以下条件筛选出指定用户 *1.ID必须是偶数 *2.年龄必须大于22 *3.用户名 ...

  8. Java8新特性 Stream流式思想(二)

    如何获取Stream流刚开始写博客,有一些不到位的地方,还请各位论坛大佬见谅,谢谢! package cn.com.zq.demo01.Stream.test01.Stream; import org ...

  9. Java学习:Stream流式思想

    Stream流 Java 8 API添加了一种新的机制——Stream(流).Stream和IO流不是一回事. 流式思想:像生产流水线一样,一个操作接一个操作. 使用Stream流的步骤:数据源→转换 ...

随机推荐

  1. 华为OJ平台——密码强度等级

    题目描述: 密码按如下规则进行计分,并根据不同的得分为密码进行安全等级划分. 一.密码长度: 5 分: 小于等于4 个字符 10 分: 5 到7 字符 25 分: 大于等于8 个字符 二.字母: 0  ...

  2. ViewPager撤消左右滑动切换功能

    ViewPager取消左右滑动切换功能 最近做项目要求某种情况下ViewPager不能滑动,那么我们只需要重写这个方法就可以禁止ViewPager滑动 IndexViewPager.java: imp ...

  3. WPF学习系列之六 (元素绑定)

    元素绑定 简单地说,数据绑定是一种关系,该关系告诉WPF从一个源对象提取一些信息,并使用这些信息设置目标对象的属性.目标属性总是依赖属性,并且通常位于WPF元素中. 一.将元素绑定到一起 <Wi ...

  4. ios assetlibrary

    公司做个app项目,用phonegap做,好调页面,哎,就是骗那些土大款客户,觉得phonegap性能一般吧,不过html5的确好强大,页面设计好了看起来也好看.原生的用的不多,比如什么二维码扫描啊, ...

  5. 【HTML/XML 9】XML中的DTD文件

    导读:DTD是Document type definition(文档类型定义的缩写),是一套关于标记符的语法规则,它是XML文件的验证机制,数以XML文件的组成部分.XML文档是一种描述标记语言的语言 ...

  6. ASP.NET的SEO:正则表达式

    目前国内主流的网站内容管理系统中,有大部分是可以将动态的PHP.ASP.ASPX等文档直接生成HTML的.但是由于有些网站的内容较多,因此如果单纯的采取直接生成的方式,将会占用大量的服务器资源.在这种 ...

  7. WP8_UTF8 to GB2312转码 (url网址中带中文字符的处理)

    直接使用例如:http://www.abc.php?name=中文符 ,客户端调用,在服务端修改后,会出现乱码, 而windows phone 又不能直接支持gb2312, 经过大量分析和验证,发现 ...

  8. hbase blocksize设置,与hdfs关系

    关于如何设定数据块的大小,我们应用一段HFile源码中的注释: 我们推荐将数据块的大小设置为8KB至1MB.大的数据块比较适合顺序的查询(比如Scan),但不适合随机查询,想想看,每一次随机查询可能都 ...

  9. 对js闭包的粗浅理解

    只能是粗浅的,毕竟js用法太灵活. 首先抛概念:闭包(closure)是函数对象与变量作用域链在某种形式上的关联,是一种对变量的获取机制.这样写鬼能看懂. 所以要大致搞清三个东西:函数对象(funct ...

  10. 几个较好的SQL速查手册网址

    微软 SQL server 数据库开发手册 数据库设计 Transact-SQL 速查手册 数据库设计 MySQL 中文参考手册速查 结构化查询语言 SQL 学习手册速查 转自:http://www. ...