ajax.js内容

function ajax(url,fnWin,fnFaild){

    //1.创建ajax对象

    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    //2.与服务器建立连接

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

    //3.发送请求

    xhr.send();

    //4.接收服务器返回的信息

    xhr.onreadystatechange = function(){

        if(xhr.readyState == 4){

            if(xhr.status == 200){

                fnWin && fnWin(xhr.responseText);

            }else{

                fnFaild && fnFaild();

            }

        }

    }

}

实例一，获取txt文件内容

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #box{

                width:300px;

                height: 300px;

                border: 1px solid black;

            }

        </style>

    </head>

    <body>

        <input type="button" name="" id="" value="按钮一" />

        <input type="button" name="" id="" value="按钮二" />

        <input type="button" name="" id="" value="按钮三" />

        <div id="box"></div>

    </body>

</html>

<script type="text/javascript" src="js/ajax.js" ></script>

<script type="text/javascript">

    var oBtn = document.getElementsByTagName("input");

    var oDiv = document.getElementById("box");

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

        oBtn[i].index = i;

        oBtn[i].onclick = function(){

            ajax(this.index + 1 + ".txt",function(str){

                oDiv.innerHTML = str;

            })

        }

    }

</script>

效果图如下↓

实例二，通过ajax访问服务器端的abc.txt文件，并实现无刷新实时更新内容↓

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <p>通过ajax访问服务器端的abc.txt文件</p>

        <input type="button" name="btn" id="btn" value="读取文件" />

        <div id="box">

        </div>

    </body>

</html>

<script type="text/javascript" src="js/ajax.js" ></script>

<script type="text/javascript">

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

    var oDiv = document.getElementById("box");

    oBtn.onclick = function(){

        document.title = "abc.txt?" + new Date().getTime();

        ajax("abc.txt?t=" + new Date().getTime(),function(str){   //？后的内容会被浏览器忽略，以此实现实时刷新内容，即在修改abc.txt文件内容后，无须刷新也能获取最新内容。

            oDiv.innerHTML = str;

        })

    }

</script>

实例三，

通过ajax访问服务器端的data.json文件
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <p>通过ajax访问服务器端的data.json文件</p>

        <input type="button" name="btn" id="btn" value="读取文件" />

        <div id="box">

        </div>

    </body>

</html>

<script type="text/javascript" src="js/ajax.js" ></script>

<script type="text/javascript">

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

    var oDiv = document.getElementById("box");

    oBtn.onclick = function(){

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

            var json = (new Function("return" + str))();

            alert(json[0].c);

        })

    }

</script>

实例四，动态创建dom节点并插入json文件内容

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <ul id="ul1"></ul>

        <a href="javascript:;">1</a>

        <a href="javascript:;">2</a>

        <a href="javascript:;">3</a>

    </body>

</html>

<script type="text/javascript" src="js/ajax.js" ></script>

<script type="text/javascript">

    var oUl = document.getElementById("ul1");

    var oA = document.getElementsByTagName("a");

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

        oA[i].index = i;

        oA[i].onclick = function(){

            oUl.innerHTML = ""; //清空ul

            ajax("page" + (this.index + 1) + ".json",function(str){

                var json = (new Function("return" + str))(); //解析json

                //利用js中DOM动态生成页面中的内容

                for(var j = 0;j < json.length;j ++){

                    var obj = json[j];

                    for(var key in obj){

                        var oLi = document.createElement("li");

                        oLi.innerHTML = "<strong>" + key + "</strong><i>" + obj[key] + "</i>";

                        oUl.appendChild(oLi);

                    }

                }

            })

        }

    }

</script>

page.json1↓

[{"a":1},{"aa":11},{"aaa":111}]

page.json2↓

[{"b":2},{"bb":22},{"bbb":222}]

page.json3↓

[{"c":3},{"cc":33},{"ccc":333}]

效果图↓

点击1

点击2

点击3

实例五，获取php文件内容

