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. ArtDialog文档

    http://www.planeart.cn/demo/artDialog/_doc/API.html#API

  2. [Android Pro] Android 6.0 Root

    reference : http://bbs.gfan.com/android-8001827-1-1.html 2. 刷机和刷入recovery 建议参考 置顶教程: [15年3月31日更新]Nex ...

  3. Redis自定义动态字符串(sds)模块（一）

    Redis开发者在开发过程中没有使用系统的原始字符串,而是使用了自定义的sds字符串,这个模块的编写是在文件:sds.h和sds.c文件中.Redis自定义的这个字符串好像也不是很复杂,远不像ngin ...

  4. sqlite建表语句(特别是外键问题)

    原创  sqlite建表语句(特别是外键问题) 下面图表示两个表关系: //表1User_invitecreate table User_invite(Invite_id INTEGER PRIMAR ...

  5. DDR3详解（以Micron MT41J128M8 1Gb DDR3 SDRAM为例）

    转自:http://www.360doc.com/content/14/0116/16/15528092_345730642.shtml 以及参考网络. 首先,我们先了解一下内存的大体结构工作流程,这 ...

  6. webservice 简单入门 (NLY)

    1,创建webservice服务器端 搭建网站,创建webservice webservice.cs中的代码 namespace WebApplication1 { /// <summary&g ...

  7. Android -- FragmentActivity添加Fragment的序列图

    FragmentActivity添加Fragment的序列图

  8. nginx 配一个简单的静态文件服务器 和一个虚似机

    下面是个图片服务器: server { listen ; server_name img.xxx.xxx.com; root /data/site/img.xxx.xxx.com; access_lo ...

  9. logstash json和rubydebug 第次重启logstash都会把所有的日志读完　而不是只读入新输入的内容

    查看一下agent端的shipper的配置: # cat logstash_test2.shipper.conf input { file { path => ["/apps/logs ...

  10. CLR via C#（01）-.NET平台下代码是怎么跑起来的

    1. 源代码编译为托管模块 程序在.NET框架下运行,首先要将源代码编译为托管模块.CLR是一个可以被多种语言所使用的运行时,它的很多特性可以用于所有面向它的开发语言.微软开发了多种语言的编译器,编译 ...