JavaScript学习总结之JS、AJAX应用(4)_H5之家 - 中国HTML5教程资源分享第一站

　　AJAX 的原理就跟现实生活中给朋友打电话是一样一样的，首先，你得有个手机，不然拿什么打，也就是要有一个设备，当然现在那都是人手一部，这第一步就可以忽略了，然后就是拨号，所谓的拨号，就是把彼此的手机连接起来，建立一条通道，然后才能通信，如果接通了，就可以进行第三步了，那就是说，我们给别人打电话，肯定是要先说，然后再听对方说，那么最后就是听对方说，不可能是自己说完啪挂了，至少得听对方说点啥，也就是有个响应。

　　打电话需要4个步骤完成，其实我们在编写 AJAX 时，也是需要4个步骤，首先，就得创建 AJAX 对象，有了这个对象之后，才能进行下面的操作，那么接下来要做的就是连接到服务器，就相当于打电话拨号，连接到服务器之后，你就得主动告诉服务器你需要什么文件，不可能是服务器丢给你几个文件，你自己选，要不是了再给你换一批，不可能这样，再说那服务器都是给成千上万人提供服务，不可能去跟你在那玩你猜我猜猜不猜，所以我们就得明确的告诉服务器我们要哪个文件，那么第三步就是发送请求，最后一步就是接收返回值，获得服务器的响应，也就是把我们需要的那个文件给我们传回来。

　　我们平时都说 AJAX，其实这只是一个对外的称呼，真正在浏览器内部是通过 XMLHttpRequest 对象来完成 AJAX 请求的，这才是 AJAX 真正的对象。

　　下面我们看一下，根据这4个步骤，AJAX 代码的具体编写过程：

<!DOCTYPE html>

<html>

<head>

window.onload = function (){

var oBtn = document.getElementById('btn');

oBtn.onclick = function (){

// 、设备 = 创建 AJAX 对象

var oAjax = new XMLHttpRequest();

// 创建好对象之后，就可以弹出来看一下。返回：[object XMLHttpRequest]

// IE 和 IE 返回：[object]

//alert(oAjax);

// 在刚创建 AJAX 对象，还没调用 open() 方法，也就是请求未初始化时，弹出 readyState 状态。

//alert(oAjax.readyState); // 返回：

// 、拨号 = 连接服务器

oAjax.open('GET', 'ajax/demo.txt?t=' + new Date().getTime(), true);

// 、说 = 发送请求

oAjax.send();

// 、听 = 接收返回

oAjax.onreadystatechange = function (){

// oAjax.readyState 浏览器和服务器进行到哪一步了

if(oAjax.readyState == ) // 请求已完成

if(oAjax.status == ){ // 成功

// 如果成功了，则弹出服务器响应的文本

alert('成功 ' + oAjax.responseText);

}

else{

// 如果失败了，则弹出请求结果。

alert('失败 ' + oAjax.status);

}

};

</script>

</head>

<body>

</body>

</html>

　　上面的代码，在进行最后一步时，判断浏览器和服务器进行到哪一步了，当 readyState 属性状态为4时，就是请求完成了，但是请求完成并不代表请求成功，如果读取出错了或者文件不存在等情况导致出错了，那么也算是请求完成了，也就是不管读取成功还是失败，都算是请求完成了，所以需要进一步使用 status 属性判断，若为200，就是成功了。使用自定义的个人站点打开上面的 demo，点击按钮后，弹出成功和文本中的内容，我们可以试着改变一下 URL，就是把他故意写错，再次点击按钮，则会弹出失败和404，也就是未找到页面。

　　如果每次我们按照这4个步骤编写 AJAX 程序，是非常方便的，也容易理解，但是使用起来比较麻烦，所以我们可以把他封装为一个函数，在使用时调用就好使多了。

function ajax(url, fnSucc, fnFaild){

var oAjax = new XMLHttpRequest();

oAjax.open('GET', url, true);

oAjax.send();

oAjax.onreadystatechange = function(){

if(oAjax.readyState == ){

if(oAjax.status == ){

fnSucc(oAjax.responseText);

}

else{

if(fnFaild){

fnFaild(oAjax.status);

}

};

}

　　上面封装的 ajax 函数有三个参数，第一个参数 url，是文件路径，第二个参数 fnSucc，当每次成功的时候调用函数，第三个参数 fnFaild，当失败时调用的函数。这里并不是任何情况下都需要失败时执行一个函数，所以需要做一个判断，只有当 fnFaild 这个参数传入进来，也就是定义了失败时执行的函数，那么这时候才去调用他。

　　可以在 www 根目录中新建一个文件夹命名为 js，然后把上边的代码复制另存为 ajax.js，下面是封装好之后的应用：

window.onload = function (){

var oBtn = document.getElementById('btn');

oBtn.onclick = function (){

ajax('ajax/demo.txt?t=' + new Date().getTime(), function (str){

alert('成功 ' + str);

}, function (){

alert('失败');

});

};

</script>