Ajax学习笔记整理

Ajax：Asynchronous JavaScript and Xml，异步js脚本和xml，是一种常用于实现页面局部异步刷新的技术，极大地提高了用户体验。虽然Xml在多语言场景中具有优势，但在实际的Ajax技术应用中，更多使用Json对象来处理数据。

深入了解Ajax的历史，我们可以发现它与Web前端开发技术和javascript紧密相连。Ajax技术的诞生可追溯到浏览器巨头网景（NetScape）公司创造的LiveScript脚本语言，用于丰富网页元素的表现形式，使网页呈现动态效果。随着互联网的不断发展，微软（Microsoft）公司也涉足互联网行业，推出了JScript语言。最终是微软对互联网的坚定决心促成了对NS的收购历程。

动态HTML语言（Dynamic Hyper Text Markup Language）是将javascript放在Dom树的元素节点中，为元素提供动态展示行为的技术。而Ajax的核心思想可以概括为创建请求对象、配置请求对象并发送到服务器、服务器响应请求对象。

创建请求对象作为和服务器进行通讯的对象，是Ajax代码的第一步。这里有一个创建请求对象的函数，可以兼容不同的浏览器：

function createRequest(){

try{

var request=new XMLHttpRequest(); //尝试使用标准的XMLHttpRequest对象

}catch(tryMS){

try{

request=new ActiveXObject("Msxml2.XMLHTTP"); //如果浏览器不支持XMLHttpRequest，尝试使用ActiveXObject("Msxml2.XMLHTTP")

}catch(otherMS){

try{

request=new ActiveXObject("Microsoft.XMLHTTP"); //如果还是失败，尝试使用较老的ActiveXObject("Microsoft.XMLHTTP")

}catch(failed){

request=null; //如果所有尝试都失败，返回null

}

}

}

return request; //返回成功的请求对象

}

获取请求对象后，我们需要配置并发送到服务器。这个过程包括设置请求的方法（GET或POST）、URL以及是否异步处理。然后，通过send()方法将请求发送到服务器。值得注意的是，onreadystatechange事件处理器（在这里是showResponse函数）的位置会影响控制台输出的响应内容。这个事件处理器会在请求状态改变时被调用，我们可以在这个函数中处理服务器的响应。

在这个故事里，我们可以想象request.onreadystatechange=showResponse;这行代码就像是为即将发生的事件安排了一场演出。当open之后send之前，服务器连接的舞台已经搭建好，也就是readyState变为1时，这场演出的第一部分开始。此时的演出内容是展示请求已和服务器建立连接的状态。

接着，当readyState从1变为2时，回调函数showResponse第一次加入任务队列等待执行。这就像是在演出的第一部分结束后，紧接着安排下一场表演。此时的演出内容是展示请求已发送，服务器已接收的状态。而在send之后，我们可以看到更多的演出细节。

同样地，当readyState从2变化到3和从3变化到4时，回调函数showResponse会再次加入任务队列。这样，我们会在控制台看到一系列的状态更新，就像是在观看一出精彩的舞台剧，每个场景都紧密相连，最终呈现出一个完整的故事。最终，当请求完成时，如果状态码为200，我们就可以处理服务器的响应内容了。

那么，让我们更深入地了解一下这个showResponse函数。这个函数的主要目的是跟踪XMLHttpRequest对象的readyState变化。在实际项目中，我们并不需要那么多的代码来跟踪每一个状态变化。我们真正关心的是当请求完成时，即readyState为4时，如果服务器返回的状态码为200，那么我们就开始处理服务器的响应内容。

那么，什么是Ajax，它解决了什么问题呢？

我们知道，在传统的客户端向服务器请求页面中，服务器需要动态计算并生成页面，然后再发送给客户端。客户端浏览器按顺序编译并呈现页面。在没有Ajax的时代，如果页面有一个用户验证控件，客户端需要等待服务器的验证结果才能继续呈现其他页面元素。这种同步方式会导致网页呈现出现假死状态。

在使用Ajax后，情况发生了改变。客户端提交验证请求后，可以继续呈现其他元素。当收到验证结果时，JavaScript会在客户端修改内存中的DOM对象并呈现给用户。这种异步方式不会造成假死状态，也节省了客户端等待服务器返回结果的时间开销。Ajax就像是一个高效的舞台导演，让页面的各个部分在合适的时间进行表演，呈现出流畅的用户体验。

回调函数和任务队列的交互是Ajax背后的核心机制之一，它让我们能够在不刷新整个页面的情况下实现局部内容的更新和异步操作，从而大大提升网页的用户体验。