Ajax范例讲解与技术原理_H5之家 - 中国HTML5教程资源分享第一站

当前位置:我的异常网» Ajax » Ajax范例讲解与技术原理

Ajax范例讲解与技术原理

网友分享于：2015-08-26 浏览：0次

Ajax实例讲解与技术原理

林炳文Evankaka原创作品。转载请注明出处

摘要：AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。解决传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

一、Ajax技术与原理
1.1、AjaxAJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

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

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

1.2、Ajax所包含的技术

大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。

1.使用CSS和XHTML来表示。

2. 使用DOM模型来交互和动态显示。

3.使用XMLHttpRequest来和服务器进行异步通信。

4.使用javascript来绑定和调用。

AJAX 的要点是 XMLHttpRequest 对象。

不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。

IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象
1.3、Ajax的工作原理

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

来看看和传统方式的区别

再来看看它们各自的交互

浏览器的普通交互方式

浏览器的Ajax交互方式

在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：
动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。
提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。
消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。

1.4、XMLHttpRequest 对象的三个常用的属性

1. onreadystatechange 属性
onreadystatechange 属性存有处理服务器响应的函数。
下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：

xmlHttp.onreadystatechange=function() { // 我们需要在这里写一些代码 }2.readyState 属性
readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
readyState 属性可能的值：
状态描述
0 请求未初始化（在调用 open() 之前）
1 请求已提出（调用 send() 之前）
2 请求已发送（这里通常可以从响应得到内容头部）
3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4 请求已完成（可以访问服务器响应并使用它）
我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成（意味着可获得数据）：
xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // 从服务器的response获得数据 } }3.responseText 属性
可以通过 responseText 属性来取回由服务器返回的数据。
在我们的代码中，我们将把时间文本框的值设置为等于 responseText：
xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } }

其它属性如下：

1.5、xmlhttprequst的方法

1.open() 方法
open() 有三个参数。第一个参数定义发送请求所使用的方法,第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。具体看博文后面还有细讲

xmlHttp.open("GET","test.php",true); 2.send() 方法
send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录，那么代码是这样的：
xmlHttp.send(null);

具体看博文后面还有细讲。

其它方法如下：

二、Ajax编程步骤

为了方便理解，我给AJAX统一了一个流程，要想实现AJAX，就要按照以后步骤走：

（1）创建XMLHttp对象。

（2）设置请求方式。

（3）调用回调函数。

（4）发送请求。

下面来看下具体步骤：

2.1、创建XMLHttp对象

创建XMLHttp对象的语法是:

var xmlHttp=new XMLHttpRequest();

如果是IE5或者IE6浏览器，则使用ActiveX对象，创建方法是：

var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");一般我们手写AJAX的时候，首先要判断该浏览器是否支持XMLHttpRequest对象，如果支持则创建该对象，如果不支持则创建ActiveX对象。JS代码如下：
//第一步：创建XMLHttpRequest对象 var xmlHttp; if (window.XMLHttpRequest) {//分浏览器创建XMLHttp对象 xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") } 2.2、设置请求方式