异步 JavaScript 和 XML - AJAX

AJAX = 异步 JavaScript 和 XML。

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

AJAX最大的优点是可以与服务器交换数据并更新部分网页内容，而无需重新加载整个页面。

AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。

。 。 。 。 。 。 。 。 。 。

AJAX 应用程序

使用XHTML+CSS表达信息；

使用JavaScript操作DOM（文档对象模型）来执行动态效果；

使用 XML 和 XSLT 操作数据；

使用 XMLHttpRequest 或新的 Fetch API 与 Web 服务器异步交换数据；

注意：AJAX 不同于 Flash、Silverlight 和 Java Applet 等 RIA 技术。

::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::

AJAX 简介

AJAX 是一种允许您更新网页的部分内容而无需重新加载整个页面的技术。

。 。 。 。 。 。 。 。 。 。 。

什么是 AJAX？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速、动态网页的技术。

http://www.gsm-guard.net/a/lm/gjcpmcx/

AJAX 允许通过在后台与服务器交换少量数据来异步更新网页。这意味着可以更新网页的某些部分，而无需重新加载整个页面。

对于传统网页（不使用AJAX），如果内容需要更新，则必须重新加载整个网页。

使用AJAX的应用案例有很多：新浪微博、谷歌地图、开心网等

。 。 。 。 。 。 。 。 。 。 。

AJAX 基于现有的互联网标准

AJAX 基于现有的互联网标准并结合使用它们：

XMLHttpRequest 对象（与服务器异步交换数据）

JavaScript/DOM（信息显示/交互）

CSS（定义数据样式）

XML（作为转换数据的格式）

AJAX 应用程序与浏览器和平台无关！

。 。 。 。 。 。 。 。 。 。

Google 建议

2005 年，Google 通过其 Google Suggest 使 AJAX 流行起来。

Google Suggest 使用 AJAX 创建高度动态的 Web 界面：当您在 Google 搜索框中输入关键字时，JavaScript 会将这些字符发送到服务器，服务器返回搜索建议列表。

。 。 。 。 。 。 。 。 。 。

今天开始使用 AJAX

AJAX 基于现有标准。这些标准已被大多数开发人员使用多年。

::::::::::::::::::::::::::::::::::::::::::::::: :::: :::::::::::::::::::::::::::::::::

AJAX - 创建 XMLHttpRequest 对象

（可扩展超文本传输​​请求（计算机术语））XMLHttpRequest 是 AJAX 的基础。

所有现代浏览器都支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于与后台服务器交换数据。这意味着可以更新网页的某些部分，而无需重新加载整个页面。

。 。 。 。。 。 。 。 。 。 。 。

创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 和 Opera）都有内置的 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：variable=new XMLHttpRequest();

旧版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：variable=new ActiveXObject("Microsoft.XMLHTTP");

要与所有现代浏览器（包括 IE5 和 IE6）配合使用，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建一个 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject

::::::::::::::::::::::::::::::::::::::::::::::: :::: ::::::::::::::::::::::::::::::::::

AJAX - 向服务器发送拉取请求

XMLHttpRequest 对象用于与服务器交换数据。

。 。 。 。 。 。 。 。 。 。 。

向服务器发送请求

要向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

www.gsm-guard.net("GET","ajax_info.txt",true);

xmlhttp.send();

方法                                     描述

open(method,url,async) 指定请求类型、URL 以及是否异步处理请求。

？

                                                        async: true（异步）或 false（同步）

发送（字符串）                                                                                                                                                                                                             

。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。

获取还是发布？

与 POST 相比，GET 更简单、更快，并且在大多数情况下都有效。

但是，以下情况请使用POST请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 无数据限制）

在发送包含未知字符的用户输入时，POST 比 GET 更稳定、更可靠

。 。 。 。 。 。 。 。 。 。 。 。

GET 请求

。 。 。 。 。 。 。 。 。 。 。 。

POST 请求

如果您需要像 HTML 表单一样 POST 数据，请使用 setRequestHeader() 添加 HTTP 标头。然后在send()方法中指定要发送的数据

方法

setRequestHeader(header,value) 将 HTTP 标头添加到请求中。

？

。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。

url - 服务器上的文件

open()方法的url参数是服务器上文件的地址：

www.gsm-guard.net("GET","ajax_test.html",true);

该文件可以是任何类型的文件，例如 .txt 和 .xml，也可以是服务器脚本文件，例如 .asp 和 .php（可以在发回响应之前在服务器上执行任务）。

。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。

异步 - 对还是错？

AJAX 是指异步 JavaScript 和 XML。

如果 XMLHttpRequest 对象要用于 AJAX，则其 open() 方法的 async 参数必须设置为 true：

