前往顾页
以后地位: 主页 > 收集编程 > Ajax实例教程 >

把握 Ajax,Ajax 简介

时候:2013-09-04 23:55来源:知行网www.zhixing123.cn 编辑:麦田守望者

Ajax 由 HTML、javascript™ 技术、DHTML 和 DOM 构成,这一杰出的体例可以将拙笨的 Web 界面转化成交互性的 Ajax 利用法度。本文的作者是一名 Ajax 专家,他演示了这些技术若何协同事情 —— 从团体概述到细节的会商 —— 使高效的 Web 开辟成为实际。他还揭开了 Ajax 核心观点的奥秘面纱,包含 XMLHttpRequest 工具。
五年前,如果不晓得 XML,您就是一只无人正视的丑小鸭。十八个月前,Ruby 成了存眷的中间,不晓得 Ruby 的法度员只能坐冷板凳了。明天,如果想跟上最新的技术时髦,那您的目标就是 Ajax。

但是,Ajax 不但仅 是一种时髦,它是一种构建网站的强年夜体例,并且不像学习一种全新的说话那样坚苦。

但在详细切磋 Ajax 是甚么之前,先让我们花几分钟体味 Ajax 做 甚么。目前,编写利用法度时有两种根基的挑选:

桌面利用法度
Web 利用法度
二者是近似的,桌面利用法度凡是以 CD 为介质(偶然候可从网站下载)并完整装置到您的计较机上。桌面利用法度可能利用互联网下载更新,但运行这些利用法度的代码在桌面计较机上。Web 利用法度运行在某处的 Web 办事器上 —— 毫不奇特,要经由过程 Web 浏览器拜候这类利用法度。

不过,比这些利用法度的运行代码放在那边更首要的是,利用法度若何运转和若何与其进行交互。桌面利用法度一般很快(就在您的计较机上运行,不消等候互联网连接),具有标致的用户界面(凡是和操纵体系有关)和不凡的静态性。可以单击、挑选、输入、翻开菜单和子菜单、到处巡游,根基上不需求等候。

另外一方面,Web 利用法度是最新的潮流,它们供应了在桌面上不克不及实现的办事(比如 Amazon.com 和 eBay)。但是,伴跟着 Web 的强年夜而呈现的是等候,等候办事器呼应,等候屏幕革新,等候请求前往和天生新的页面。

明显如许说过于简朴了,但根基的观点就是如此。您可能已猜到,Ajax 测验测验建立桌面利用法度的服从和交互性,与不竭更新的 Web 利用法度之间的桥梁。可利用像桌面利用法度中常见的静态用户界面和标致的控件,不过是在 Web 利用法度中。

还等甚么呢?我们来看看 Ajax 若何将拙笨的 Web 界面转化成能敏捷呼应的 Ajax 利用法度吧。

熟行艺,新技能

在谈到 Ajax 时,实际上触及到多种技术,要矫捷地应用它必须深切体味这些不合的技术(本系列的头几篇文章将别离会商这些技术)。好动静是您可能已非常熟谙此中的年夜部分离艺,更好的是这些技术都很容易学习,其实不像完整的编程说话(如 Java 或 Ruby)那样坚苦。

Ajax 的定义

趁便说一下,Ajax 是 Asynchronous javascript and XML(和 DHTML 等)的缩写。这个短语是 Adaptive Path 的 Jesse James Garrett 发明的(请参阅 参考质料),遵循 Jesse 的解释,这不是 个首字母缩写词。

下面是 Ajax 利用法度所用到的根基技术:

HTML 用于建立 Web 表单并肯定利用法度其他部分利用的字段。
javascript 代码是运行 Ajax 利用法度的核心代码,帮忙改进与办事器利用法度的通信。
DHTML 或 Dynamic HTML,用于静态更新表单。我们将利用 div、span 和其他静态 HTML 元夙来标识表记标帜 HTML。
文档工具模型 DOM 用于(经由过程 javascript 代码)措置 HTML 布局和(某些环境下)办事器前往的 XML。
我们来进一步阐发这些技术的职责。今后的文章中我将深切会商这些技术,目前只需熟谙这些组件和技术便可以了。对这些代码越熟谙,就越容易从对这些技术的零散体味转变到真正掌控这些技术(同时也真正翻开了 Web 利用法度开辟的年夜门)。

XMLHttpRequest 工具

要体味的一个工具可能对您来讲也是最陌生的,即 XMLHttpRequest。这是一个 javascript 工具,建立该工具很简朴,如清单 1 所示。

清单 1. 建立新的 XMLHttpRequest 工具

下一期文章中将进一步会商这个工具,现在要晓得这是措置所有办事器通信的工具。继续浏览之前,先停上去想想:经由过程 XMLHttpRequest 工具与办事器进行对话的是 javascript 技术。这不是一般的利用法度流,这恰好是 Ajax 的强年夜服从的来源。

在一般的 Web 利用法度中,用户填写表单字段并单击 Submit 按钮。然后全部表单发送到办事器,办事器将它转发给措置表单的脚本(凡是是 PHP 或 Java,也多是 CGI 过程或近似的东西),脚本履行完成后再发送回全新的页面。该页面多是带有已添补某些数据的新表单的 HTML,也多是确认页面,或是具有按照本来表单中输入数据挑选的某些选项的页面。当然,在办事器上的脚本或法度措置和前往新表单时用户必须等候。屏幕变成一片空缺,比及办事器前往数据后再从头绘制。这就是交互性差的启事,用户得不到当即反应,是以感受不合于桌面利用法度。

