《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的原理和一些简单的应用。
