元素中包含着文本节点“Trees, trees, everywhere”基本DOM方法基本DOM方法getElementById(id) 返回一个给定id属性的元素节点相对应的对象。这个方法是与document对象相关联的函数。其中document对象代表着整个HTML文档并可以用来访问所有页面中的元素 getElementsByTagName(tagname) 返回一个对象数组，它们分别对应着文档里的一个特定的元素节点 getAttribute() 返回对象的属性值 setAttribute() 修改对象的属性值重要DOM属性重要DOM属性childNodes 可以将节点树中任何一个元素的所有子元素检索出来，这个属性返回一个数组，包含了给定元素节点的全体子元素 nodeName 返回元素节点的名称。注意，返回的结果全部是大写 nodeType 用来区分节点的类型，元素节点的nodeType属性值是1，属性节点的nodeType属性值是2，文本节点的nodeType属性值是3 nodeValue 可以用来存取文本节点的值。对于元素节点或属性节点这个属性返回空重要DOM属性（cont.）重要DOM属性（cont.）firstChild和lastChild 第一个和最后一个孩子节点。 node.firstChild等价于node.childNodes[0]， node.lastChild等价于 node.childNodes[node.childNodes.length – 1] parentNode 返回元素的父节点 nextSibling 返回下一个兄弟节点改变网页结构的DOM方法改变网页结构的DOM方法createElement(tagname) 创建新的元素节点，此方法与document对象相关联。新建的元素节点并未与节点树相连 appendChild(node) 把新建的节点插入到节点树的某个节点下，成为这个节点的子节点 createTextNode(text) 创建文本节点 insertBefore(newNode, targetNode) 把一个新元素插入到一个现有元素的前面 replaceChild(newChild, oldChild) 替换一个孩子节点 removeChild(node) 删除一个孩子节点null基于DOM的Web应用程序示例基于DOM的Web应用程序示例基于DOM的Web应用程序示例首先建立一个非常简单的应用程序，然后再添加一点DOM魔法。注意，DOM可以移动网页中的任何东西而不需要提交表单。创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为 Hocus Pocus! 的按钮初始的HTML清单初始的HTML清单注意按钮的类型是 button 而不是提交按钮。如果使用提交按钮，单击该按钮将导致浏览器提交表单。通过使用一般输入按钮而不是提交按钮，可以把 JavaScript 函数和它连接起来与浏览器交互而无需提交表单初始的HTML页面预览初始的HTML页面预览目标效果目标效果下面增加一些魔法，用兔子的图片替换页面中原有的图片：使用getElementById()函数获得元素节点使用getElementById()函数获得元素节点首先找到网页中表示img元素的DOM节点。一般来说，最简单的办法是用getElementById()方法，它属于代表Web页面的document对象： var elementNode = document.getElementById(“id");修改图片，麻烦的办法修改图片，麻烦的办法完成所需修改有几种方法：有些简单，有些麻烦。但是运用较麻烦的办法是一次很好的DOM练习，首先看看换图片比较麻烦的办法；后面再重新 分析 定性数据统计分析pdf销售业绩分析模板建筑结构震害分析销售进度分析表京东商城竞争战略分析 一下看看有没有更简单的办法 用带兔子的新照片替换原有图片的办法如下： 1、创建新的img元素 2、访问当前img元素的父元素，也就是它的容器 3、在已有img元素之前插入新的img元素作为该容器的子级 4、删除原来的img元素 5、结合起来以便在用户单击按钮时调用刚刚创建的函数1、创建新的img元素1、创建新的img元素创建新的img元素： var newImage = document.createElement("img"); 可以创建一个新的元素节点，元素名为img。在HTML中基本上就是： 下面需要增加一个属性src，它指定了要加载的图片： newImage.setAttribute("src", "rabbit-hat.gif"); 注：如果对已有的属性调用setAttribute()，则把原来的值替换为指定的值。但是，如果调用setAttribute()并指定一个不存在的属性，DOM就会使用提供的值增加一个属性2、获得原始图片的父元素2、获得原始图片的父元素现在有了要插入的图片，还需要找到插入的地方。要将其插入到已有图片之前然后再删除原来的图片。为此需要知道已有图片的父元素： var imgParent = hatImage.parentNode;3、插入新图片3、插入新图片添加子节点的方法： insertBefore(newNode, targetNode) appendChild(newNode) 把新图片元素插入到原有图片之前： imgParent.insertBefore(newImage, hatImage); 现在原图片的父元素有了两个 子元素：新图片和紧跟在后面的旧图片4、删除旧图片4、删除旧图片因为已经得到了旧图片元素的父节点，只要调用removeChild()并把需要删除的节点传递给它即可： imgParent.removeChild(hatImage); 完整的JavaScript函数：5、表单元素连接JavaScript5、表单元素连接JavaScript每当用户点击Hocus Pocus!按钮的时候运行showRabbit()函数。为此只要向HTML中增加一个简单的 onclick事件处理程序即可：思考：替换图片更简单的办法思考：替换图片更简单的办法1、使用replaceChild()函数 imgParent.replaceChild(newImage, hatImage); 2、直接修改图片的src属性 hatImage.setAttribute("src", "rabbit-hat.gif"); 3、使用HTML DOM方法 hatImage.src = “rabbit-hat.gif”;然后…把兔子藏起来然后…把兔子藏起来虽然兔子从帽子中跳出来了，但是屏幕下方的按钮仍然显示 Hocus Pocus! 和调用 showRabbit()，下面做一些修改，当用户再次点击按钮时把兔子藏起来！1、修改按钮的标签1、修改按钮的标签使用我们熟悉的方法，实现这个简单的功能，在showRabbit() 函数中添加如下语句：2、隐藏兔子2、隐藏兔子隐藏兔子的方法基本上和放兔子出来完全相反，将图片的src属性再改回旧图片。创建一个新的 JavaScript 函数来完成这项任务：3、更改事件处理函数3、更改事件处理函数现在虽然按钮的标签改变了，但是单击按钮时的动作没有变。当用户单击按钮时可以使用DOM改变事件或者发生的动作。在JavaScript中，可以通过按钮的onclick属性来引用该事件，因此可以改变按钮触发的事件：只要赋给onclick属性一个新的函数第二讲第二讲使用Ajax发送异步请求使用Ajax发送异步请求示例使用Ajax发送异步请求示例考虑以下情景： 当用户输入邮编后，系统自动填充相应的城市和省份创建静态页面原型创建静态页面原型创建XMLHttpRequest创建XMLHttpRequest要实现这种功能，必须非常熟悉一个 JavaScript 对象，即 XMLHttpRequest（简称XHR）。这个小小的对象实际上已经在几种浏览器中存在一段时间了，它是Ajax 的核心。该对象的几个常用方法和属性： open()：建立到服务器的新请求 send()：向服务器发送请求 readyState：提供当前 HTML 的就绪状态 status：服务器响应的状态代码 responseText：服务器返回的请求响应文本创建XMLHttpRequest （cont.）创建XMLHttpRequest （cont.）创建跨浏览器的XMLHttpRequest对象：创建XMLHttpRequest （cont.）创建XMLHttpRequest （cont.）注意不要被这些花括号迷住了眼睛，下面分别介绍每一步: 创建一个新变量 request 并赋值 false。使用 false 作为判断条件，表示还没有创建 XMLHttpRequest 对象 增加try/catch块： 尝试创建 XMLHttpRequest 对象 如果失败,先尝试使用较新版本的Microsoft浏览器创建 Microsoft 兼容的对象（Msxml2.XMLHTTP），如果失败（尝试使用较老版本的Microsoft浏览器创建 Microsoft兼容的对象（Microsoft.XMLHTTP） 如果全部失败，则保证request的值仍然为false 检查request是否仍然为false（如果一切顺利就不会是false） 如果出现问 题 快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题 则使用JavaScript警告通知用户出现了问题建立到服务器的请求建立到服务器的请求准备好XMLHttpRequest对象，就可以建立到服务器的请求了。 首先结合一些表单中的数据来构造URL： 注：escape() 方法用于转义不能用明文正确发送的任何字符。比如，空格将被转换成字符 %20，从而能够在 URL 中传递这些字符。 然后建立请求：建立到服务器的请求（cont.）建立到服务器的请求（cont.）使用 XMLHttpRequest 对象的 open() 方法来建立请求。该方法有五个参数： request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求 url：要连接的 URL asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值 password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值 通常使用其中的前三个参数。事实上，即使需要异步连接，通常指定第三个参数为 “true”，这样更容易理解使用XMLHttpRequest发送请求使用XMLHttpRequest发送请求一旦请求用 open() 配置好之后，就可以使用send()方法发送请求了，send() 方法只有一个参数，就是要发送的内容 但是我们前面通过URL本身已经发送了zipcode的值，所以这里不需要通过 send() 传递数据，只要传递 null 作为该方法的参数即可：设置回调函数设置回调函数由于是异步请求，请求发出后JavaScript 方法不会等待服务器处理完成，因此代码将继续执行，就是说，将退出该方法而把控制返回给表单。用户可以继续输入信息，应用程序不会等待服务器 当服务器完成请求之后，需要指定该如何处理响应。XMLHttpRequest对象的onreadystatechange属性允许指定一个回调函数反向调用Web页面中的代码 当服务器完成请求之后，会查看XMLHttpRequest对象，特别是 onreadystatechange属性。然后调用该属性指定的任何方法。之所以称为回调是因为由服务器向网页发起调用，无论网页本身正在做什么。这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务器响应请求并触发onreadystatechange属性指定的回调方法设置回调函数（cont.）设置回调函数（cont.）需要特别注意的是该属性在代码中设置的位置 —— 它是在调用send()之前设置的。发送请求之前必须设置该属性，这样服务器在回答完成请求之后能够查看该属性！ 注意，这里updatePage是个函数名称，不能写成updatePage() 函数调用的形式！这表示将updatePage()函数运行的返回结果赋值给onreadystatechange属性。体会JavaScript中函数也是对象的特征处理服务器响应处理服务器响应请求发送后，用户可以继续使用Web表单（同时服务器在处理请求）。而当服务器完成了请求处理，服务器查看onreadystatechange属性确定要调用的方法。除此以外，可以将应用程序看作其他应用程序一样，无论是否异步。换句话说，不一定要采取特殊的动作编写响应服务器的方法，只需要改变表单或其它的页面结构，让用户访问另一个 URL 或者做响应服务器需要的任何事情 处理函数（仅弹出简单的警告）：处理服务器响应（续）处理服务器响应（续）运行以上代码，根据浏览器的不同，在表单停止弹出警告之前会看到两次、三次甚至四次警告。原因在于还没有考虑HTTP就绪状态，这是请求/响应循环中的一个重要部分 HTTP就绪状态（readyState）表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在Ajax应用程序中需要了解五种就绪状态： 0：请求没有发出（在调用 open() 之前） 1：请求已经建立但还没有发出（调用 send() 之前） 2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部） 3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应 4：响应已完成，可以访问服务器响应并使用它处理服务器响应（续）处理服务器响应（续）与大多数跨浏览器问题一样，这些就绪状态的使用也不尽一致。实际上很少出现就绪状态从0到1、2、3再到4，一些浏览器从不报告0或1而直接从2开始，然后是3和4，其他浏览器则报告所有的状态。还有一些则多次报告就绪状态1 对于Ajax编程，需要直接处理的惟一状态就是就绪状态4，它表示服务器响应已经完成，可以安全地使用响应数据了。基于此，回调函数做如下调整： 修改后就可以保证服务器的处理已经完成，现在就会看到只显示一次警告信息了处理服务器响应（续）处理服务器响应（续）以上代码看起来似乎不错，但是还有一个问题 —— 如果服务器响应请求并完成了处理但是报告了一个错误怎么办？服务器端代码应该是由Ajax、JSP、普通HTML表单或其他类型的代码调用的，但只能使用传统的Web专用方法报告信息。而在 Web 世界中，HTTP状态码（status）可以处理请求中可能发生的各种问题，比如： 输入了错误的URL请求将得到404错误码，它表示该页面不存在 403和401错误码表示所访问的数据受到保护或者禁止访问 无论哪种情况，这些错误码都是从完成的响应 中得到的。换句话说，服务器执行了请求（即HTTP就绪状态是4）但是没有返回客户机预期的数据。因此除了就绪状态外，还需要检查HTTP状态。我们期望的状态码是200，它表示一切顺利。如果就绪状态是4而且状态码是200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据（而不是错误或者其他有问题的信息）处理服务器响应（续）处理服务器响应（续）在回调函数中增加HTTP状态（status）检查： 现在可以确保请求已经处理完成（通过就绪状态），服务器给出了正常的响应（通过状态码），最后可以处理服务器返回的数据了。返回的数据（文本形式）保存在XMLHttpRequest对象的responseText属性中。（如果服务器选择使用XML响应，则也可以使用在responseXML属性获取）处理服务器响应（续）处理服务器响应（续）在本例中，服务器返回邮编相应的城市和省份，中间用逗号分开： Tangshan,Hebei 得到responseText并使用JavaScript的split()函数从逗号分开，得到的数组放到response中，然后更新表单中的相应值连接Web表单连接Web表单最后使用JavaScript事件函数触发Ajax调用： 输入框的onblur属性指定的函数当焦点离开时触发，Ajax开始运行了。结果就会看到填完邮编后焦点移开时，表单的城市和省份信息突然更新了！编写服务器端组件编写服务器端组件服务器端使用JSP（当然可以使用Servlet）根据传递的邮编，返回相应的城市和省份： 注意：JSP中除了JSP标签和Java代码不要出现任何HTML标签，也不要出现换行和空白字符，仅返回需要的响应结果，否则这些HTML标签和空白字符也会作为响应文本的一部分传递回客户端 小结 学校三防设施建设情况幼儿园教研工作小结高血压知识讲座小结防范电信网络诈骗宣传幼儿园师德小结 小结Ajax应用的开发确实有些繁琐，实际上，现在有很多成熟稳定的Ajax工具葙封装了以上诸多细节，是的Ajax编程更加容易。但是如果不知道应用程序在做什么，就很难发现其中的问题 XMLHttpRequest对象是Ajax应用的核心，必须非常熟悉 Ajax应用的基本 流程 快递问题件怎么处理流程河南自建厂房流程下载关于规范招聘需求审批流程制作流程表下载邮件下载流程设计 ： 创建XMLHttpRequest对象 从Web表单中获取需要的数据 设置要连接的URL 建立到服务器的连接 设置服务器在完成后要运行的回调函数 发送请求第三讲第三讲在请求和响应中使用XML发送XML格式的请求发送XML格式的请求XMLHttpRequest是Ajax应用程序中使用的基本对象。看起来它似乎是为通过HTTP请求发送XML或者以某种XML格式发出HTTP请求而设计的，但实际上它要做的只不过是为客户机代码（在网页中通常是JavaScript）提供一种发送HTTP请求的方式，并不要求必须使用XML请求或响应 注意：虽然XML可以通过HTTP发送，但XML是一种数据格式而不是传输协议从客户机发送的XML数据格式从客户机发送的XML数据格式修改上一个邮编的例子，使用XML传递数据。将名/值对转化为XML数据格式： 063000 XML要求有一个根元素；如果使用文档片段（XML文档的一部分）的话则需要一个封闭元素，将上面的XML改为以下方式（同时便于传递等多信息）： 063000 向服务器发送XML向服务器发送XML请求中的数据必须手工格式化为XML 对于XML最好使用POST请求，因为有些浏览器限制了 GET 请求字符串的长度，而XML可能很长 告诉服务器要发送的是XML而不是一般的名/值对 XML通过send()方法发送，而不是附加在请求URL最后的参数发送XML和普通文本的比较发送XML和普通文本的比较XML不是一种简洁、快速和节省空间的格式，和普通文本相比，XML通常总会占用更多的空间，速度也更慢，因为需要在消息中增加 XML 所需要的标签和语义，同时解析XML也比处理普通文本慢 构造和维护XML不是简单的事情 XML没有为请求增加任何东西，除了复杂性的问题之外，和普通文本以及名/值对相比，在请求中使用 XML实际上没有多少好处（如果有的话）。实际上没有任何东西可用XML而不能用普通文本发送 一般地，只有当服务器仅接受XML时才需要发送XML第四讲第四讲使用JSON进行数据传输什么是JSON？什么是JSON？JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，而且它是基于JavaScript 的。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript 等）。这些特性使JSON成为理想的数据交换语言 JSON有两种结构： “名/值”对的集合（A collection of name/value pairs）。在不同的语言中，它被理解为对象，结构，关联数组等 值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组 这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能JSON的基本形式JSON的基本形式对象是一个无序的“名/值”对集合。一个对象以“{”开始，“}”结束。每个“名称”后跟一个“:” ；“名/值”对之间使用“,” 分隔： 数组是值（value）的有序集合。一个数组以“[”开始，“]”结束。值之间使用“,”分隔： 字符串（string）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。 值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套 数值（number）与C或者Java的数值非常相似。JSON示例JSON示例下面的JSON表示名称/值对： { "firstName": "Brett" } 多个名称/值对串在一起: { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" } 从语法方面来看，这与名称/值对相比并没有很大的优势，但是在这种情况下 JSON 更容易使用，而且可读性更好 当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性: { “employees": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }, { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" }, { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" } ] } 这比相应的XML格式表示的数据更加简洁：JSON示例（cont.）JSON示例（cont.）相应的XML格式： < employee > Brett McLaughlin brett@newInstance.com < employee > Jason Hunter jason@servlets.com < employee > Elliotte Harold elharo@macfaq.com JSON vs. XMLJSON vs. XML可读性 JSON和XML的可读性可谓不相上下，XML略占上风 可扩展性 XML天生有很好的扩展性，JSON当然也有，没有什么是XML能扩展，JSON不能的。 编码难度 XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的编码明显比XML容易许多，即使不借助工具也能写出JSON的代码，可是要写好XML就不太容易了 解码难度 XML的解析得考虑子节点父节点关系，让人头昏眼花，而JSON的解析难度几乎为零。 流行度 XML已经被业界广泛的使用，而JSON才刚刚开始，但在Ajax领域，JSON凭借自身的优势有可能最终取代XML在JavaScript中使用JSON在JavaScript中使用JSONJSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的 API 或工具包。 将JSON数据赋值给变量： var company = { “employees": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": brett@newInstance.com" }, { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" }, { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" } ] }; 这样将创建一个JavaScript对象在JavaScript中使用JSON （cont.）在JavaScript中使用JSON （cont.）以JavaScript对象的方式访问数据，如获取第一个雇员的firstName信息： company.employees[0].fristName 正如可以用点号和括号访问数据，也可以按照同样的方式轻松地修改数据： company.employees[0].fristName=“Vincent”客户端处理JSON响应客户端处理JSON响应服务器端返回JSON相应的文本表示，如： {“city” : “Hefei”, “province” : “Anhui”} 客户端使用eval()函数将JSON文本转化为JavaScript对象： 注意，使用额外的圆括号可使eval()函数将来源输入无条件地视为表达式进行解析。 然后从JavaScript对象中取得相应的值：nullThank You！ Q&A Time