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. LeetCode 409 Longest Palindrome

    Problem: Given a string which consists of lowercase or uppercase letters, find the length of the lon ...

  2. php抽象工厂模式的研究

    上一节理解了工厂模式.其代码原理如下: <?php abstract class ApptEncoder{ abstract function encode(); } class BloggsA ...

  3. 导出 SQL SERVER 表中数据为脚本

    ALTER PROCEDURE [dbo].[Usp_OutputData] @tablename sysname, @outputIdentitycolumn int AS declare @col ...

  4. JS时间自动更新

    js部分: <!--自动更新时间--><script>function show(){var date = new Date(); //日期对象var now = " ...

  5. Eclipse内存不够解决办法

    Window -- Preference --MyEclipse -- Servers -- Tomcat -- Tomcat6.x(选择自己安装的版本) -- JDK 在Optional Java ...

  6. samba 报错

    [root@GitLab data_nfs]# smbclient //localhost/public WARNING: The security=share option is deprecate ...

  7. linux中解决SSH连接慢问题　关键点GSSAPIAuthentication

    [root@ok 6FE5-D831]# ssh -v xxx.xxx.xxx.64 OpenSSH_5.3p1, OpenSSL Feb debug1: Reading configuration ...

  8. securecrt 用心跳保持连接

    选项->会话->终端->发送协议NO-OP(P)

  9. Delphi管理多线程之线程局部存储：threadvar

    尽管多线程能够解决许多问题,但是同时它又给我们带来了很多的问题.其中主要的问题就是:对全局变量或句柄这样的全局资源如何访问?另外,当必须确保一个线程中的某些事件要在另一个线程中的其他时间之前(或之后) ...

  10. Delphi中DLL的创建和使用

    参考:http://blog.csdn.net/ninetowns2008/article/details/6311663 结合这篇博客:http://www.cnblogs.com/xumenger ...