ajax一词的实际含义为“不发生页面跳转、异步载入内容并改写页面内容的技术”，说白了就是让js去读取服务器上的数据，举个常见的例子，一般网站登录的时候不用刷新就可以判断你输入的密码是否正确，这里就用了ajax技术，ajax不仅仅会使用XML数据，很多时候也可以对json或者纯文本进行操作。
准备工作
- 要进行ajax练习，首先得配置自己的服务器，可以直接下个PHPstudy或者wamp
- 本次练习读取服务器上的静态TXT文件，这里涉及到一个问题就是txt的字符集编码必须跟网页上的一致，不然读取出来的数据就会乱码，常见的字符集编码有utf-8、gb2312
- 把软件根目录里面的www文件夹的内容清空放上两个文件index.html和data.txt,我们要做的就是在index.html里面用ajax读取data.txt里面的数据
- 在浏览器地址栏中输入localhost就能访问到index.html了
编写ajax
- 创建XMLHttpRequest对象
var xhr=new XMLHTTPRequest;
js动态向服务器发送请求，需要使用XMLHTTPRequest对象，在IE中通过ActiveX插件实现，可能会遇到3中不同版本的XHR对象，具体兼容看程序
- 连接到服务器
xhr.open(方法，文件名，异步传输);
常用两种方法get、post
get：通过URL传送数据，常用于向服务器读取信息，容量小，有缓存
post:通过http content传送数据，常用于向服务器上传信息，容量大，无缓存
浏览器缓存机制：只要URL不变，浏览器就会读取缓存的内容，无法做到实时更新
解决方法：动态改变URL，本例中采取的方法：
Ajax('data.txt?t='+new Data().getTime(),fnSucc,fnFail)
- 发送请求
xhr.send(); - 接收返回值
首先通过xhr.readyState判断是否完成了对服务器响应的接受
然后通过xhr.status判断响应的状态
如果通讯正常结束，就可以通过xhr.responseText读取通讯的内容，但是格式为字符串，可以使用eval()转换格式
调用代码
我们要做的就是在index.html里面用封装好的Ajax函数读取data.txt里面的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax练习</title>
<script src="ajax.js"></script>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn');
oBtn.onclick=function(){
Ajax('data.txt?t='+new Date().getTime(),function(str){
alert('读取成功，内容为: '+str);
},function(str){
alert('读取失败，原因为: '+str);
});
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="读取数据">
</body>
</html>
封装的Ajax函数代码
/**************************************
* Ajax(url,fnSucc,fnFail）
* url:请求的文件地址
* fnSucc:成功时执行的函数，传入读取到的文件的内容
* fnFail:可选，失败时返回的函数，返回出错的状态码
**************************************/
function Ajax(url,fnSucc,fnFail){
//创建ajax对象
//ie6
if(!window.XMLHttpRequest){
XMLHttpRequest=function(){
var objs=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for( var i=0;i<objs.length;i++){
var obj=objs[i];
try{
return new ActiveXObject(obj);
}catch(ignore){
//跳过
}
}
throw new Error('Cannot create XMLHttpRequest object.');
}
}
var oAjax=new XMLHttpRequest;
//链接服务器
//open(方法，文件名，异步传输)
oAjax.open('GET',url,true);
//发送请求
oAjax.send();
//接收返回
oAjax.onreadystatechange=function(){
//oAjax.readerState浏览器和服务器进行到哪一步了
if(oAjax.readyState==4)//读取完成
{
if(oAjax.status==200)//成功
{
fnSucc(oAjax.responseText);
}else{
if(fnFail){
fnFail(oAjax.status);
}
}
}
}
}