与后台交互方法一 ——Ajax
一、Ajax：为无刷新读取服务器端数据，常用在用户注册、在线聊天室等。
使用Ajax读取数据时有以下几点需要注意：
1.字符集编码前后台要一致，否则前台显示的数据为乱码。
2.使用随机数或时间清除缓存、阻止缓存，防止服务器端文件内容变化时，浏览器端没有及时更新。
3. Ajax读取的所有数据都是字符串，所以请求JSON文件时用eval解析。
4.Ajax读取的数据与扩展名无关。
5..用DOM创建元素
二、HTTP请求两种不同的方法：
Get方法一般用于获取数据，如浏览帖子。Get是在url里传数据：安全性低，容量小等。
Post方法一般用于上传数据，如用户注册。
三、创建Ajax对象：
高版本Ajax对象：XMLHttpRequest();
低版本(IE6-8)Ajax对象：ActiveXObject(“Microsoft.XMLHTTP”);
四、连接服务器方法：
Open(方法，文件名，异步传输)
五、请求状态监控：
Onreadystatechange事件
readyState属性：请求状态
0：未初始化，刚创建出来
1：发送，已调用send()方法，正在发送请求
2: 载入完成，shend()方法完成，已收到全部响应内容
3：解析，正在解析响应内容
4：完成，响应内容解析完成，可以在客户端调用了。
返回值为：responseText;
六、具体实现方式如下：
|
<html> |
|
|
|
<head> |
|
|
<meta charset="utf-8"> |
|
|
<meta name="author" content="" /> |
|
|
<meta name="copyright" content="" /> |
|
|
<title></title> |
|
|
<style> |
|
|
|
|
|
</style> |
|
|
<script src="ajax.js"></script> |
|
|
<script> |
|
|
window.onload=function () |
|
|
{ |
|
|
var oBtn=document.getElementById('btn1'); |
|
|
|
|
|
oBtn.onclick=function () |
|
|
{ |
|
|
ajax('arr.txt', function (str){ |
|
|
var arr=eval(str); |
|
|
|
|
|
alert(arr[0]); |
|
|
|
|
|
|
|
|
//alert(str+12); |
|
|
//alert(arr.length); |
|
|
|
|
|
//alert(arr[0]); |
|
|
}); |
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<input type="button" value="aaa" id="btn1" /> |
|
|
</body> |
|
|
</html> |
Ajax.js
function ajax(url, fnSucc, fnFaild)
{
//1.创建Ajax对象
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器（打开和服务器的连接）
oAjax.open('GET', url, true);
//3.发送
oAjax.send();
//4.接收
oAjax.onreadystatechange=function ()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
//alert('成功了：'+oAjax.responseText);
fnSucc(oAjax.responseText);
}
else
{
//alert('失败了');
if(fnFaild)
{
fnFaild();
}
}
}
};
}
Arr.txt
[2013,9,9]