Ajax 根基上就是把 javascript 技术和 XMLHttpRequest 工具放在 Web 表单和办事器之间。当用户填写表单时,数据发送给一些 javascript 代码而不是 直接发送给办事器。相反,javascript 代码捕获表双数据并向办事器发送请求。同时用户屏幕上的表单也不会闪动、消逝或延迟。换句话说,javascript 代码在幕后发送请求,用户乃至不晓得请求的发出。更好的是,请求是异步发送的,就是说 javascript 代码(和用户)不消等候办事器的呼应。是以用户可以继续输入数据、动弹屏幕和利用利用法度。

然后,办事器将数据前往 javascript 代码(仍然在 Web 表单中),后者决定若何措置这些数据。它可以敏捷更新表双数据,让人感受利用法度是当即完成的,表单没有提交或革新而用户获得了新数据。javascript 代码乃至可以对收到的数据履行某种计较,再发送另外一个请求,完整不需求用户干预!这就是 XMLHttpRequest 的强年夜的地方。它可以按照需求自行与办事器进行交互,用户乃至可以完整不晓得幕后产生的一切。成果就是近似于桌面利用法度的静态、疾速呼应、高交互性的体验,但是面前又具有互联网的全数强年夜气力。

插手一些 javascript

获得 XMLHttpRequest 的句柄后,其他的 javascript 代码就非常简朴了。究竟上,我们将利用 javascript 代码完成非常根基的任务:

获得表双数据:javascript 代码很容易从 HTML 表单中抽取数据并发送到办事器。
点窜表单上的数据:更新表单也很简朴,从设置字段值到敏捷替代图象。
剖析 HTML 和 XML:利用 javascript 代码把持 DOM(请参阅 下一节),措置 HTML 表单办事器前往的 XML 数据的布局。
对前两点,需求非常熟谙 getElementById() 体例,如 清单 2 所示。

清单 2. 用 javascript 代码捕获和设置字段值

// Get the value of the "phone" field and stuff it in a variable called phone
var phone = document.getElementById("phone").value;

// Set some values on a form using an array called response
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];

这里没有特别需求重视的处所,真是好极了!您应当熟谙到这里并没有非常复杂的东西。只需把握了 XMLHttpRequest,Ajax 利用法度的其他部分就是如 清单 2 所示的简朴 javascript 代码了,异化有少量的 HTML。同时,还要用一点儿 DOM,我们就来看看吧。

以 DOM 结束

最后另有 DOM,即文档工具模型。可能对有些读者来讲 DOM 有点儿令人生畏,HTML 设想者很少利用它,即便 javascript 法度员也不年夜用到它,除非要完成某项高端编程任务。年夜量利用 DOM 的是 复杂的 Java 和 C/C++ 法度,这可能就是 DOM 被认难堪以学习的启事。

荣幸的是,在 javascript 技术中利用 DOM 很容易,也非常直观。现在,遵还是规或许应当申明若何利用 DOM,或起码要给出一些示例代码,但如许做也可能误导您。即便不睬会 DOM,仍然能深切地切磋 Ajax,这也是我筹办采取的体例。今后的文章将再次会商 DOM,现在只需晓得可能需求 DOM 便可以了。当需求在 javascript 代码和办事器之间通报 XML 和改变 HTML 表单的时候,我们再深切研究 DOM。没有它也能做一些风趣的事情,是以现在就把 DOM 放到一边吧。

获得 Request 工具

有了下面的根本知识后,我们来看看一些详细的例子。XMLHttpRequest 是 Ajax 利用法度的核心,并且对很多读者来讲可能还比较陌生,我们就从这里开端吧。从 清单 1 可以看出,建立和利用这个工具非常简朴,不是吗?等一等。

还记得几年前的那些讨厌的浏览器战役吗?没有一样东西在不合的浏览器上获得一样的成果。不管您是不是信赖,这些战役仍然在继续,固然范围较小。但令人奇特的是,XMLHttpRequest 成了这场战役的捐躯品之一。是以获得 XMLHttpRequest 工具可能需求采取不合的体例。下面我将详细地进行解释。

利用 Microsoft 浏览器

Microsoft 浏览器 Internet Explorer 利用 MSXML 剖析器措置 XML(可以经由过程 参考质料 进一步体味 MSXML)。是以如果编写的 Ajax 利用法度要和 Internet Explorer 打交道,那么必须用一种特别的体例建立工具。

但其实不是这么简朴。按照 Internet Explorer 中装置的 javascript 技术版本不合,MSXML 实际上有两种不合的版本,是以必须对这两种环境别离编写代码。请参阅 清单 3,此中的代码在 Microsoft 浏览器上建立了一个 XMLHttpRequest。

清单 3. 在 Microsoft 浏览器上建立 XMLHttpRequest 工具

var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}

您对这些代码可能还不完整了解,但没有关系。当本系列文章结束的时候,您将对 javascript 编程、错误措置、前提编译等有更深的体味。现在只需牢服膺住此中的两行代码:

顶一下
(1)
100%
踩一下
(0)
0%
------分开线----------------------------
标签(Tag):ajax Ajax实例教程 Ajax根本教程 Ajax源代码 Ajax技能
------分开线----------------------------
颁发评论
请自发遵循互联网相关的政策法规,严禁公布色情、暴力、革命的谈吐。
评价:
神色:
考证码:点击我更换图片
猜你感兴趣