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】Merge Intervals（hard）

    Given a collection of intervals, merge all overlapping intervals. For example,Given [1,3],[2,6],[8,1 ...

  2. 【mysql】利用Navicat for MySQL的使用

    1. 查看sql语句 如果忘记了某个SQL语句怎么写,可以利用Navicat for MySQL的历史日志来查看 在Navicat for MySQL中,直接对数据库进行想要的操作,然后点击工具-&g ...

  3. ubunto安装pycharm

    转载:http://www.cnblogs.com/zhcncn/p/4027025.html 1. 下载 http://www.jetbrains.com/pycharm/download/ 选择L ...

  4. 9.12/ css3拓展、js基础语法、程序基本知识、数据类型、运算符表达方式、语句知识点

    css3拓展: <display:none>  将某个元素隐藏       <visibility:hidden>  也是将某个元素隐藏 <display:block&g ...

  5. 由浅入深剖析.htaccess

    转自:http://blog.csdn.net/21aspnet/article/details/6908025 [-] htaccess文件使用前提 htaccess基本语法介绍 现学现用学习正则表 ...

  6. eclipse快捷键Alt + / 失效

    最近电脑上的Eclipse没有了自动提示功能,也不是全部不提示,大多数情况下按下"alt+/"键还会产生提示,但是当我在java项目中邪main方法和syso的时候,"a ...

  7. MFC CheckBox

    if ( BST_CHECKED == IsDlgButtonChecked( IDC_CHECK1 ) ){// 勾选}else{}

  8. 根据OSG中的ref_ptr和Reference简化的智能指针

    main.cpp测试代码 #include "TestSmartPointer" void fun() { SP<TestSmartPointer> sp1=new T ...

  9. 项目之solr全文搜索工具的安装

    1. Solr简介 Solr是一个基于Lucene的Java搜索引擎服务器.Solr 提供了层面搜索.命中醒目显示并且支持多种输出格式(包括 XML/XSLT 和 JSON 格式).它易于安装和配置, ...

  10. 原始套接字SOCK_RAW

    原始套接字SOCK_RAW 实际上,我们常用的网络编程都是在应用层的报文的收发操作,也就是大多数程序员接触到的流式套接字(SOCK_STREAM)和数据包式套接字(SOCK_DGRAM).而这些数据包 ...