初学JS，一直认为Ajax是个很高级的、不可亵玩的东西。这两天怀着忐忑的心情接触了一下它，
感觉它并没有想象中的那么难理解。
其实，Ajax就是浏览器端向服务器请求资源的一个对象（方法）。
就跟打电话的过程差不多。
先以打电话为例，我们分为四个步骤：
1.手机
2.拨号
3.说话
4.对方回话
那么在Ajax中也是这四步：
1.创建对象（XMLHttpRequest）
2.连接服务器（open(方法, 文件名, 异步传输)）
3.发送请求 （send()）
4.接收请求并响应
废话不多说，先上封装好的一个Ajax（命名为Ajax.js）
function ajax(url, fnSucc, fnFaild)
{
//1.创建Ajax对象
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();
}
else
{
//IE6
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
} //2.连接服务器
//open(方法, 文件名, 异步传输)
oAjax.open('GET', url, true); //3.发送请求
oAjax.send(); //4.接收返回
oAjax.onreadystatechange=function ()
{
//oAjax.readyState //浏览器和服务器，进行到哪一步了
if(oAjax.readyState==4) //读取完成
{
if(oAjax.status==200) //成功
{
fnSucc(oAjax.responseText);
}
else
{
if(fnFaild)
{
fnFaild(oAjax.status);
}
//alert('失败:'+oAjax.status);
}
}
};
}
然后我们在html里面直接用它就可以了
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="Ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1'); oBtn.onclick=function ()
{
ajax('a.txt', function (str){
alert(str);
});
};
};
</script>
</head> <body>
<input id="btn1" type="button" value="读取" />
</body>
</html>
注：
在计算机上装一个服务器
http://wamp-server-wamp5.cn.uptodown.com/
将文件放在www文件夹下
访问：locahost/文件名
就可以了。