Ajax——从服务器获取各种文件的更多相关文章

  1. ajax异步服务器获取时间

    1.创建ajax对象 <script type="text/javascript"> //创建AJAX异步对象 function createAJAX(){ var a ...

  2. java从远程服务器获取PDF文件并后台打印（使用pdfFox）

    一.java原生方式打印PDF文件 正反面都打印,还未研究出只打印单面的方法,待解决 public static void printFile(String path) throws Exceptio ...

  3. Ajax从服务器端获取数据

    写在前面的话 Ajax从服务器获取的数据都是字符串,但是通过不同的解析,可以解析为XML或JSON来进行应用. 一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用 ...

  4. Ajax从服务器端获取数据---原生态Ajax

    写在前面的话 Ajax从服务器获取的数据都是字符串,但是通过不同的解析,可以解析为XML或JSON来进行应用. 一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用 ...

  5. AJAX基础_AJAX获取PHP数据

    前言 本篇AJAX基础教程,只讲干货,拒绝废话. 全文通过两个实例来讲解AJAX的基本用法,第1个实例是使用AJAX技术从服务器获取纯文本(HTML)数据, 第2个实例是获取从服务器PHP文件的数据. ...

  6. springMvc 使用ajax上传文件，返回获取的文件数据 附Struts2文件上传

    总结一下 springMvc使用ajax文件上传 首先说明一下,以下代码所解决的问题 :前端通过input file 标签获取文件,通过ajax与后端交互,后端获取文件,读取excel文件内容,返回e ...

  7. SNF开发平台WinForm之十三-单独从服务器上获取PDF文件进行显示-SNF快速开发平台3.3-Spring.Net.Framework

    1运行效果: 2开发实现: 如果需要单独显示PDF文件时用下面代码去实现,指定url地址. 地址: . 获取附件管理的实体对象: List<KeyValuePair<string, obj ...

  8. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

  9. Ajax获取 Json文件提取数据

    摘自 Ajax获取 Json文件提取数据 1. json文件内容(item.json) [ { "name":"张国立", "sex":&q ...

随机推荐

  1. 【NOI2013模拟】坑带的树（仙人球的同构+圆方树乱搞+计数+HASH）

    [NOI2013模拟]坑带的树 题意: 求\(n\)个点,\(m\)条边的同构仙人球个数. \(n\le 1000\) 这是一道怎么看怎么不可做的题. 这种题,肯定是圆方树啦~ 好,那么首先转为广义圆 ...

  2. position：fixed固定定位的用法

    一.position:fixed:固定定位 1.实现某个元素在可视窗口的居中位置显示 1)给自身设置宽高: 2)给自身加position:fixed: 3)用margin向左移动自身宽度的一半,向上移 ...

  3. MySQL存储过程实现动态执行SQL

    --存储过程名和参数,参数中in表示传入参数,out标示传出参数,inout表示传入传出参数 create procedure p_procedurecode(in sumdate varchar(1 ...

  4. 洛谷P2770 双路DP // 网络流

    https://www.luogu.org/problemnew/show/P2770 第一眼看过去,觉得这不是一个经典的双路DP模型吗,将一条过去一条回来互不相交的路径看作是起点出发了两条路径一起走 ...

  5. python类继承的重写和super

    给已经存在的类添加新的行为,继承是非常好的实现方式.但是如果要改变行为呢?比如在Python继承扩展内置类,我们的contact类只允许一个名字和一个邮箱,但是如果要对某些人增加电话号码呢?这里可以通 ...

  6. 安装pycrypto2.6.1报错

    C:\Users\xxx\Downloads\pycrypto-2.6.1\pycrypto-2.6.1>python setup.py install running install runn ...

  7. 20165232第4次实验《Android程序设计》实验报告

    20165232第4次实验<Android程序设计>实验报告 一.实验报告封面 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:何彦达 学号:20165232 指导教师: ...

  8. 3.Zuul-过滤器

    1.什么是Zuul? 路由+过滤器=Zuul,核心是一系列的过滤器 2.Zuul的过滤器: pre:可以在请求被路由之前调用 route:在路由请求时候被调用 post:在route和error过滤器 ...

  9. eclipse+tomcat+maven+springmvc+mybatis+mysql集成WebService插件（Axis2+CXF）

    $1 环境介绍 $1.1 Eclipse Java EE IDE for Web Developers:Neon.2 Release (4.6.2) $1.2 Maven:3.3.9 $1.3 Spr ...

  10. JavaScript中的this指向规则

    首先,JavaScript的this指向问题并非传说中的那么难,不难的是机制并不复杂,而被认为不好理解的是逻辑关系和容易混淆的执行上下文.这篇博客也就会基于这两个不好理解的角度来展开,如要要严格的来对 ...