《JavaScript学习笔记》：Ajax的应用
发布时间：2020-12-16 01:34:19 所属栏目：百科 来源：网络整理
导读：《JavaScript学习笔记》：Ajax的应用 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 下面先介绍 AJAX 的工作原理。 1、 AJAX 的工作原理 AJAX 的工作原理在http://www.w3school.com.cn/ajax/ajax_example.asp有比较详细的解
《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，我们来看一个比较实际的例子。 假如文本文件中存储的内容如下： 我们需要使用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的原理和一些简单的应用。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |