Ajax HTML JavaScript DHTML DOM
- 格式:doc
- 大小:624.50 KB
- 文档页数:49
简介本文介绍一种方法,Ajax(Asynchronous JavaScript andXML,提出:Jesse James Garrett),使用它可以构建更为动态和响应更灵敏的Web应用程序。
Ajax是2005年2月才正式提出的一项综合技术,其主要特点是为Web开发提供异步的数据传输和交换方式,可以在不重载(Reload)刷新(Refresh)界面的情况下与服务器进行数据交换。
该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。
如果使用得当,这种强大的力量可以使应用程序更加自然和响应灵敏(无刷新更新局部页面),从而提升用户的浏览体验。
术语Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验。
在Ajax之前,Web站点强制用户进入提交/等待/重新显示范例,用户的动作总是与服务器的“思考时间”同步。
Ajax提供与服务器异步通信的能力,从而使用户从请求/响应的循环中解脱出来。
借助于Ajax,可以在用户单击按钮时,使用JavaScript和DHTML(是利用CSS(层叠样式表),JavaScript,HTML等技术而建立的能与访问者产生互动的网页)立即更新UI,并向服务器发出异步请求,以执行更新或查询数据库。
当请求返回时,就可以使用JavaScript和CSS来相应地更新UI,而不是刷新整个页面。
最重要的是,用户甚至不知道浏览器正在与服务器通信:Web站点看起来是即时响应的虽然Ajax所需的基础架构已经出现了一段时间,但直到最近异步请求的真正威力才得到利用。
能够拥有一个响应极其灵敏的Web站点确实激动人心,因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的(desktop-like)”可用性。
Google Suggest、Google Maps所有这些Web站点都告诉我们,Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。
废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到).1. load( url, [data], [callback] ) :载入远程HTML 文件代码并插入至DOM 中。
url (String) : 请求的HTML页的URL地址。
data (Map) : (可选参数) 发送至服务器的key/value 数据。
callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。
这个方法默认使用GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。
jQuery 1.2 中,可以指定选择符,来筛选载入的HTML 文档,DOM 中将仅插入筛选出的HTML 代码。
语法形如"url #some > selector"。
这个方法可以很方便的动态加载一些HTML文件,例如表单。
示例代码:$(".ajax.load").load("[url]/QLeelulu/archive/2008/03/30/1130270.html[/url] .post",function (responseText, textStatus, XMLHttpRequest){this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0]//alert(responseText);//请求返回的内容//alert(textStatus);//请求状态:success,error//alert(XMLHttpRequest);//XMLHttpRequest对象});这里将显示结果。
ajax总结Ajax(Asynchronous JavaScript and XML)是一种用于创建交互式网页应用程序的技术,通过在后台与服务器进行异步数据交换,使得网页的内容可以实时更新,提升了用户体验。
在本文中,我将对Ajax进行总结并探讨其在Web开发中的应用和优势。
一、Ajax的原理和特点Ajax的核心原理是通过JavaScript异步请求数据,在不刷新整个页面的情况下,实时更新页面内容。
与传统的同步请求相比,Ajax能够大大提升用户体验,使得页面加载更为流畅。
Ajax的特点有以下几个方面:1. 异步通信:Ajax采用异步操作,不会阻塞页面的其他操作。
2. 数据交互:Ajax通过发送HTTP请求与服务器进行数据交互,可以获取数据、发送数据和更新数据。
3. 更新局部内容:与传统的页面刷新相比,Ajax只更新需要改变的部分,节省带宽并提升了页面加载速度。
二、Ajax的应用1. 表单验证:通过Ajax可以实时对用户输入的数据进行验证,例如检查用户名是否已被占用、密码是否符合规范等。
2. 动态加载内容:通过Ajax可以实现无缝加载内容,例如在社交网络中实时加载新的动态、加载评论等。
3. 自动补全:通过Ajax可以实现实时搜索建议和自动完成功能,提供更加智能的用户体验。
4. 异步提交表单:通过Ajax可以实现表单的异步提交,避免了页面的跳转,提升了用户体验。
5. 实时聊天:通过Ajax可以实现实时聊天功能,用户可以即时地发送和接收消息。
三、Ajax的优势1. 提升用户体验:Ajax能够实现页面的局部更新,使得用户只需要等待少量的数据交互,提升了用户体验。
2. 减少带宽消耗:通过Ajax只更新需要改变的部分,减少了无谓的数据传输,降低了带宽消耗。
3. 提高网站性能:Ajax可以减轻服务器的负担,提高了网站的性能,特别在同时有大量用户访问的情况下。
4. 增加交互性:Ajax使得网页可以在不刷新页面的情况下实时响应用户的操作,增加了交互性和动态性。
动态HTML的名词解释动态HTML(Dynamic HTML,简称DHTML)是一种技术,通过使用HTML、CSS和JavaScript等工具,使网页在用户与之互动的过程中能够实时地呈现数据和内容的变化。
与传统的静态HTML相比,动态HTML更加灵活和互动,能够为用户提供更好的用户体验。
本文将对动态HTML的概念、原理和应用进行解释,以帮助读者更好地理解和应用这种技术。
一、动态HTML的概念动态HTML是指通过使用HTML、CSS和JavaScript等前端技术,使网页在不刷新页面的情况下实现内容和样式的实时更新。
传统的静态HTML页面在用户访问时呈现的内容是固定的,而动态HTML可以根据用户的操作和触发的事件进行数据的实时更新和页面的重新渲染。
二、动态HTML的原理动态HTML的原理主要基于客户端脚本语言JavaScript的能力。
Web浏览器在解析HTML页面时,会逐行执行JavaScript代码,并修改DOM(文档对象模型)结构和样式,从而实现页面的动态效果。
通过操纵DOM,可以实现添加、删除或修改HTML元素的内容和属性,改变CSS样式,以及响应用户的交互行为。
三、动态HTML的应用场景1. 实时数据更新:动态HTML可以通过定时器或服务器推送等方式,实时更新页面上的数据,如股票行情、天气预报等信息。
用户无需刷新页面即可获取最新的数据。
2. 表单验证和交互效果:动态HTML可以检查用户在表单中输入的数据是否合法,并动态地显示错误提示信息。
此外,还可以实现表单字段之间的交互效果,如联动选择、条件显示等。
3. 页面元素效果:动态HTML可以通过改变元素的样式、位置或大小,以及添加动画效果,提升用户对网页的交互体验。
例如,通过点击按钮展开/收起内容、图片轮播等。
4. Ajax技术:动态HTML中常用的Ajax(Asynchronous JavaScript and XML)技术,允许通过JavaScript在后台与服务器进行数据交换,实现局部页面的无刷新更新。
Extjs、雅虎UI库、jQuery—js框架介绍ExtJSExtJS是一个Javascript库,功能强大,界面美观,可以使用Ajax, DHTML,DOM等技术开发网络应用程序。
历史最初的ExtJS只是YUI的一个扩展包,从1.1版开始独立发布。
它是一个开源软件,遵守GPL 3.0协议。
许可证Extjs之前使用LGPL和商业授权的双重协议,在08年时改成了现在使用的GPL和商业授权的双重协议,也遵守其他的开源软件协议。
功能描述Ext包括多种控件,可以实现各种各样的功能文本框和文本域控制,可以控制文本框和文本域中的内容过滤,实现所见即所得的编辑形式。
单选框和复选框控制Grid control(表格控件):可以轻松的实现表格数据统计,拖放。
树形控制:生成树形目录,编辑管理树,点击展开或是关闭。
Tabs:可活动的标签页,标签页组,可自由添加和删除的标签页,功能丰富。
工具条:在面板中可以方便的插入顶部工具条或是底部工具条,实现各种复杂的功能。
桌面应用程序菜单:可以制作类似于Windows桌面的网页菜单。
灵活的面板布局:将一个面板划分为东南西北中(ESWNC)五个部分,每个部分可以放不同的内容。
滚动条:用滚动条来控制数据的显示。
Flash图表:flash制作的数据图表功能。
优点和不足Ext整合了CSS样式文件,窗口、面板都有现成的样式,甚至都不需要美工进行特别的美化就可以直接使用。
功能涵盖了一个Web 2.0网站所需要的几乎所有的功能,非常完备。
但是相应的文件大,加载速度并不理想,而且在低版本的浏览器上显示效果不佳。
学习网站:雅虎UI库雅虎UI库 (Yahoo! UI Library,YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX,DHTML 和 DOM 等程式码技术。
它也包含了许多 CSS 资源。
使用授权为 BSD许可证.功能YUI 包含完整的说明文件。
JSP Ajax相关技术简介Ajax不是单一的技术,而是四种技术的集合。
表8-1简要介绍了这些技术,以及它们所扮演的角色。
Ajax为用户提供了复杂的、运转良好的应用,改善了用户的交互体验。
Ajax 中主要技术之间的关系如下所述:JavaScript就像胶水将各个部分粘合在一起,定义应用的工作流程和业务逻辑。
通过使用JavaScript操作DOM来改变和刷新用户界面,不断地重绘和重新组织显示给用户的数据,并且处理用户基于鼠标和键盘的交互。
CSS为应用提供了一致的外观,并且为以编程方式操作DOM提供了强大的捷径。
XMLHttpRequest对象(或者类似的机制)则用来与服务器进行异步通信,在用户工作时提交用户的请求并获取最新的数据。
图8-1显示Ajax相关技术工作流程。
图8-1 Ajax的四个主要组件JavaScript定义了业务规则和程序流程。
应用程序使用XMLHttpRequest对象(或类似的机制)以后台方式从服务器获得的数据,通过DOM和CSS来改变界面的外观。
Ajax的四种技术之中,CSS、DOM和JavaScript这三个都不是新面孔,它们以前合在一起称作动态HTML,或者简称DHTML。
DHTML可以为Web页面创造新奇古怪的、交互性很强的界面,但是它永远也无法克服需要完全刷新整个页面的问题。
问题在于,如果没有和服务器通信的能力,只有空的漂亮界面,还是无法实现一些真正有意义的功能。
Ajax除了大量使用DHTML,还可以发送异步请求,这大大延长了Web页面的寿命。
通过与服务器进行异步通信,无须打断用户正在界面上执行的操作,Ajax与其前任DHTML相比,为用户带来了真正的价值。
更加方便的是,所有这些技术都已经预先安装在绝大多数Web浏览器之中,包括微软公司的IE、Mozilla/Gecko系列的浏览器(例如Firefox、Mozilla Suite、Net scape Navigator和Camino)、Opera、苹果公司的Safari,以及它的近亲UNIX KDE 桌面系统里的Konqueror。
html提交数据的方法【原创实用版3篇】目录(篇1)1.表单提交数据的方法2.AJAX 提交数据的方法3.JSON 提交数据的方法正文(篇1)在 Web 开发中,我们经常需要处理用户提交的数据。
HTML 提供了多种提交数据的方法,主要包括表单提交、AJAX 提交和 JSON 提交。
下面我们分别来了解一下这三种方法。
1.表单提交数据的方法表单提交数据是最常见的一种数据提交方式。
用户在网页上填写表单内容后,点击提交按钮,表单数据会通过 HTTP POST 请求发送到服务器。
服务器处理数据后,会返回一个响应结果。
如果数据验证失败,服务器会返回错误信息,前端需要根据这些信息对表单进行相应的修改。
2.AJAX 提交数据的方法AJAX(Asynchronous JavaScript and XML)是一种异步数据传输技术,可以在不刷新页面的情况下,与服务器进行数据交互。
通过 AJAX 提交数据,可以避免页面刷新带来的用户体验损失。
使用 AJAX 提交数据时,前端需要编写 JavaScript 代码,将表单数据发送到服务器。
服务器处理数据后,会返回一个 JSON 格式的响应结果。
前端需要根据响应结果对页面进行相应的更新。
3.JSON 提交数据的方法JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于阅读和编写。
与 XML 相比,JSON 具有更简洁的语法,易于机器解析和生成。
在现代 Web 开发中,JSON 已经成为了数据的主流格式。
通过JSON 提交数据,可以方便地将数据传递给服务器。
前端需要将表单数据转换为 JSON 格式,然后发送给服务器。
服务器处理数据后,会返回一个JSON 格式的响应结果。
前端需要根据响应结果对页面进行相应的更新。
总之,HTML 提交数据的方法有多种,包括表单提交、AJAX 提交和JSON 提交。
目录(篇2)1.HTML 简介2.HTML 表单提交数据的方法3.GET 和 POST 方法的区别4.实际应用示例正文(篇2)HTML(Hypertext Markup Language) 是一种用于创建网页内容的标记语言。
前端开发中的JavaScript应用和实践随着互联网的发展,前端开发越来越被重视,JavaScript作为前端开发的核心语言,扮演着举足轻重的角色。
JavaScript可以实现丰富的动态效果和交互体验,如今已成为前端开发中必不可少的技能。
在这篇文章中,我们将探讨前端开发中的JavaScript应用和实践。
I. JavaScript的基础知识在深入探讨JavaScript应用和实践之前,有必要先了解JavaScript的基础知识。
JavaScript是一种面向对象的脚本语言,广泛应用于Web开发中,主要用于为Web页面添加交互和动态效果。
它是一种解释性语言,不需要编译,直接在浏览器中执行。
JavaScript语言借鉴了C语言、Java语言等多种语言的语法和特性。
其中的基础概念包括变量、数据类型、运算符、流程控制语句等。
这些基础概念是我们开展JavaScript应用和实践的基础。
II. JavaScript应用方法1. DOM操作DOM操作是JavaScript的重要应用之一。
DOM代表文档对象模型,是对HTML和XML文档的编程接口。
通过DOM操作,开发人员可以使用JavaScript来控制Web页面的各个元素,添加、删除或修改页面上的内容。
在DOM操作中,有许多方法可供开发人员使用,如document.getElementById()、document.createElement()、element.appendChild()等。
这些方法可以让我们更精准地控制页面中的各个元素,实现更丰富的效果。
2. AjaxAjax是Asynchronous JavaScript and XML的缩写,意为异步JavaScript和XML。
它是一种用于创建Web应用程序的技术,可以在不重新加载整个页面的情况下,通过异步的方式获取服务器上的数据并更新页面。
使用Ajax技术,需要使用XMLHttpRequest对象来发送请求和接收响应。
ajax技术原理Ajax是一种用于创建交互式Web应用程序的技术,它可以让Web页面可以在不刷新整个页面的情况下向服务器发送请求并获取数据,然后在页面中动态地显示它们。
Ajax技术是基于多种技术的复杂集成,它涉及到浏览器端JavaScript、DOM、XMLHttpRequest对象、服务器端脚本等多个方面。
本文将针对Ajax技术的原理、工作流程、技术架构等方面进行详细的介绍。
一、Ajax技术的原理Ajax全称为Asynchronous JavaScript and XML,它最初是由Jesse James Garrett提出的一种Web开发技术,Ajax技术的核心思想是使用JavaScript和XMLHttpRequest对象来与服务器异步通信,从而实现页面的更新,而不需要刷新整个页面。
在使用Ajax技术前,Web应用程序需要刷新整个页面,同时每次页面刷新会向服务器发送一次请求,导致页面响应延迟,影响用户体验。
而使用Ajax技术后,浏览器可以只更新部分页面,不需要刷新整个页面,同时可以多次向服务器请求数据。
Ajax技术的原理是基于JavaScript语言,通过JavaScript语法实现浏览器与服务器之间的异步通信。
在Web页面中,我们可以通过JavaScript创建一个XMLHttpRequest对象,然后使用该对象向服务器发送请求并获取数据。
发送的请求类型可以是各种不同的请求类型,比如GET、POST、PUT、DELETE等。
服务器接收到请求后,会对请求进行处理,并将响应数据返回给浏览器。
浏览器接收到响应数据后,就可以将其显示到页面中,完成页面的更新,而不需要刷新整个页面。
二、Ajax技术的工作流程Ajax技术的工作流程是由浏览器端和服务器端两部分组成。
浏览器端负责通过JavaScript创建XMLHttpRequest 对象,然后向服务器发送HTTP请求。
在服务器端,接收到HTTP请求后,服务器会根据请求类型进行相应的处理,然后将处理结果返回给浏览器。
Ajax 由HTML、JavaScript™ 技术、DHTML 和DOM 组成,这一杰出的方法可以将笨拙的Web 界面转化成交互性的Ajax 应用程序。
本文的作者是一位Ajax 专家,他演示了这些技术如何协同工作——从总体概述到细节的讨论——使高效的Web 开发成为现实。
他还揭开了Ajax 核心概念的神秘面纱,包括XMLHttpRequest 对象。
五年前,如果不知道XML,您就是一只无人重视的丑小鸭。
十八个月前,Ruby 成了关注的中心,不知道Ruby 的程序员只能坐冷板凳了。
今天,如果想跟上最新的技术时尚,那您的目标就是Ajax。
但是,Ajax 不仅仅是一种时尚,它是一种构建网站的强大方法,而且不像学习一种全新的语言那样困难。
但在详细探讨Ajax 是什么之前,先让我们花几分钟了解Ajax 做什么。
目前,编写应用程序时有两种基本的选择:·桌面应用程序·Web 应用程序两者是类似的,桌面应用程序通常以CD 为介质(有时候可从网站下载)并完全安装到您的计算机上。
桌面应用程序可能使用互联网下载更新,但运行这些应用程序的代码在桌面计算机上。
Web 应用程序运行在某处的Web 服务器上——毫不奇怪,要通过Web 浏览器访问这种应用程序。
不过,比这些应用程序的运行代码放在何处更重要的是,应用程序如何运转以及如何与其进行交互。
桌面应用程序一般很快(就在您的计算机上运行,不用等待互联网连接),具有漂亮的用户界面(通常和操作系统有关)和非凡的动态性。
可以单击、选择、输入、打开菜单和子菜单、到处巡游,基本上不需要等待。
另一方面,Web 应用程序是最新的潮流,它们提供了在桌面上不能实现的服务(比如 和eBay)。
但是,伴随着Web 的强大而出现的是等待,等待服务器响应,等待屏幕刷新,等待请求返回和生成新的页面。
显然这样说过于简略了,但基本的概念就是如此。
您可能已经猜到,Ajax 尝试建立桌面应用程序的功能和交互性,与不断更新的Web 应用程序之间的桥梁。
可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件,不过是在Web 应用程序中。
还等什么呢?我们来看看Ajax 如何将笨拙的Web 界面转化成能迅速响应的Ajax 应用程序吧。
老技术,新技巧在谈到Ajax 时,实际上涉及到多种技术,要灵活地运用它必须深入了解这些不同的技术(本系列的头几篇文章将分别讨论这些技术)。
好消息是您可能已经非常熟悉其中的大部分技术,更好的是这些技术都很容易学习,并不像完整的编程语言(如Java 或Ruby)那样困难。
下面是Ajax 应用程序所用到的基本技术:·HTML 用于建立Web 表单并确定应用程序其他部分使用的字段。
·JavaScript 代码是运行Ajax 应用程序的核心代码,帮助改进与服务器应用程序的通信。
·DHTML 或Dynamic HTML,用于动态更新表单。
我们将使用div、span 和其他动态HTML 元素来标记HTML。
·文档对象模型DOM 用于(通过JavaScript 代码)处理HTML 结构和(某些情况下)服务器返回的XML。
Ajax 的定义顺便说一下,Ajax 是Asynchronous JavaScript and XML(以及DHTML 等)的缩写。
这个短语是Adaptive Path 的Jesse James Garrett 发明的(请参阅参考资料),按照Jesse 的解释,这不是个首字母缩写词。
我们来进一步分析这些技术的职责。
以后的文章中我将深入讨论这些技术,目前只要熟悉这些组件和技术就可以了。
对这些代码越熟悉,就越容易从对这些技术的零散了解转变到真正把握这些技术(同时也真正打开了Web 应用程序开发的大门)。
XMLHttpRequest 对象要了解的一个对象可能对您来说也是最陌生的,即XMLHttpRequest。
这是一个JavaScript 对象,创建该对象很简单,如清单1 所示。
清单1. 创建新的XMLHttpRequest 对象<script language="javascript" type="text/javascript">var xmlHttp = new XMLHttpRequest();</script>下一期文章中将进一步讨论这个对象,现在要知道这是处理所有服务器通信的对象。
继续阅读之前,先停下来想一想:通过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 phonevar phone = document.getElementById("phone").value;// Set some values on a form using an array called responsedocument.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。