ajax无刷新异步传输

时间：2022-09-06 22:05:37

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&period;BeginForm&lpar;&rpar;实现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> &lt ...

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

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

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

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

随机推荐

  1. android开发环境搭建日记和嵌入式Android开发环境初探

    非常感谢博客园的各位,按照你们的博文,还有利用百度和谷歌逐渐建立了android的开发环境,只是给自己备份参考查看,看过的人可以忽略这篇文章. 本文章大部分参考了:http://www.cnblogs ...

  2. &lbrack;译&rsqb;用AngularJS构建大型ASP&period;NET单页应用（二）

    原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 客 ...

  3. To Do List

    妈呀...发现不发博文公布自己要学的东西压力少太多了.......... 然后就会变得颓废..................... 求大家监督QAQ....To Do List是近3天左右目标,3天 ...

  4. &lbrack;转&rsqb; 你是as3老鸟吗？但是有些你可能目前都不知道的东西

    你是as3老鸟吗?如果以下内容对你有莫大的帮助,请顶下! 一:加载swf库中的图片 new 的过程就是图片解压缩的过程.处于 Class 状态时,图片占用的内存和 SWF 文件中这个图片占用的磁盘空间 ...

  5. Excel 2003 中如何用VBA 代码访问单元格里的值及操作单元格 - 唐诗宋词的专栏 - 博客频道 - CSDN&period;NET

    在Excel 中编写VBA 代码,最常做的事可能就是操作表单中单元格里的数据. 我这里总结一下如何从VBA 代码中操作单元格的数据. 在VBA 代码中操作单元格需要用到Range 对象,Range 是 ...

  6. Windows的同步I&sol;O和异步I&sol;O

    同步I/O操作 执行步骤 1.        程序通过FileStream对象来打开磁盘文件,然后调用Read方法(内部调用Win32 ReadFile函数),从文件中读取数据.这时,线程从托管代码转 ...

  7. 在IIS上发布Web&lpar;使用VS2005&rpar;

    最近想在IIS上发布网站,弄了一下午.遇到很多问题,幸运的是都一一解决了,现在把解决问题的过程分享出来: 安装好IIS后,在VS2005上写了个网站(新建-->网站-->ASP.NET网站 ...

  8. IE各个版本的差异性

    1.IE6a.不支持png半透明图片,只能用filter实现b.不支持css的max-width.max-height.min-width.min-height其他不用说,一团糟,不过项目中还是得去兼 ...

  9. 我的Java设计模式-责任链模式

    今天来说说程序员小猿和产品就关于需求发生的故事.前不久,小猿收到了产品的需求. 产品经理:小猿,为了迎合大众屌丝用户的口味,我们要放一张图,要露点的. 小猿:......露点?你大爷的,让身为正义与纯 ...

  10. linux上jdk管理

    查看CentOS自带JDK是否已安装. yum list installed |grep java. 若有自带安装的JDK,卸载CentOS系统自带Java环境? yum -y remove java ...

相关文章