《JavaScript学习笔记》：Ajax的应用
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
下面先介绍 AJAX 的工作原理。
1、 AJAX 的工作原理
AJAX 的工作原理在http://www.w3school.com.cn/ajax/ajax_example.asp有比较详细的解释，这里就不再过多的解释。
AJAX的实现需要如下的4个步骤：
1、创建对象
2、连接服务器
3、发送请求
4、接收数据
具体实现代码如下：
// JavaScript Document
function my_ajax(url,funSucce,funFail)
{
//实现Ajax需要如下的4个步骤
//1、创建对象,为解决兼容器，使用if
var oAjax=null;
if(window.XMLHttpRequest)
{
//所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象
oAjax = new XMLHttpRequest();
}
else
{
//老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、连接服务器 open(请求的方式(get or post),url,是异步(true)还是同步(false))
//为了避免得到缓存，向 URL 添加一个唯一的 ID (可使用：Math.random())
oAjax.open('get',url+'?t='+new Date().getTime(),true);//
//3、发送请求
oAjax.send();
//4、接收数据
oAjax.onreadystatechange=function()
{
/*
oAjax.readyState的状态有如下的5种情况
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
if (oAjax.readyState==4)//接收完成
{
if(oAjax.status==200)//成功
{
//alert('成功'+oAjax.responseText);
funSucce(oAjax.responseText);
}
else
{
funFail(oAjax.status);
}
}
};
}我们将AJAX的实现封装为了一个函数，供我们调用。下面我们就来基于上面的函数来进行一些AJAX的应用
2、AJAX的应用
2.1使用AJAX读取txt文件中的内容，并显示
实现代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="my_ajax.js"> </script>
<script>
window.onload=function()
{
var oBtn = document.getElementById('btn1');
oBtn.onclick=function()
{
my_ajax('aaa.txt',function(str)
{
alert('读取成功：'+str) ;
},function(state)
{
alert('读取失败：'+state);
});
}
};
</script>
</head>
<body>
<input id="btn1" type="button" value="读取文件" />
</body>
</html>除了读一般的文本文件，我们还可以读文件中存储的是数组、json数据，然后对读出来的数据进行一些处理。
2.2 使用AJAX读取数组元素
例如：如果有一个文件存储的内容是：[1,2,3,4,5,6],要得到这个数组的第一个元素1应该如何来做呢？？
由于从文件读取出来的数据均为string 类型，因此这里需要使用eval函数来进行处理得到数组类型的数据。
实现代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="my_ajax.js"></script>
<script>
window.onload=function()
{
var oBtn= document.getElementById('btn1')
oBtn.onclick=function()
{
my_ajax('read_arr2.txt',function(str)
{
//alert(typeof str);
var arr=eval(str)
alert(arr[0])
//alert(typeof arr);
},function(state)
{
alert('获取失败'+state);
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="读取文件" />
</body>
</html>2.3 使用AJAX读取json数据
既然可以读取数组数据，那么可能也就可以读取json数据，然后我们就可以在读取数据之后进行一些处理操作。
假如一个文件中存储的内容为：[{a:20,b:23},{a:88,b:34},{a:98,b:64}]
那么应该如何来取出里面的json数据了。
有了前面的经验，这个也就比较简单了。
方法为：先将文本中的内容读取出来，利用eval函数转换为json类型的数组，然后进行操作。
这里要注意的是，如果文本文件中的内容为：{a:20,b:23}，是不能够利用eval函数将数据从string类型转化json数据的,还会报不知名的某种错误
实现代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="my_ajax.js"></script>
<script>
window.onload=function()
{
var oBtn= document.getElementById('btn1');
oBtn.onclick=function()
{
my_ajax('read_arr2.txt',function(str)
{
var oJson=eval(str);
alert(oJson[0].b);
},function(state)
{
alert('获取失败'+state);
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="读取文件" />
</body>
</html>2.4 使用AJAX读取json的另一个例子
关于json，我们来看一个比较实际的例子。
假如文本文件中存储的内容如下：
[{user:”张三”,pass:”123”},{user:”李四”,pass:”456”},{user:”王五”,pass:”789”}]
我们需要使用AJAX来读取文件，并将每个json数据组合成一个li在网页中显示。
这个例子就需要我们前面学习的添加子节点等知识点来解决了。
实现代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="my_ajax.js"></script>
<script>
window.onload=function()
{
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
var oUl=document.getElementsByTagName('ul')[0];
oBtn.onclick=function()
{
my_ajax('readAndCreate.txt',function(str)
{
var arr = eval(str);
for(var i=0;i<arr.length;i++)
{
var oLi = document.createElement('li');
oLi.innerHTML='用户名:'+arr[i].user+',密码：'+arr[i].pass;
oUl.appendChild(oLi);
}
},function(state)
{
alert('失败');
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="读取" />
<div id="div1">
<ul id="ul1">
</ul>
</div>
</body>
</html>以上就是关于AJAX的原理和一些简单的应用。
656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
