典型的http通信：浏览器向服务器发出请求，服务器向客户端返回响应，浏览器重新加载页面，这种不连续的页面加载方式导致用户的体验变得杂乱，缺乏连贯性。

如：

在一般的web应用程序中，用户填写表单字段然后单击submit按钮，然后整个表单发送到服务器，服务器将它转发给处理该表单的脚本（PHP或JAVA），脚本执行完成后再发送回全新的页面。该页面返回的可能是带有已经填充某些数据的新表单的html，也可能返回的是一个确认页面。在服务器上的脚本处理该表单时和返回新页面的这段时间里，用户必须等待且屏幕是一片空白，等到服务器返回数据后再重新绘制出页面。

ajax，用户在填写表单时，数据就会发送给一些javascript代码而不是直接发送给服务器。javascript代码捕获表单数据并向服务器发送请求。此时，用户屏幕上的表单不会闪烁，消失或延迟。用户不用等待服务器的响应就可以继续输入数据，滚动屏幕和继续使用页面。然后，服务器将数据返回给javascript代码（仍然在web表单中），javascript代码决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户就得到了新数据。javascript甚至可以对收到的数据执行一些操作然后再发送另一个请求，完全不需要用户干预。这就是ajax的强大之处，它可以根据需要自行与服务器进行交互，用户甚至不知道幕后所发生的一切。

Ajax允许客户端javascript向服务器请求和接收数据，而无须刷新页面。这种技术允许开发人员创建不中断的应用程序，用新数据重载页面的某些部分。

Ajax表示使用javascript收发来自web服务器的数据，且无须重载整个页面（仅刷新页面的局部）的模式------在形式和功能上模拟桌面应用程序。

就目前而言，编写应用程序时有两种基本的选择：

桌面应用程序
WEB应用程序

桌面应用程序通常从其他网站下载，安装到您的计算机上。桌面应用程序可能使用互联网下载更新，但运行这些应用程序的代码在您的桌面计算机上。

WEB应用程序运行在互联网的某台WEB服务器上，要通过WEB浏览器访问这种应用程序。

桌面应用程序一般很快，就在您的计算机上运行，不用等待互联网的链接；web应用程序提供了在桌面上不能实现的服务（比如天猫，淘宝这种具有支付功能的网站），但是，随着web的强大而出现的是等待，等待服务器的响应，等待屏幕的刷新和等待请求返回和生成新的页面。

XMLHttpRequest的一个优点在于它易于使用，我们只需创建对象，发送请求，等待服务器的响应即可。

ajax是由html，javascript技术，DHTML和DOM组成。

应用Ajax的例子：

QQ空间：

你不停的拉滚动条，动态就一直在更新内容，页面没有刷新。

百度搜索：

你开始输入数据时，一个下拉框就会显示你可能干兴趣的与搜索关键字相关的条目。

浏览器支持：

IE5+

FF1+

Opera9+

Safari2+

Chrome1+

创建XMLHttpRequest对象：

所有浏览器都有javascript对象XMLHttpRequest。

XMLHttpRequest对象起源于一个Microsoft组件XmlHttp，组件在库MSXML（Active XML解析器）中随IE5发布，该组件为开发人员提供了一种打开HTTP连接并检索XML数据的简单方法。尽管XMLHttpRequest对象名称包含有XML，但可以使用它获取其他类型的数据。

跨浏览器问题：

浏览器对XMLHttpRequest对象的支持分两种，ActiveX（ie5/6）和内置支持（其他浏览器）。这两类浏览器仅在创建XMLHttpRequest对象时有区别，在创建后，其余的代码则兼容各种浏览器。

第一类：使用ActiveX（IE5/6)

因为XMLHttpRequest对象来源于库MSXML（Active XML解析器），所以在这些浏览器中实例化XMLHttpRequest对象，就需要创建一个ActiveX对象。

[html] view plain copy print ?

varmyhttp=newActiveXObject("Microsoft.XMLHttp");

这行代码创建Microsoft的XMLHttpRequest对象的第一个版本。Microsoft的XmlHttp对象还有其他许多的版本。后面的例子将给出使用最新版本的方式。

第二类：调用内置的构造函数（IE7+，其他浏览器）

[html] view plain copy print ?

varmyhttp=newXMLHttpRequest();

这行代码创建的XMLHttpRequest对象没有不同的版本，只需调用构造函数，就能创建和使用XMLHttpRequest对象。

兼容：一个函数创建适用于所有的浏览器的对象。

[html] view plain copy print ?

functioncreateXmlHttpRequest(){
if(window.XMLHttpRequest)
{
varoHttp=newXMLHttpRequest();
returnoHttp;
}
elseif(window.ActiveXObject)
{
varversions=
[
"MSXML2.XmlHttp.6.0",
"MSXML2.XmlHttp.3.0"
];
for(vari=0;i@H_212_403@<versions.length;i++)
{
try
{
oHttp=newActiveXObject(versions[i]);
returnoHttp;
}
catch(error)
{
//donothinghere
}
}
}
returnnull;
}

首先检查是否存在window.XMLHttpRequest，如果存在，函数即使用XMLHttpRequest构造函数来创建XMLHttpRequest对象（函数遇到return语句退出函数不再执行函数后面的代码）。否则，就检测用于ie5/6的window.ActiveXObject，并尝试用最新的XmlHttp版本创建对象。如果所有的情况都不能创建XMLHttpRequest对象，那么就返回null。

注意：测试顺序很重要。先测试window.XMLHttpRequest对象，是因为ie7支持window.XMLHttpRequest和window.ActiveXObject。

使用XMLHttpRequest对象：

一旦创建了XMLHttpRequest对象，就可以准备用它来请求数据。该对象提供的方法和属性，都与发送请求及处理响应有关。XMLHttpRequest对象唯一的目的就是让您发送请求和接收响应，其他一切都是javascript，css或者页面中的其他代码的工作：改变用户界面，切换对象，解析服务器返回的数据。

第一步，open()方法：

@H_301_541@ 初始化该XMLHttpRequest对象，接受三个参数：

@H_301_541@

原生Ajax讲解

应用Ajax的例子：

浏览器支持：

创建XMLHttpRequest对象：

跨浏览器问题：

第一类：使用ActiveX（IE5/6)

第二类：调用内置的构造函数（IE7+，其他浏览器）

兼容：一个函数创建适用于所有的浏览器的对象。

使用XMLHttpRequest对象：

第一步，open()方法：

第二步，send()方法：

status属性：

http状态码

异步请求：

http就绪状态

读取响应数据

XMLHttpRequest对象属性--------responseText

XMLHttpRequest对象属性----------responseXML

实践

例子：

封装Ajax：创建简单的Ajax模块

使用ajax的步骤：

在请求和响应中使用XML

使用XML

从客户机到服务器的XML

使用普通的文本向服务器发送名/值对

向服务器发送XML

将名/值对转化为XML

使用XML发送名/值对

从服务器到客户机的XML

进入XML

从服务器接收XML

将XML作为纯文本（无格式的纯文本处理）

将XML当成XML（使用dom处理）

解析XML的其他可选方法

处理延迟

注意事项：

XMLHttpRequest对象不能访问任何不同来源的文档或文件。

最后：

总结下发出请求的步骤

重定向和重新路由

边界情况

其他请求类型

HEAD请求

检查URL

有用的HEAD请求

猜你在找的Ajax相关文章