浅谈ajax原理的实现

1。什么是Ajax
Ajax被称为异步Javaｓｃｒｉｐｔ和XML（异步Javaｓｃｒｉｐｔ和XML），这是一种用于创建交互式Web应用程序的Web开发技术：
使用XHTML标准化演示文稿；

XML和XSLT用于数据交换和相关操作。

异步数据通信使用XMLHttpRequest对象与服务器。

使用Javaｓｃｒｉｐｔ操作文档对象模型进行动态显示和交互。

使用Javaｓｃｒｉｐｔ绑定和处理所有数据。

2.ajax的工作原理
Ajax的原理相当于在用户和服务器之间添加一个中间层（ajax引擎），它异步地使用用户的操作和服务器响应，而不是所有的用户请求都提交给服务器，例如对Ajax引擎本身的数据验证和数据处理等。只有在确定需要从服务器读取新数据时，Ajax引擎才提交给服务器。
ajax：异步Javaｓｃｒｉｐｔ和XML实现了客户机和服务器之间的数据交换过程，使用技术的优点是不刷新页面，并在等待页面传输数据时执行其他操作。

这是异步调用的一个很好的体现。首先，我们必须了解异步和同步的概念是什么。

例如，你去图书馆借一些书，可惜图书馆的书借了，现在可以用两种方法。

第一件事：在图书馆里等着，直到有人还书，然后吃饭睡觉。

第二种方式：直接与图书管理员达成协议，如果有人还书，指示你，你应该忙忙，时间会通知你。

第一种方法是同步执行，必须等待其他人返回图书（等待服务器返回其他信息，死亡）。

第二种方式是异步运行，不耽误时间，合理利用时间有效地工作。

在这种情况下，你会怎么做呢

选择第一个，哈哈，表现出你太执着，选择第二个，解释你是灵活合理的，安排你的生活。

Ajax如何从浏览器发送HTTP请求到服务器

这是一个重要的对象XMLHttpRequest。

让我们先了解XMLHttpRequest对象的属性和方法。

主要属性：

readyState属性有五个状态值。

0：这是未初始化的，未初始化。XMLHttpRequest对象已经创建，但未初始化。

1：加载，发送请求，但不调用。它已经准备好发送了。

2：它已加载，发送调用，报头和状态可用。它已经发送，但尚未收到响应。

3：它是互动的，下载响应，但只有部分完成。正在接收响应，但不完整。

4：完成，下载完毕。接受响应。

responseText：服务器返回的响应文本。只有当readyState > = 3可有什么价值。根据发生的状态值，我们可以知道，当readyState = 3响应文本是不完整的，只有4是发生完全返回，这样所有的响应文本可接受。

Dom：响应responseXML之外的文档对象的响应信息是XML，它可以解析为DOM对象。

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

StatusText：服务器的HTTP状态代码的文本。例如，好的，没有发现。

主要方法：

打开（方法、URL、布尔）：打开XMLHttpRequest对象的方法，方法得到，帖子，删除，放。如果你看看数据，从服务器获得数据，使用得到的。如果是直接提交到服务器，更新一定数量的数据，后使用；URL是请求的资源的地址。第三个参数表示是否是异步的。默认的是真的，因为AJAX的特点是异步传输。如果同步、异步和同步错误。上面已说明。

发送（正文）：为Ajax引擎发送一个请求，让Ajax引擎运行。发送的内容可以是必需的参数，如果没有参数，则直接发送（null）。

你如何使用Ajax技术

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

然后，XMLHttpRequest对象创建XMLHttpRequest对象的创建，以及不同浏览器。电话打开和发送请求到Ajax引擎发送。

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

执行过程如下：
测试代码如下所示：

创建XMLHttpRequest对象：
创建XMLHttpRequest对象的实例（）{
说当前的浏览器没有IE，如ns，Firefox
如果（窗口。XMLHttpRequest）{
XMLHTTP =新的XMLHttpRequest（）；
如果（窗口。ActiveX对象）{ }
XMLHTTP =新的ActiveX对象（微软。XMLHTTP ）；
}
}
客户端事件触发：
函数验证（字段）{
如果（修剪（字段）值）长度！= 0）
{
/ /创建XMLHttpRequest
CreateXMLHttpRequest（）；
var url =user_validate。jspuserid =+装饰（领域。值）+timestampt =+新的日期（）GetTime（）；
警报（URL）；
XmlHttp.open（
在处理完成后，自动调用和回调。
XmlHttp onreadystatechange =回调；
XmlHttp.send（空）； / /发送参数到Ajax引擎
}否则{ document.getelementbyid（useridspan ）.innerHTML =；}
}
结果返回操作：

函数回调（）{
{
警报（XMLHTTP。readyState）；
如果（XMLHTTP。发生= 4）{ / / Ajax引擎初始化
如果（XMLHTTP。状态= = 200）{ / / HTTP协议是成功的
/ /警报（XMLHTTP。responseText）；
document.getelementbyid（useridspan ）.innerHTML = xmlHttp.responseText + +；
}其他
{
警报（请求失败，错误代码=+ XMLHTTP。状态）；
}
}
}
小心 uff1a

事件被触发时，readyState状态值的变化在onreadystatechange事件。

在XMLHttpRequest提交HTTP请求的过程中，发生通过五个状态值（0, 1, 2，3, 4），所以警报（XMLHTTP。readyState）在回调函数将连续输出1, 2, 3，4。0的状态并不因为输出0态不执行此事件。

PS：readyState以便在eslipse默认Web浏览器输出时总是：1, 3, 4，2。这是很纠结的时候，因为国家的价值意义的分析应该是1, 2, 3，4。半天后，发现这是浏览器的问题。不同的浏览器，执行的结果是不同的。与IE浏览器的测试，结果是1, 2, 3，4，Haha，真的只有想不到的，没有搜索不被发现。