ajax怎么使用，ajax的详细使用步骤,装机部落网赚项目

Ajax 简介

Ajax 由 HTML、JavaScript™ 手艺、DHTML 和 DOM 组成，这一卓越的方式可以将拙笨的 Web 界面转化成交互性的 Ajax 应用程序。它是一种构建网站的壮大方式。

Ajax 实验确立桌面应用程序的功效和交互性，与不断更新的 Web 应用程序之间的桥梁。可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件，不过是在 Web 应用程序中。

Ajax 应用程序所用到的基本手艺：

1、HTML 用于确立 Web 表单并确定应用程序其他部门使用的字段。

2、JavaScript 代码是运行 Ajax应用程序的焦点代码，辅助改善与服务器应用程序的通讯。

3、DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用div、span 和其他动态 HTML 元向来符号 HTML。

4、文档工具模子 DOM 用于（通过 JavaScript 代码）处置HTML 结构和（某些情况下）服务器返回的 XML。

Ajax 的界说

Ajax= Asynchronous JavaScript and XML（以及 DHTML 等）Asynchronous异步JS和XML。

XMLHttpRequest这是一个 JavaScript 工具; 是处置所有服务器通讯的工具,建立该工具很简朴，如清单 1 所示。

清单 1. 建立新的 XMLHttpRequest 工具

<script language=”javascript” type=”text/javascript”>

var xmlHttp = new XMLHttpRequest();</script>

通过 XMLHttpRequest 工具与服务器举行对话的是 JavaScript 手艺。这不是一样平常的应用程序流，这恰恰是 Ajax的壮大功效的泉源。

Ajax 基本上就是把 JavaScript 手艺和 XMLHttpRequest 工具放在 Web 表单和服务器之间。

获得 XMLHttpRequest 的句柄后，使用 JavaScript 代码完成以下义务：

1、获取表单数据：JavaScript 代码很容易从 HTML 表单中抽取数据并发送到服务器。

2、修改表单上的数据：更新表单也很简朴，从设置字段值到迅速替换图像。

3、剖析 HTML 和 XML：使用 JavaScript 代码操作 DOM（请参阅 下一节），处置 HTML 表单服务器返回的 XML数据的结构

对于前两点，需要异常熟悉 getElementById() 方式，如 清单 2 所示。

清单 2. 用 JavaScript 代码捕捉和设置字段值

//捕捉字段值:

// 获得字段”phone”的值并用其建立一个变量phone

var phone = document.getElementById(“phone”).value;

//设置字段值:

// 从response的数组中获得值并将其写到标签中

document.getElementById(“order”).value = response[0];

document.getElementById(“address”).value = response[1];

DOM的功效

当需要在 JavaScript 代码和服务器之间通报 XML 和改变 HTML 表单的时刻，我们再深入研究 DOM。

获取 Request 工具

XMLHttpRequest 是 Ajax 应用程序的焦点.

var xmlhttp;

if (window.XMLHttpRequest)

{// 从 IE7+, Firefox, Chrome, Opera, Safari 中获得XMLHttpRequest工具

xmlhttp=new XMLHttpRequest();

}

else

{//从 IE6, IE5 中获得XMLHttpRequest工具

xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

}

清单 4. 以支持多种浏览器的方式建立 XMLHttpRequest 工具

/* Create a new XMLHttpRequest object to talk to the Web server */

var xmlHttp = false;

/*@cc_on @*/

/*@if (@_jscript_version >= 5)

try {

xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);

} catch (e) {

try {

xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

} catch (e2) {

xmlHttp = false;

}

}

@end @*/

if (!xmlHttp && typeof XMLHttpRequest != ‘undefined’) {

xmlHttp = new XMLHttpRequest();

}

这段代码的焦点分为三步：

1、确立一个变量 xmlHttp 来引用即将建立的 XMLHttpRequest 工具。

2、实验在 Microsoft 浏览器中建立该工具：

1）实验使用 Msxml2.XMLHTTP 工具建立它。

若是失败，再实验 Microsoft.XMLHTTP 工具。

3、若是仍然没有确立 xmlHttp，则以非 Microsoft 的方式建立该工具。 最后，xmlHttp 应该引用一个有用的XMLHttpRequest 工具，无论运行什么样的浏览器。

火锅店怎么做活动方案吸引人，一个正常火锅店月利润