www.gsm-guard.net("GET","ajax_test.html",true);

发送异步请求对于 Web 开发人员来说是一个巨大的改进。在服务器上执行的许多任务非常耗时。在 AJAX 出现之前，这可能会导致应用程序挂起或停止。

使用 AJAX，JavaScript 不需要等待服务器的响应，而是：

在等待服务器响应的同时执行其他脚本

准备好后处理响应

。 。 。 。 。 。 。 。 。 。 。 。 。 。

异步=true

当使用 async=true 时，指定响应 onreadystatechange 事件中的就绪状态而执行的函数

。 。 。 。 。 。 。 。 。 。 。 。 。 。

异步 = false

如果要使用async=false，请将open()方法中的第三个参数更改为false：

www.gsm-guard.net("GET","test1.txt",false);

我们不建议使用async=false，但是对于一些小请求，也是可以的。

请记住，JavaScript 会等到服务器响应准备好后再继续。如果服务器繁忙或缓慢，应用程序将挂起或停止。

注意：当你使用 async=false 时，请不要编写 onreadystatechange 函数 - 只需将代码放在 send() 语句后面

::::::::::::::::::::::::::::::::::::::::::::::: :::: ::::::::::::::::::::::::::::::::::::::::::::::::: :::

AJAX - 服务器响应

。 。 。 。 。 。 。 。 。

服务器响应

要从服务器获取响应，请使用 XMLHttpRequest 对象的responseText 或responseXML 属性。

属性                   描述

responseText 获取字符串形式的响应数据。

responseXML 获取XML 形式的响应数据。

。 。 。 。 。 。 。 。 。

responseText 属性

如果服务器的响应不是 XML，请使用 responseText 属性。

responseText 属性以字符串形式返回响应

。 。 。。 。 。 。 。 。

响应 XML 属性

如果服务器的响应是XML并且需要解析为XML对象，请使用responseXML属性

::::::::::::::::::::::::::::::::::::::::::::::: :::: ::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::: ::

AJAX - onreadystatechange 事件

onreadystatechange 事件

当请求发送到服务器时，我们需要执行一些基于响应的任务。

每当readyState发生变化时，就会触发onreadystatechange事件。

readyState属性存储XMLHttpRequest的状态信息。

以下是 XMLHttpRequest 对象的三个重要属性：

属性

onreadystatechange 存储每当readyState 属性发生变化时调用的函数（或函数名称）。

？从 0 更改为 4。

                                        0: 请求未初始化

？ |

                        3：请求正在处理中

                                      4: 请求已完成，响应已准备好

状态                     200：“正常”

                          404：找不到页面

在 onreadystatechange 事件中，我们指定当服务器响应准备好处理时要执行的任务。

当readyState等于4且status为200时，表示响应就绪

注：onreadystatechange事件被触发4次（0 - 4），即：0-1、1-2、2-3、3-4，对应readyState的每次变化。

。 。 。 。 。 。 。 。 。 。 。 。 。

使用回调函数

回调函数是作为参数传递给另一个函数的函数。

如果您的站点上有多个 AJAX 任务，您应该编写一个标准函数来创建 XMLHttpRequest 对象，并为每个 AJAX 任务调用该函数。

函数调用应包含 URL 以及 onreadystatechange 事件发生时要执行的任务（每次调用可能不同）

。 。 。 。 。 。 。 。 。 。 。 。

常见服务器状态码及其对应含义如下：

200：服务器响应正常。

304：自上次请求以来，资源没有以任何方式被修改（这通常用于浏览器的缓存机制，特别是在使用 GET 请求时）。

400：找不到请求的资源。

401：访问资源的权限不足。

403：无权访问该资源。

404：要访问的资源不存在。

405：需要访问的资源被禁止。

407：访问的资源需要代理认证。

414：请求的URL太长。

500：服务器内部错误。

。 。 。 。 。 。 。 。 。 。 。 。

填写状态代码以避免再次搜索：

100 - 客户端必须继续发出请求

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

200——交易成功

201——提示知道新文件的网址

202——已受理并处理，但处理未完成

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

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

205 - 服务器已完成请求，用户代理必须重置当前查看的文件

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

300 - 请求的资源在多个位置可用

301——删除请求数据

302 - 在其他地址找到请求的数据

303 - 建议客户访问其他网址或访问方式

304——客户端执行了GET，但文件没有改变

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

获取

306 - 以前版本的 HTTP 中使用的代码，当前版本中不再使用

307 - 声明临时删除所请求的资源

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

401——授权请求失败

402——保留有效的ChargeTo头响应

403 - 请求不允许

404 - 未找到文件、查询或 URL

405——用户在Request-Line字段中定义的方法不被允许

