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. java List<String> 转换成带逗号的字符串

    使用commons-lang3-3.3.2.jar org.apache.commons.lang3.StringUtils.join(applyNameList, ",");

  2. postman 介绍

  3. halcon形态学运算

    腐蚀.膨胀.开运算(先腐蚀后膨胀).闭运算(先膨胀后腐蚀) 以halcon自带案例ball.hdev为例(开运算),注意代码有所缩减.关于sort_region函数,参考http://blog.sin ...

  4. java中异常的面试

    https://blog.csdn.net/qq_36523638/article/details/79363652 1) Java中的检查型异常和非检查型异常有什么区别? 这又是一个非常流行的Jav ...

  5. SSH框架下ajax调用action并生成JSON再传递到客户端【以get和post方式提交】

    需要完成的任务: 主要是把JSP页面上图片ID传给服务器端,服务器读取cookie看是否有username,如果有则根据ID读取MongoDB数据库,读出图片URL,再存放到mysql中的collec ...

  6. Linux基础-兄弟连Linux

    Linux基础增强与辅助知识梳理... ------------ Linux学习基础需要学习那些知识 学习Linux对于程序开发的好处 怎样开始学习Linux Linux的学习方法参考 Linux系统 ...

  7. 2017-12-14python全栈9期第一天第六节之用户交互

    9,用户交互.input 1,等待输入, 2,将你输入的内容赋值给了前面变量. 3,input出来的数据类型全部是str 10,基础数据类型初始.数字:int 12,3,45 + - * / ** % ...

  8. o(1), o(n), o(logn), o(nlogn)

    转自:https://blog.csdn.net/Mars93/article/details/75194138 在描述算法复杂度时,经常用到o(1), o(n), o(logn), o(nlogn) ...

  9. TRAFFIC ANALYSIS EXERCISE - Ransomer

    catalogue . SCENARIO . QUESTIONS . Analysis:10.3.14.134 . Analysis:10.3.14.131 1. SCENARIO The pcap ...

  10. Dubbo管控台安装(zookeeper集群)

    Dubbo管控台可以对注册到zookeeper注册中心的服务或服务消费者进行管理,但管控台是否正常对Dubbo服务没有影响,管控台也不需要高可用,因此节点部署   环境:Centos6.6.IP:10 ...