index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ajax</title>

    <style>

    #btn{

        width: 120px;

        background-color: #ff4500;

        color: #ffffff;

        line-height: 30px;

        cursor: pointer;

        text-align: center;

        margin-bottom: 10px;

    }

    #aStrList{

        border:1px solid #d0d0d0;

        padding: 20px;

    }

    #aStrList p{

        display: block;

        height: 30px;

        overflow: hidden;

        border-bottom: 1px solid #ff4500;

    }

    #aStrList p span{

        float: left;

        width: 100px;

        line-height: 30px;

    }

    </style>

</head>

<body>

    <div id="btn">Ajax button</div>

    <div id="aStrList">

        <p>

            <span>Lily</span>

            <span>female</span>

            <span>21</span>

        </p>

    </div>

<script>

window.onload = function(){

    var oBtn = document.getElementById("btn");

    var olist = document.getElementById("aStrList");

    oBtn.onclick = function(){

        ajax("data.php?t="+new Date().getTime(),function(str){//success

            var aStr = eval(str);

            for(var i=0; i<aStr.length; i++){

                var newItem = document.createElement("p");

                for(var j=0; j<aStr[i].length; j++){

                    var newItemSpan = document.createElement("span");

                    newItemSpan.innerHTML += aStr[i][j];

                    newItem.appendChild(newItemSpan);

                }

                olist.appendChild(newItem);

            }

        },function(failedstr){//failed

            olist.innerHTML = failedstr;

        })

    }

}

//ajax

function ajax(url,fnSuccess,fnFailed){

    //1.create ajax object

    if(window.XMLHttpRequest){

        var oAjax = new XMLHttpRequest;

    }else{

        var oAjax = new ActiveXobject("Microsoft.XMLHTTP");

    }

    //2.connect webservice(method,file,asynchronous)

    oAjax.open("GET",url,true);

    //3.send

    oAjax.send();

    //4.receive

    oAjax.onreadystatechange = function(){

        if(oAjax.readyState==4){

            if(oAjax.status==200){

                fnSuccess(oAjax.responseText);

            }else{

                if(fnFailed){

                    fnFailed(oAjax.status);

                }

            }

        }

    }

}

</script>

</body>

</html>

data.php

[

    ["Jame","male","23"],

    ["Lucy","female","18"],

    ["Jack","male","25"]

]

ajax无刷新异步传输的更多相关文章

  1. Ajax.BeginForm()实现ajax无刷新提交

    1. 同时安装 Microsoft jQuery Unobtrusive ajax 和 jQuery Unobtrusive Ajax,如下图 安装完成之后多了如下的js库 2. 引用该js库 lay ...

  2. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

  3. Ajax无刷新提交

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. ajax 无刷新分页

    //ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...

  5. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  6. DWZ框架Ajax无刷新表单提交处理流程

    DWZ框架Ajax无刷新表单提交处理流程是: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应 ...

  7. Thinkphp框架 -- ajax无刷新上传图片

    用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...

  8. Ajax无刷新提交表单和显示

    ajax无刷新表单提交:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. ajax无刷新方式收集表单并提交表单

    ajax无刷新方式收集表单有两种方式, 一个是使用html5的FormData.一个是传统的方式. 一,FormData,在主流的浏览器中可以用,IE不好用啊. 另外,FormData使用有两个条件, ...

随机推荐

  1. 【python】入门学习（七）

    设置字符串格式: format % values >>> x =/ >>> print(x) 0.012345679012345678 >>> p ...

  2. [聊天框]让DIV的滚动条自动滚动到最底部 - 4种方法

    要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. ...

  3. Java抽象类接口、内部类题库

    一.    选择题 1. Person类和Test类的代码如下所示,则代码中的错误语句是(  C  ).(选择一项)   public class Person { public String nam ...

  4. Android笔记：ninepatch

    上边框和左边框绘制的部分就表示当图片需要拉伸时就拉伸黑点标记的区域 下边框和右边框绘制的部分则表示内容会被放置的区域

  5. 关于KVC、KVO

    KVC/KVO --------------------KVC--键值编码-------------------作用:通过字符串来描述对象的属性间接修改对象的属性 Student *stu=[[Stu ...

  6. IOS8下，百度地图无法定位解决办法

      通过在论坛中搜索,找到解决办法,我只是论坛的搬运工.分享如下:   1.在info.plist中加入: NSLocationAlwaysUsageDescription＝YES NSLocatio ...

  7. c++ 头文件包含问题-include&class

    http://blog.csdn.net/jiajia4336/article/details/8996254 前向声明概念(forward declaration) 在程序中引入了类类型的B.在声明 ...

  8. PHP之MVC学习

    代码架构进货过程 one,混编 嵌入式脚本语言PHP html与php混编的编码方式 two,显示和逻辑相分离 最后,需要将显示和逻辑的结果放在一起! 需要在 php页面,将html代码 载入才可以! ...

  9. Lattice 的 Framebuffer IP核使用调试笔记之datasheet笔记

    本文由远航路上ing 原创,转载请标明出处. 学习使用以及调试Framebuffer IP 核已经有一段时间了,调试的时候总想记录些东西,可是忙的时候就没有时间来写,只有先找个地方记录下,以后再总结. ...

  10. Quartus 11.0 的AS 下载方式和JTAG下载jic文件的方式

    FPGA下载的三种方式:主动配置方式(AS)和被动配置方式(PS)和最常用的(JTAG)配置方式: AS由FPGA器件引导配置操作过程,它控制着外部存储器和初始化过程,EPCS系列.如EPCS1,EP ...