406——根据用户发送的Accept，请求的资源无法访问

407 - 与401类似，用户必须首先在代理服务器上获得授权

408 - 客户端未在用户指定的时间内完成请求

409 - 当前资源状态无法完成请求

410 - 该资源不再存在于服务器上并且没有进一步的参考

411 - 服务器拒绝对用户定义的内容长度属性的请求

412 - 当前请求中的一个或多个请求头字段不正确

413 - 请求的资源大于服务器允许的

414 - 请求的资源 URL 长度超过服务器允许的长度

415——请求的资源不支持请求的项目格式

416 - 请求中包含Range请求头域，当前请求资源范围内没有Range指示值，且请求中不包含If-Range请求头域

417 - 服务器不满足请求的 Expect 标头字段中指定的期望。如果是代理服务器，下级服务器可能无法满足请求

500 - 服务器生成内部错误

501 - 服务器不支持请求的功能

502 - 服务器暂时不可用，有时是为了防止系统过载

503——服务器超载或暂停维护

504——网关过载，服务器使用另一个网关或服务来响应用户，等待时间设置值较长

505 - 服务器不支持或拒绝支持请求标头中指定的 HTTP 版本

::::::::::::::::::::::::::::::::::::::::::::::: :::: ::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::

AJAX ASP/PHP 示例

AJAX 用于创建更多动态应用程序

。 。 。 。 。 。 。 。 。 。 。 。 。

xmlhttp.readyState 的值及解释：

0：请求未初始化（尚未调用 open()）。

1：请求已建立，但尚未发送（尚未调用send()）。

2：请求已发送并正在处理（通常现在可以从响应中获取内容标头）。

3：请求正在处理中；通常响应中已经有一些数据可用，但服务器尚未完成响应的生成。

4：响应完成；您可以获取并使用服务器的响应。

。 。 。 。 。 。 。 。 。 。 。 。

xmlhttp.status 的值及解释：

100 - 客户端必须继续发出请求

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

200——交易成功

201——提示知道新文件的网址

202——已受理并处理，但处理未完成

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

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

205 - 服务器已完成请求，用户代理必须重置当前查看的文件

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

300 - 请求的资源在多个位置可用

301——删除请求数据

302 - 在其他地址找到请求的数据

303 - 建议客户访问其他网址或访问方式

304——客户端执行了GET，但文件没有改变

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

获取

306 - 以前版本的 HTTP 中使用的代码，当前版本中不再使用

307 - 声明临时删除所请求的资源

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

401——授权请求失败

402——保留有效的ChargeTo头响应

403 - 请求不允许

404 - 未找到文件、查询或 URL

405——用户在Request-Line字段中定义的方法不被允许

406——根据用户发送的Accept，请求的资源无法访问

407 - 与401类似，用户必须首先在代理服务器上获得授权

408——客户端没有在用户指定的时间内完成请求

409 - 当前资源状态无法完成请求

410 - 该资源不再存在于服务器上并且没有进一步的参考

411 - 服务器拒绝用户定义的 Content-L长度属性请求

412 - 当前请求中的一个或多个请求头字段不正确

413 - 请求的资源大于服务器允许的

414 - 请求的资源 URL 长度超过服务器允许的长度

415——请求的资源不支持请求的项目格式

416 - 请求中包含Range请求头域，当前请求资源范围内没有Range指示值，且请求中不包含If-Range请求头域

417 - 服务器不满足请求的 Expect 标头字段中指定的期望。如果是代理服务器，下级服务器可能无法满足请求

在一起

500 - 服务器生成内部错误

501 - 服务器不支持请求的功能

502 - 服务器暂时不可用，有时是为了防止系统过载

503——服务器超载或暂停维护

504——网关过载，服务器使用另一个网关或服务来响应用户，等待时间设置值较长

505 - 服务器不支持或拒绝支持请求标头中指定的 HTTP 版本

1xx：信息响应类，表示收到请求，继续处理

2xx：处理成功响应类，表示该动作已成功接收、理解并接受

3xx：重定向响应类，为了完成指定的动作，必须经过进一步的处理

4xx：客户端错误，客户端请求包含语法错误或无法正确执行

5xx：服务器错误，服务器无法正确执行正确的请求

xmlhttp.readyState==4 && xmlhttp.status==200 的说明：请求完成并成功返回

::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::

AJAX 数据库示例

AJAX可用于与数据库动态通信

::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::

AJAX XML 示例

AJAX 可用于与 XML 文件进行交互通信。

来自“ITPUB博客”，链接：http://www.gsm-guard.net/31552074/viewspace-2214170/，如需转载，请注明出处，否则将追究法律责任。

转载于：http://www.gsm-guard.net/31552074/viewspace-2214170/