JavaScript AJAX stream 瀑布流式显示实例

流式实现

原理就是设置定时器,定时的查看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;
}
时间: 2024-09-25 15:38:27

JavaScript AJAX stream 瀑布流式显示实例的相关文章

JavaScript结合AJAX_stream实现流式显示_javascript技巧

当使用AJAX进行信息交互的时候,如果服务器返回的信息比较大,那么相对于传送完成之后的统一显示,流式显示就比较友好了. 流式实现 原理就是设置定时器,定时的查看AJAX对象的状态并更新内容,如果传送完成,就取消定时器. 复制代码 代码如下: function ajax_stream(url,data,element) {     var xmlHttp=null;     if (window.XMLHttpRequest)       {// code for IE7, Firefox, Op

PHP结合Jquery和ajax实现瀑布流特效_php实例

不废话,直接上代码, 前台: <?php $category=$this->getMyVal('category',$_GET); $xiaohuaList=Xiaohua::model()->getXiaohao($category); //打开页面默认显示的数据 ?> <div id="waterfall"> <?php foreach ($xiaohuaList as $xiaohua):?> <?php $q_id=$xia

说说瀑布流式网站里那些可人的小细节

瀑布流式布局,想必设计师们已不再陌生,随着pinterest自2011年开始走红,瀑布流式的布局被越来越多的网站所使用.花瓣网.堆糖网.布兜.发现啦,美丽说,蘑菇街,人人逛街,凡客达人等,复制Pinterest的网站在中国蜂拥而现,粗略估计已有几十家之多. 为什么选择瀑布流? 既然pinterest式蜂拥而现,我们先从体验角度看,瀑布流布局为什么好? 笔者浅见.随着读图时代快餐式消费的来临,瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑

使用JS实现图片展示瀑布流效果的实例代码_javascript技巧

不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不 一样,高高低低就像瀑布一样,所以叫做瀑布流效果.下面我把代码给大家,大家 随便下几张图片试试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

javascript瀑布流式图片懒加载实例_javascript技巧

最近项目使用到了"懒加载",现在更新一般,因为平时主要使移动端的开发所以库文件使用的是zepto.js .当然也可以和jQuery 通用. 代码如下: /** * Created by zhiqiang on 2015/10/14. * hpuhouzhiqiang@gmail.com * 图片的懒加载 **/ function loadImgLazy(node) { var lazyNode = $('[node-type=imglazy]', node), mobileHeight

AJAX实现瀑布流触发分页与分页触发瀑布流的方法_jquery

所谓的瀑布流效果就正如轻图床首页效果那样,多个内容相近的栏目紧密排列,尽量使到栏目间的间隙最小(即流体布局),并且随着页面滚动条向下滚动,新的数据会追加至当前页面的尾部直到所有数据加载完毕(滚动触发的 Ajax 翻页). 瀑布流触发分页 这里说一下思路,虽然下面的实例中不能全都用到: 1.当进入屏幕时,判断内容是否为空,如果不为空,开始初始化数据. 2.当往屏幕下拉时,判断数据的最底部与屏幕高度+滚动的高度的大小.如果最底部小于上面两者之和,重新请求接口,即加载数据. 3.当遇到数据超过某个页数

jQuery向下滚动即时加载内容实现的瀑布流效果_php实例

下拉滚动条或鼠标滚轮滚动到页面底部时, 动态即时加载新内容. 后台用 json 传输数据, 示例程序中只写了示例数组.数据也只设置了两个属性, 需根据实际应用改写. 页面用了 ul li 做为容器, 每个 li 表示一列 <ul id="stage"> <li></li> <li></li> <li></li> PHP和Jquery和ajax实现下拉淡出瀑布流效果(无需插件) <li><

原生JavaScript+LESS实现瀑布流_javascript技巧

HTML(注意包裹关系,方便js调用) 复制代码 代码如下:  <body>      <div id="main">          <div class="box">              <div class="pic">                  <img src="images/0.jpg" alt="">         

JS瀑布流实现方法实例分析_javascript技巧

本文实例分析了JS瀑布流实现方法.分享给大家供大家参考,具体如下: 描述: 1.每个图片宽度都一样,高度不一样 思路: 1.算出一共有几列(通过视窗总宽度/单个图片宽度得出) 2.根据一共几列*单个图片宽度,设置外围总宽度并水平居中(注:这个宽度应该是计算出来的,而不是定死,因为窗口大小会改变) 3.将第一行图片高度按顺序填充进数组 4.算出第一行图片里高度最短的那个,将第二行的第一张图片添加到其后(绝对定位),添加完第二行第一张,更新他的高度,然后重新计算最短,再开始之前的过程 5.鼠标在滑动