AJAX

1、简介

AJAX：（Asynchronnous JavaScript And XML）异步的JavaScript与XML。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

下面是Ajax 应用程序所用到的基本技术：

①HTML 用于建立Web 表单并确定应用程序其他部分使用的字段。

②JavaScript 代码是运行Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。

③DHTML 或Dynamic HTML，用于动态更新表单。我们将使用div、span 和其他动态HTML 元素来标记HTML。

④文档对象模型DOM 用于（通过JavaScript 代码）处理HTML 结构和（某些情况下）服务器返回的XML。

Ajax不是一种新技术，而是几种蓬勃发展的几种强大技术以新的方式组合而成，Ajax包括：基于XHTML和CSS标准的表示；使用Document Object Model进行动态的显示和交互；使用XML Request与服务器进行异步通讯；使用JavaScript绑定一切。

之前的是用户的请求直接向服务器提交。我们看一个计算的例子。

Ajax的工作原理，Ajax的核心是JavaScript和XMLHttpRequest。该对象在Internet Explorer5中首次引入，它是一种支持异步请求的技术。简单的说：XmlHttpRequest使你可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性能。下面是使用Ajax完成的功能：1、动态更新购物车的物品总数，无需用户单击Update并等待服务器发送整个页面。2、提升站点的性能，这是通过减少从服务器下载的数据量来实现的。例如：当更新购物车一个物品的数量时，会重新载入整个页面，这必须下载32K的数据，而使用Ajax计算新的总量，服务器只需要返回新的总量值，因此所需要的带宽仅仅为原来的百分之一。3、消除了用户每次输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。

用户的请求不再直接向服务器提交，而是使用XMLHttpRequest异步的向服务器发送，从而避免了重载页面。

特征：

异步发送请求

服务器响应的是数据不是页面内容。

2、XMLHttpRequest/ActiveXObject

XMLHttpRequest对象，现代浏览器均支持XMLHttpRequest对象（IE5 和IE6 使用ActiveXObject）。

XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest是整个Ajax技术的灵魂。Ajax异步发送请求，就是使用的XMLHttpRequest对象。

使用Ajax进行异步通信的过程：

创建XMLHttpRequest对象。

通过XMLHttpRequest对象向服务器发送请求。

创建回调函数，见识服务器响应状态，在服务器响应完成后，启动回调函数。

回调函数动态更新HTML页面。

创建XMLHttpRequest对象，所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及Opera）都支持创建XMLHttpRequest对象的语法：

Varxhr=new XMLHttpRequest();

为了应对所有的现代浏览器，包括IE5 和IE6，请检查浏览器是否支持XMLHttpRequest对象。如果支持，则创建XMLHttpRequest对象。如果不支持，则创建ActiveXObject：

var xmlHttpRequest;

function createXMLHttpRequest() {

if(window.XMLHttpRequest) {

//火狐谷歌

window.alert("支持XMLHttpRequest");

xmlHttpRequest = new XMLHttpRequest();

}else if (window.ActiveXObject) {

//IE5 IE6

try{

xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");

window.alert("不支持XMLHttpRequest,但是是Msxml2.XMLHTTP");

} catch (e) {

try{

xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

window.alert("不支持XMLHttpRequest,但是是Microsoft.XMLHTTP");

} catch (e) {

}

}

}

}

XMLHttpRequest对象的方法，属性和事件

方法：

1.open(method,url),

open方法的第一个参数指定HTTP方法或动作，这个字符不区分大小写，但是通常大家用大写字母匹配HTTP协议。”GET”和”POST”方法得到广泛的支持。”GET”用于常规请求，它适用于当URL完全指定请求资源，当请求对服务器没有任何副作用以及当服务器的响应式可缓存时。“POST”

方法常用于HTML表单。它在请求主体中包含额外的数据（表单数据）且这些数据长存储在服务器上的数据库中(副作用)。相同URL的重复POST 请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。

2.setRequestHeader(“Content-Type”,” application/x-www-form-urlencoded”)

在使用POST方法的时候需要“Content-Type”头指定请求主体的MIME类型。

3.send()

发起HTTP请求，在使用GET请求的时候这个方法没有参数时候就写上参数null，在使用POST请求的时给这个方法传递参数

属性：

XMLHttpRequest的属性：

onreadystatechange：该属性用于指定XMLHttpRequest对象状态发生改变时的事件处理函数。

XMLHttpRequest的对象有如下几种状态：

0：XMLHttpRequest对象还没有完成初始化。

1：XMLHttpRequest对象开始发送请求。

2：XMLHttpRequest对象的请求发送完成。

3：XMLHttpRequest对象开始读取服务器的响应。

4：XMLHttpRequest对象读取服务器响应结束。

它的这几个状态可以通过下面的readyState属性读取。每当XMLHttpRequest对象的readyState属性改变时，其onreadystatechange 属性指定的方法都会被触发。

readyState：获取XMLHttpRequest对象的处理状态

responseText：获取服务器的响应文本，得到是文本形式。

responseXML：获取服务器响应的XML文档对象，得到的是xml。

status：服务器返回的状态码(数字)，服务器响应完成时，才有状态码。

statusText：服务器返回的状态文本信息，服务器响应完成时，才有状态信息。

服务器的响应完成后，依然不可以直接获取服务器响应。因为服务器响应也有很多的情况。

响应状态码（status）:

1xx：请求收到，继续处理

100——客户必须继续发出请求

101——客户要求服务器根据请求转换HTTP协议版本

2xx：操作成功收到，分析、接受

200——响应正常

201——提示知道新文件的URL

202——接受和处理、但处理未完成

203——返回信息不确定或不完整

204——请求收到，但返回信息为空

205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件

206——服务器已经完成了部分用户的GET请求

3xx：完成此请求必须进一步处理

300——请求的资源可在多处得到

301——删除请求数据

302——在其他地址发现了请求数据

303——建议客户访问其他URL或访问方式

304——客户端已经执行了GET，但文件未变化。（资源没有任何修改）

305——请求的资源必须从服务器指定的地址得到

306——前一版本HTTP中使用的代码，现行版本中不再使用

307——申明请求的资源临时性删除

4xx：请求包含一个错误语法或不能完成

400——错误请求，如语法错误