谈谈Ajax原理的实现过程

1.什么是AJAX？

AJAX被称为“异步JavaScript和XML”，是一种用于创建交互式web应用程序的web开发技术。它使用：

使用XHTML CSS规范呈现；使用XML和XSLT进行数据交换和相关操作；使用XMLHttpRequest对象与Web服务器进行异步数据通信；使用Javascript操作文档对象模型进行动态显示和交互；使用JavaScript绑定和处理所有数据。

2.2.AJAX的工作原理。

Ajax的工作原理相当于在用户和服务器之间增加了一个中间层(AJAX引擎)，使得用户操作和服务器响应异步。并不是所有的用户请求都提交给服务器，比如数据验证和数据处理，这些都交给了Ajax引擎本身。只有当确定需要从服务器读取新数据时，Ajax引擎才会将请求提交给服务器。

Ajax:异步JavaScript和XML，实现客户端和服务器端数据交换的过程。使用该技术的优点是不需要刷新页面，可以在等待页面传输数据的同时进行其他操作。

这是异步调用的一个好例子。首先，我们必须理解异步和同步的概念。

比如你去图书馆借某本书，可惜这本书已经在图书馆借走了。此时，可以采用两种方法。

第一种方式：在图书馆等到有人还书，然后去吃饭睡觉。

第二种方式：直接和图书管理员做约定，如果有人还书直接通知你。那你该怎么办？到时候我会通知你的。

而第一种方式就是同步的表现，你必须等别人还书(等服务器返回信息)后再做其他事情，直到你死为止。

第二种方法是异步性能，不浪费时间，合理利用时间，高效做事。

在这种情况下，你会采用哪种方法？

选择第一个，哈哈，说明你太执着了；选择第二个，说明你灵活，合理安排生活。这取决于你。

Ajax如何从浏览器向服务器发送Http请求？

这需要使用一个重要的对象，XMLHttpRequest。

首先，让我们看看XMLHttpRequest对象的属性和方法。

的主要属性：

readyState属性有五个状态值。

0:未初始化且未初始化。XMLHttpRequest对象已创建，但尚未初始化。1:正在加载，请求发送但未调用。已经准备好发送了。2:已加载，发送已调用，标题和状态可用。已发送，但尚未收到响应。3:是交互，下载响应，但responsetext只部分设置。答复正在被接受，但还不完整。4:是，完成，下载完毕。回应被接受。

ResponseText:服务器返回的响应文本。只有当readyState=3有值时，根据readyState的状态值，我们可以知道readyState=3时，返回的响应文本是不完整的，只有readyState=4完全返回时，才能接受所有的响应文本。

响应：作为Dom文档对象的响应.响应是xml，可以解析成Dom对象。

状态：服务器的Http状态代码。如果是200，表示OK，404，表示没找到。

StatusText:服务器http状态代码的文本。比如好，没找到。

主要方法：

Open(方法、url、布尔值):打开XMLHttpRequest对象。方法包括获取、发布、删除和放置。如果您查找数据并从服务器获得某些数据，请使用get。如果是直接提交给服务器更新某些数据，使用post；Url是请求的资源的地址。第三个参数指示是否使用异步。默认值为真，因为Ajax的特点是异步传输。如果使用同步，则为False。和异步同步已经在上面举例说明。

Send(body):向Ajax引擎发送请求，让Ajax引擎运行。要发送的内容可以是所需的参数。如果没有参数，直接发送(null)。

如何使用Ajax技术？

首先，有触发Ajax事件的客户端事件。

然后，创建一个xmlHttpRequest对象，该对象根据不同的浏览器而不同。使用开放调用并向Ajax引擎发送请求。

最后，执行完成后，结果返回给客户端。

执行过程如下：\

测试代码如下：

要创建xmlHttpRequest对象：

函数createxmlhttprequest(){//表示当前浏览器不是ie，如ns、Firefox if(window . xmlhttprequest){ xmlhttp=new xmlhttprequest()；} else if(窗口。ActiveX object){ xmlHttp=new ActiveX object(' Microsoft。XMLHTTP’)；}}客户端事件触发器：函数validate (field) {if (trim (field。值)。长度！=0){//create xmlhttprequest createxmlhttprequest()；var url='user_validate.jsp？userId=' trim(field . value)' timestampt=' new Date()。getTime()；//alert(URL)；xmlHttp.open('GET '，url，true)；//方法地址。处理后自动调用，回调。xmlHttp.onreadystatechange=回调；xmlhttp . send(null)；//将参数发送到Ajax引擎} else { document . getelementbyid(' useridspan ')。innerhtml=}}结果返回操作：

函数回调(){ { alert(xmlhttp . readystate)；if(xmlhttp . readystate==4){//Ajax引擎初始化if(xmlHttp.status==200){ //http协议成功//alert(xmlhttp . responsetext)；document . getelementbyid(' userIdSpan ')。innerHTML=' font color=' red ' ' XMlhttp . responsetext '/font '；}else {alert('请求失败，错误代码=' XMlhttp . status)；}}}注意：

onreadyStateChange事件，当readyState状态值改变时触发。

当xmlHttpRequest提交http请求时，readyState会经历五个状态值(0、1、2、3、4)，因此回调函数中的alert(xmlHttp.readyState)会连续输出1、2、3、4。不会输出0状态，因为当0状态存在时，不会执行此事件。

PS:当时eslipse默认网页浏览器中的readyState状态序列输出总是：1，3，4，2。当时很纠结，因为对状态值含义的分析，结果应该是1，2，3，4。过了很久才发现是浏览器问题。不同的浏览器有不同的结果。用IE浏览器测试，结果是1，2，3，4。哈哈，真的只有意想不到，没有什么是搜不到的。