Ajax 的请求/响应

与服务器上的 Web 应用程序打交道的是 JavaScript 手艺，而不是直接提交给谁人应用程序的 HTML 表单。

发出请求

若何使用XMLHttpRequest 工具?

首先–需要一个能够挪用JavaScript 方式 的Web 页面 。

接下来就是在所有 Ajax 应用程序中基本都相同的流程：

1、从 Web 表单中获取需要的数据。

2、确立要毗邻的 URL。

3、打开到服务器的毗邻。

4、设置服务器在完成后要运行的函数。

5、发送请求。

清单 5 中的示例 Ajax 方式就是凭据这个顺序组织的：

清单 5. 发出 Ajax 请求

function callServer() {

// 获得city和state的值

var city = document.getElementById(“city”).value;

var state = document.getElementById(“state”).value;

// 当它们的值任一个不存在的时刻竣事JS

if ((city == null) || (city == “”)) return;

if ((state == null) || (state == “”)) return;

// 建立毗邻的URL工具

var url = “/scripts/getZipCode.php?city=” + escape(city) + “&state=” + escape(state);

// 打开一个毗邻服务器的毗邻

xmlHttp.open(“GET”, url, true);

// 设置一个方式,当请求返回的时刻挪用这个方式

xmlHttp.onreadystatechange = updatePage;

//xmlhttp.onreadystatechange=function()

//{

// if (xmlhttp.readyState==4 && xmlhttp.status==200)

// {

// document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

// }

//}

// 发生链接

xmlHttp.send(null);

}

最先的代码使用基本 JavaScript 代码获取几个表单字段的值。 然后设置一个 PHP 剧本作为链接的目的。 要注意剧本 URL 的指定方式，city 和 state（来自表单）使用简朴的 GET 参数附加在 URL 之后。 最后一个参数若是设为 true，那么将请求一个异步毗邻（这就是 Ajax 的由来）。 若是使用 false，那么代码发出请求后将守候服务器返回的响应。 若是设为 true，当服务器在后台处置请求的时刻用户仍然可以使用表单（甚至挪用其他 JavaScript 方式）。

onreadystatechange属性可以告诉服务器在运行完成后做什么。由于代码没有守候服务器，必须让服务器知道怎么做以便您能作出响应。

在这个示例中，若是服务器处置完了请求，一个特殊的名为 updatePage() 的方式将被触发。

最后，使用值 null 挪用send()。由于已经在请求 URL 中添加了要发送给服务器的数据（city 和state），以是请求中不需要发送任何数据。这样就发出了请求，服务器凭据您的要求事情。

处置响应

1.什么也不要做，直到 xmlHttp.readyState 属性的值即是 4。

2.服务器将把响应填充到 xmlHttp.responseText 属性中。

其中的第一点，即停当状态;

第二点，使用 xmlHttp.responseText 属性获得服务器的响应,清单 6中的示例方式可供服务器凭据 清单 5 中发送的数据挪用。

清单 6. 处置服务器响应

function updatePage() {

if (xmlHttp.readyState == 4) { var response = xmlHttp.responseText;

document.getElementById(“zipCode”).value = response;

}

}

它守候服务器挪用，若是是停当状态，则使用服务器返回的值（这里是用户输入的都会和州的 ZIP 编码）设置另一个表单字段的值。

一旦服务器返回 ZIP 编码，updatePage() 方式就用都会/州的 ZIP 编码设置谁人字段的值，用户就可以改写该值。这样做有两个缘故原由：

保持例子简朴，说明有时刻可能希望用户能够修改服务器返回的数据。

要记着这两点，它们对于好的用户界面设计来说很主要。

毗邻 Web 表单

一个 JavaScript 方式捕捉用户输入表单的信息并将其发送到服务器，另一个 JavaScript 方式监听和处置响应，并在响应返回时设置字段的值。所有这些实际上都依赖于挪用 第一个 JavaScript 方式，它启动了整个历程。

行使 JavaScript 手艺更新表单。

清单 7. 启动一个 Ajax 历程

<form>

<p>City: <input type=”text” name=”city” id=”city” size=”25″

onChange=”callServer();” /></p>

<p>State: <input type=”text” name=”state” id=”state” size=”25″

onChange=”callServer();” /></p>

<p>Zip Code: <input type=”text” name=”zipCode” id=”city” size=”5″ /></p>

</form>