DOM、XML与Ajax

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,DOM、XML与Ajax简介,王晓雷,DOM-文档对象模型,文档对象模型是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。,W3C DOM 标准被分为 3 个不同的部分：,核心 DOM - 针对任何结构化文档的标准模型,XML DOM - 针对 XML 文档的标准模型,HTML DOM - 针对 HTML 文档的标准模型,DOM-文档对象模型,什么是,HTML DOM,？,HTML DOM,是：,HTML,的标准对象模型,HTML,的标准编程接口,W3C,标准,HTML DOM,定义了所有,HTML,元素的对象和属性，以及访问它们的方法。,换言之，,HTML DOM,是关于如何获取、修改、添加或删除,HTML,元素的标准。,DOM-文档对象模型,DOM 节点,： H,TML 文档中的所有内容都是节点：,整个文档是一个文档节点,每个 HTML 元素是元素节点,HTML 元素内的文本是文本节点,每个 HTML 属性是属性节点,注释是注释节点,DOM标准中一共定义了12种节点类型：数值常量1-12,DOM-文档对象模型,例：,DOM,教程,DOM,第一课,Hello world!,DOM-文档对象模型,DOM-文档对象模型,HTML DOM,对象,-,方法和属性,一些常用的,HTML DOM,方法：,getElementById(id) -,获取带有指定,id,的节点（元素）,appendChild(node) -,插入新的子节点（元素）,removeChild(node) -,删除子节点（元素）,一些常用的,HTML DOM,属性：,innerHTML -,节点（元素）的文本值,parentNode -,节点（元素）的父节点,childNodes -,节点（元素）的子节点,attributes -,节点（元素）的属性节点,DOM-文档对象模型,一般对文档对象的操作分两步：,1、获得操作对象：,通过使用 getElementById() 方法,通过使用 getElementsByTagName() 方法,通过使用 getElementsByClassName() 方法,2、修改 HTML 元素,改变 HTML 内容,改变 CSS 样式,改变 HTML 属性,创建新的 HTML 元素,删除已有的 HTML 元素,改变事件（处理程序）,DOM-文档对象模型,DOM的导航：, Markup Language,）,XML,是一种标记语言，很类似,HTML,XML,的设计宗旨是传输数据，而非显示数据,XML,标签没有被预定义。您需要自行定义标签。,XML,被设计为具有自我描述性。,XML,是,W3C,的推荐标准,XML-扩展标记语言,XML的用途：,XML 把数据从 HTML 分离,通过 XML，数据能够存储在独立的 XML 文件中。这样你就可以专注于使用 HTML 进行布局和显示，并确保修改底层数据不再需要对 HTML 进行任何的改变。通过使用几行 JavaScript，你就可以读取一个外部 XML 文件，然后更新 HTML 中的数据内容,XML 简化数据共享,XML 数据以纯文本格式进行存储，因此提供了一种独立于软件和硬件的数据存储方法。这让创建不同应用程序可以共享的数据变得更加容易。,更多其他, 使用简单的具有自我描述性的语法：,Java编程思想,Bruce Eckel,108.00,JavaEE开发指南,一帆风顺,49.99,XML语法规则,所有 XML 元素都须有关闭标签,XML 标签对大小写敏感,XML 必须正确地嵌套,XML 文档必须有根元素,XML 的属性值须加引号,George,John,其他：参见w3school,XML,解析器,所有现代浏览器都内建了供读取和操作 XML 的 XML 解析器。,解析器把 XML 转换为,XML DOM,对象 - 可通过 JavaScript 操作的对象。,微软的 XML 解析器与其他浏览器中的解析器之间，存在一些差异。微软的解析器支持 XML 文件和 XML 字符串（文本）的加载，而其他浏览器使用单独的解析器。不过，所有的解析器都包含遍历 XML 树、访问插入及删除节点（元素）及其属性的函数。,解析,XML,文档,下面的代码片段把,XML,文档解析到,XML DOM,对象中：,if (window.XMLHttpRequest),/ code for IE7+, Firefox, Chrome, Opera, Safari,xmlhttp=new,XMLHttpRequest(),;,else,/ code for IE6, IE5,xmlhttp=new ActiveXObject(Microsoft.XMLHTTP);,xmlhttp.,open(GET,books.xml,false);,xmlhttp.,send();,xmlDoc=xmlhttp.,responseXML,;,XMLHttpRequest,对象,XMLHttpRequest 对象用于在后台与服务器交换数据。,XMLHttpRequest 对象是开发者的梦想，因为您能够：,在不重新加载页面的情况下更新网页,在页面已加载后从服务器请求数据,在页面已加载后从服务器接收数据,在后台向服务器发送数据,所有现代的浏览器都支持 XMLHttpRequest 对象,创建,XMLHttpRequest,对象,创建 XMLHttpRequest 对象的语法：,xmlhttp=new XMLHttpRequest();,老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：,xmlhttp=new ActiveXObject(Microsoft.XMLHTTP);,与XMLHttpRequest有关的其他方法,异步请求的状态变化事件的处理函数：,xmlhttp.onreadystatechange,=state_Change;,打开请求：,xmlhttp.open(GET,url,true);,GET或者POST,url,true或者false,发送请求：,xmlhttp.send(null);,与XMLHttpRequest有关的其他方法,状态发生变化时的处理：,function state_Change(),if (xmlhttp.readyState=4),/ 4 = loaded,if (xmlhttp.status=200),/ 200 = OK,/ .,在这里处理响应的数据,.,else,XML DOM,-类似HTML DOM,例：,xmlDoc.getElementsByTagName(to)0.childNodes0.nodeValue,xmlDoc -由解析器创建的 XML 文档,getElementsByTagName(to)0 - 第一个 元素,childNodes0 - 元素的第一个子元素（文本节点）,nodeValue - 节点的值（文本本身）,Ajax,AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。,AJAX 不是新的编程语言，而是一种使用现有标准的新方法。,AJAX 是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的,技术,，。,Ajax的核心：XMLHttpRequest对象,其实前面的例子就是Ajax的原理,标准创建代码：,var xmlhttp;,if (window.XMLHttpRequest),/ code for IE7+, Firefox, Chrome, Opera, Safari,xmlhttp=new XMLHttpRequest();,else,/ code for IE6, IE5,xmlhttp=new,ActiveXObject(Microsoft.XMLHTTP);,AJAX -,向服务器发送请求,open(method,url,async),：,规定请求的类型、URL 以及是否异步处理请求。,method：请求的类型；GET 或 POST,url：文件在服务器上的位置,async：true（异步）或 false（同步）,send(string),：,将请求发送到服务器。,string：仅用于 POST 请求,例如：,xmlhttp.open(GET,test1.txt,true);,xmlhttp.send();,GET,还是,POST,？,与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。,然而，在以下情况中，请使用 POST 请求：,不能,使用缓存文件（更新服务器上的文件或数据库）,向服务器发送大量数据（POST 没有数据量限制）,发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠,AJAX -,服务器响应,如需获得来自服务器的响应，请使用,X,MLHttpRequest 对象的 responseText 或 responseXML 属性。,responseText 获得字符串形式的响应数据。,responseXML 获得 XML 形式的响应数据。,如果返回的是XML数据或者文件，需要进一步的解析才能使用。,AJAX - onreadystatechange,事件,每当 readyState 改变时，就会触发 onreadystatechange 事件。,readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。,0: 请求未初始化,1: 服务器连接已建立,2: 请求已接收,3: 请求处理中,4: 请求已完成，且响应已就绪,status,200: OK,404: 未找到页面,当 readyState 等于 4 且状态为 200 时，表示响应已就绪,AJAX - onreadystatechange,事件,一般处理模式：,if (XMLHttp.readyState =4),if (XMLHttp.status =200),/你的具体处理 ,Ajax-服务器端,可以使用各种语言编写服务器端的处理程序：,Java,ASP.NET,PHP，C/C+等等。,本例的服务器端使用Java编写。,注册页面的重复用户名检测。,数据输入的自动提示,