Web应用开发技术教学课件-第14章基于Ajax的Web应用.ppt

2019年2月5日,第 14 章基于ajax的web应用,2019年2月5日,14.1 传统web的弊病,问题1： 任何一次比分变化，都要重新加载页面，导致页面的频繁刷新。速度慢、而且根本无法关注某一场的比分。,问题2： 无法选择想要看的比赛。,2019年2月5日,问题1： 最后学位通常不可能精确到日期，但输入时必须要给定日期。 日期只能选择，不能直接输入，影响输入的效率。,问题2： 你们知道这些按钮的含义吗？ 好不容易输入完成后如何保存？,2019年2月5日,问题： 如果这是企业的物资名称，选项上万甚至几十万，你该如何选择？,感受： 如果这是企业的应用系统，作为一名员工，如果你每天要在这样的系统环境下工作，你会怎么样？ 要么拒绝使用？要么崩溃！,作为比较： 你们可以看看四大网球公开赛(澳网、法网、温网、美网)官方网站上的比分直播功能。感受用户体验的差异,2019年2月5日,2019年2月5日,2019年2月5日,2019年2月5日,2019年2月5日,14.1 传统web的弊病,经典的web应用程序模型工作方式如下： 用户动作在界面上提交数据，激发一个http请求到web服务器；服务器获取数据和处理数据，并返回一个新的html到客户端。 在传统web中，一个web页面是作为一个静态视图出现在应用中，一个web应用包含多个web页面。应用中的计算完全在服务器端实现，并将处理的结果生成页面，通过浏览器下载到客户端显示。用户可能的交互形式是向页面的表单输入数据并向服务器提交表单，或者单击一个链接打开另外一个页面。这两种操作都会导致整个页面的刷新(即页面重载)，用户每次与服务器交互都获得一个新的文档页面。 页面上的任何小的变动都会导致整个页面的刷新，包括数据、样式和结构等所有的部分，大量信息的网络传输引起页面响应的长时间延迟。例如更新crm中的一条客户的信息会导致整个页面的更新，返回一个新的页面。,2019年2月5日,14.1 传统web的弊病,这样的模型适合于以超文本为基础的web应用程序，但并不一定满足软件应用程序的要求。 在面向消费者的公众型(或称社区型)web应用中，主要是以超文本为基础的静态文本和图片信息以及少量的数据录入，这种以页面为单元的信息组织与传输模式尚可以接受；但在大型web应用中，这种交互性弱的静态页面对复杂的业务逻辑处理和数据的高并发性就显得力不从心，并且由于大量的数据录入、频繁的数据更新所导致页面的频繁加载，使得web页面的这种响应迟缓和交互性差的缺点被放大。 其主要问题是：页面的弱交互性、服务器的负荷过重、大量信息的网络传输引起页面响应的延迟以及页面的频繁刷新给用户带来糟糕的用户体验。,2019年2月5日,14.1 传统web的弊病,对桌面应用web化的企图几乎是伴随internet的诞生而产生的，但由于传统web应用存在的固有缺陷，桌面应用程序所拥有的丰富功能和响应能力是web无法达到的，要做出足以替代桌面应用的可用性几乎是不可能的。用户感觉到web应用与桌面应用的可用性和用户体验之间的巨大差距。 不过，随着ajax的出现，这种差距正被逐渐缩小。最成功的例子是google suggest和google maps。 google suggest会根据用户输入的内容，立即列出相关的条目。 而google maps，则利用光标在刻度线上移动来放大或者缩小地图。 所有的一切几乎都是即时完成的，完全不用等待页面的刷新。google suggest和google maps是新型web应用的两个典型例子，其良好的用户体验正是由于使用了ajax技术。,2019年2月5日,14.2 ajax带来的变化,多年来web一直停留在点击提交(submit)按钮或链接(link)并产生新的页面的浏览方式。ajax改写了网页必须不断重新载入的运行方式，页面只更新局部的内容，从本质上改变了客户端与服务器的交互模式。ajax带来的变化主要体现在： 用户体验的改善。用户请求无需等待刷性，也不会中断当前的浏览器线程。 数据通讯模式的变化。通过微请求(micro request)和异步通讯，ajax从根本上改变了客户端与服务器的数据通讯方式，使得原来以页面文档(document)为单元的通讯变为以更小粒度的页面中的数据对象为通讯单元。 响应速度的变化。用户长时间复用一个视图页面，只是第一次下载该页面时可能需要花费更多时间。 对服务器负荷的影响。ajax技术可以将服务器的部分工作转移到客户端，减轻服务器和带宽的负担。 应用开发模式的变化。ajax技术很大程度上依赖于javascript语言来实现。,2019年2月5日,14.2.2 ajax技术的优势,与传统web应用相比，使用ajax技术主要有如下优势。 无刷新页面。ajax采用异步的方式发送请求，页面的更新在客户端由javascript操作dom完成，用户感受不到更新延迟。 减少网络传输量。传统web服务器的每次响应都是一个完整的页面；而基于ajax技术的web应用中，服务器的响应只是必须更新的数据。 减轻了客户端的内存消耗。ajax的根本理念是“按需取数”，所以最大可能地减少了冗余请求，避免了客户端内存加载大量冗余数据。 不过，新技术就像一把双刃剑。 在整个应用中盲目增加大量的ajax交互会增加服务器负荷，从而导致整个应用的性能下降。 另一方面，部署web应用需要进行安全方面的防范，以避免关键的信息不会被恶意入侵者修改或被竞争对手截获。,2019年2月5日,14.3 ajax及技术实现ajax简介,ajax（asynchronous javascript and xml，异步javascript和xml）是一种创建交互式web应用技术的总称。 虽然ajax是个很新的名词，但它并不是一种全新的技术。ajax所使用的javascript、css、dom等都是很多年前就已经存在，以前被称为dhtml。dhtml可以用来创建交互性很强的页面，但其致命弱点在于：无法与服务器通信。虽然dhtml提供了非常漂亮的用户界面，但频繁的页面刷新限制了它的使用。 与dhtml 不同的是，ajax加入了xmlhttprequest对象，提供了客户端与服务器异步通信的能力。ajax是以一种全新的方式来使用所有的 “老”技术。,微软公司的outlook web access可以看做第一个应用ajax技术的成功的商业应用程序(1998)，但并没有引起人们的足够重视。直到2005年初，google在它著名的交互应用程序（如google maps、google搜索建议）中使用了异步通讯。正是这些曾经不受重视的技术应用，大大改善了google交互式应用的效率与用户体验，使得人们重新认识这项技术，并形成了ajax技术应用的热潮。google的成功向人们展现了web应用在处理大量数据与数据通讯方面的能力和良好的用户体验。,2019年2月5日,ajax不是一种新的编程语言，也不是一个具体的软件或程序，而是目前在浏览器中通过javascript脚本可以使用的所有技术的集合。ajax主要包含了以下几种技术： 基于标准化的xhtml+css的表示。 使用 dom（document object model）进行动态显示及交互。 通过xml和xslt来进行数据交换和处理。 使用 xmlhttprequest 进行异步数据获取、查询和检索。 使用javascript来整合以上所有的技术。,ajax是以xmlhttprequest技术为基础，将一些已有的web技术重新包装整合所产生的一种新的web应用与开发模式，是目前在浏览器中通过javascript可以使用的所有技术的集合。,2019年2月5日,14.3.2 ajax工作原理,ajax技术通过javascript的xmlhttprequest对象直接与服务器进行通信，根据服务器的响应从服务器获取需要的数据，并通过javascript操作dom对象来更新页面中的部分内容，即对客户端页面进行动态构建。 同时ajax可以借助javascript把一些服务器的工作转移到客户端，利用客户端闲置的处理能力来处理数据和动态构建页面。 ajax包括以下3个主要功能： 使用xmlhttprequest对象或组件与浏览器进行交互的功能。 对xml格式数据进行解析和操作的功能。 根据xmlhttprequest的返回信息进行相应的dom操作。,2019年2月5日,14.3.2 ajax工作原理,2019年2月5日,14.3.3 第一个ajax程序,ajax最基本的特点是通过xmlhttprequest对象异步访问后台数据，并服务器的响应，通过javascript操作dom对象来更新客户端ui。简单地说，一个ajax程序就是xmlhttprequest对象的建立、调用和回调处理的3个过程。通常包括如下几个步骤： 创建xmlhttprequest对象。当然，不同的浏览器创建的方式略有不同。 调用xmlhttprequest对象的open()和send()方法发送异步(或同步)请求。 根据xmlhttprequest的属性检查请求状态和服务器响应的，并定义要调用的javascript的函数。 用javascript处理从服务器得到的数据。从服务器返回的数据有两种形式，即以文本字符串方式和以xmldocument对象方式。,2019年2月5日,14.3.3 第一个ajax程序,下面通过一个简单的实例来说明这个过程，以实现web页面数据的异步更新和交互。先定义一个最简单的页面，作局部更新网页的数据源，其程序代码如下： gettime.aspx gettime.aspx文件只有一行代码，用来获取服务器的当前时间，每次请求或刷新页面都会返回服务器的时间。该页面文件中没有任何控件和处理逻辑，只是返回一个字符串形式的服务器时间。 下面再制作一个html页面showtime.htm，该页面中的部分内容从gettime.aspx中更新，其代码如下。,2019年2月5日,14.3.3 第一个ajax程序,程序14.1：showtime.htm 服务器时间 这是我的第一个ajax程序，实时显示服务器的时间! 完成工作的方法是爱惜每一分钟。 var xmlhttp; xmlhttp=new activexobject(“microsoft.xmlhttp“);/建立ie xmlhttprequest对象 function updatetime() /动态更新时间的函数 xmlhttp.open(“post“,“gettime.aspx“,false); xmlhttp.send(“ “); document.getelementbyid(“clock“).innerhtml = xmlhttp.responsetext; setinterval(updatetime,1000) ,程序14.1定义了一个名称为id =“clock“的标签；然后，定义了一段javascript代码来操作一个xmlhttprequest对象来请求服务器的数据。时间的显示和更新是通过从服务器返回的字符串来更新，并通过修改标签的innerhtml属性来实现的。setinterval函数用来控制每秒钟更新一次。,运行效果显示，整个页面并没有不断刷新，只有局部的时间数据在不停地跳动。不过上面的例子尽管实现了无刷新的局部更新，但xmlhttprequest对象的请求是同步的。如果要实现异步更新，还需要对上面的程序进行改进。修改后的程序如下。,2019年2月5日,14.3.3 第一个ajax程序,程序14.2：showservertime.htm 服务器时间 这是我的第一个ajax程序，实时显示服务器的时间！ 完成工作的方法是爱惜每一分钟。 var xmlhttp; /下面建立xmlhttprequest对象 xmlhttp=new activexobject(“microsoft.xmlhttp“); function updatetime() /异步请求 xmlhttp.open (“post“,“ gettime.aspx“, true); xmlhttp.onreadystatechange=function() /请求完成执行此函数 if(xmlhttp.readystate=4) /请求完成 document.getelementbyid (“clock“).innerhtml = xmlhttp.responsetext; xmlhttp.send (“ “); setinterval (updatetime, 1000) ,在修改后的页面文件中，open ()函数的第三个参数为true，即采用异步请求模式；同时，还必须设置xmlhttprequest对象(xmlhttp)的onreadystatechange事件。在异步调用的状态发生变化时触发该事件。当请求完成时(readystate=4)，在名为clock的标签中显示请求的结果(对象的返回值responsetext)。 在异步请求中，请求发出后，线程立即返回，浏览器可以响应其他的处理。当请求完成时(readystate=4)才利用其返回值responsetext更新客户端的ui。,通过上面的例子，我们简单了解了ajax异步请求进行局部更新的基本过程，但ajax还不止这么简单。下面详细介绍ajax技术的核心对象xmlhttprequest的主要属性和方法以及不同浏览器的差异性。,2019年2月5日,14.3.4 ajax核心对象xmlhttprequest,xmlhttprequest是浏览器已经定义好的对象，它是ajax技术的核心组成部分。异步通信方式是xmlhttprequest对象的独特之处，ajax就是借助javascript通过xmlhttprequest对象和服务器之间进行通信，并解析从服务器传回来的文本数据或xml格式的数据(也可以是json文件)。 在使用xmlhttprequest对象发送请求和处理响应之前，必须先用javascript创建一个xmlhttprequest对象。目前xmlhttprequest已经是一个事实上的标准，几乎所有主流的浏览器都支持这个技术，例如internet explorer 5.0+、firefox、netscape 7、opera 8+、safari 1.2。不过，由于xmlhttprequest还不是w3c标准，该对象的创建方法与浏览器相关。不同的浏览器创建xmlhttprequest对象的方法有一定的差异。 internet explorer把xmlhttprequest实现为一个activexobject对象，而其他浏览器（如firefox、safari和opera）使用名为xmlhttprequest的javascript内建对象。,2019年2月5日,14.3.4 ajax核心对象xmlhttprequest,如果希望所创建的web应用能跨越不同的浏览器，则需要针对不同的浏览器来创建此对象，即javascript代码中必须包含有关浏览器判断的逻辑，从而使用activex技术或者使用javascript对象技术来创建xmlhttprequest的一个实例。下面是创建xmlhttprequest对象的典型实例，其代码如下： function getxmlhttpobject () var xmlhttp = null; tryxmlhttp=new xmlhttprequest(); /firefox、opera 8.0+、safari等浏览器 catch (e) try xmlhttp=new activexobject (“msxml2.xmlhttp“); /ie 6.0+ catch (e) tryxmlhttp=new activexobject(“microsoft.xmlhttp“); /ie 5.5+ catch (e) alert(“浏览器不支持ajax！“); return false; return xmlhttp; ,该例创建了一个适用于不同浏览器的名为xmlhttp的xmlhttprequest对象。程序首先声明一个保存xmlhttprequest对象的xmlhttp变量。然后针对firefox、opera 以及safari浏览器，使用xmlhttp=new xmlhttprequest()来创建此对象。假如失败，则尝试针对internet explorer 6.0+的xmlhttp=new activexobject(“msxml2.xmlhttp“)。假如也不成功，则尝试针对internet explorer 5.5+的xmlhttp=new activexobject(“microsoft.xmlhttp“)。假如这3种方法都不起作用，那么表明用户所使用的浏览器已经过时了，用户会看到一个声明此浏览器不支持 ajax的提示。,2019年2月5日,14.3.4 ajax核心对象xmlhttprequest,可以将上面的代码封装在一个ajax.js的文件中，这样每个javascript文件都可以调用ajax.js文件中的getxmlhttpobject（）函数来创建xmlhttprequest对象。 xmlhttprequest对象的生命周期应该包含： 创建对象实例初始化请求发送请求接收数据数据解析等5个阶段。 xmlhttprequest对象提供了一系列的属性来反映http请求的状态，监听服务器的响应进度。 xmlhttprequest对象的open、send等方法能够将浏览器客户端的信息内容以异步方式提交到服务器，并监听服务器的响应返回，在必要的时候读取或设置http请求头信息。 在服务器响应完毕之后，xmlhttprequest对象能够回调响应的处理函数，使得javascript操纵dom更新web页面内容。,2019年2月5日,14.3.4 ajax核心对象xmlhttprequest,在向服务器发送数据之前，有必要解释一下 xmlhttprequest 对象的主要属性。 下面分别介绍这些属性的用法,xmlhttprequest对象的主要属性,2019年2月5日,14.3.4 ajax核心对象xmlhttprequest,onreadystatechange 属性 onreadystatechange属性对于服务器响应的函数。该属性是状态改变的事件触发器，状态改变时都会触发这个事件触发器，调用一个javascript函数。 其格式为： xmlhttp.onreadystatechange=function () /在这里写事件程序代码 例如： xmlhttp.onreadystatechange=function() /请求完成执行此函数 if(xmlhttp.readystate=4) /请求完成 document.getelementbyid (“clock“).innerhtml = xmlhttp.responsetext; ,2019年2月5日,14.3.4 ajax核心对象xmlhttprequest,readystate 属性 readystate存有服务器响应的状态信息。当readystate改变时，onreadystatechange定义的函数就会被执行。readystate有5种可能的值，见表14.2。,2019年2月5日,14.3.4 ajax核心对象xmlhttprequest,通常，可以在onreadystatechange函数中通过readystate属性值来测试响应是否完成，代码如下： xmlhttp.onreadystatechange=function () if(xmlhttp.readystate=4) /从服务器的response获得数据 例如： xmlhttp.onreadystatechange=function() /请求完成执行此函数 if(xmlhttp.readystate=4) /请求完成 document.getelementbyid (“clock“).innerhtml = xmlhttp.responsetext; ,2019年2月5日,14.3.4 ajax核心对象xmlhttprequest,responsetext属性 responsetext属性为一个字符串表示的服务器的响应，可以通过获得由服务器返回的数据。 下面的代码在文本框中显示从服务器获取的数据 xmlhttp.onreadystatechange=function () if(xmlhttp.readystate=4) document.myform.time.value=xmlhttp.responsetext; ,2019年2月5日,14.3.4 ajax核心对象xmlhttprequest,responsexml属性 responsexml属性为xml表示的服务器响应，可以解析为一个dom对象。 status与statustext属性 status属性返回服务器的http状态码，因为xmlhttp返回成功了，不一定表示服务器已经正确处理数据了，可能出现了500服务器内部错误或404找不到文件的错误等，只有当status为200时表示请求成功。statustext表示服务器的http状态码对应的文本。 status的状态值很多，这里不一一列举，可根据其取值范围来判断请求状态的大致含义。 1xx 信息提示 2xx 请求成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误,2019年2月5日,14.3.4 ajax核心对象xmlhttprequest,xmlhttprequest对象的方法,除了上面的属性之外，xmlhttprequest对象还提供了许多方法，见表14.3。 表14.3 xmlhttprequest 对象的方法 下面分别介绍这些方法的用法,2019年2月5日,14.3.4 ajax核心对象xmlhttprequest,open（）方法 open（）方法打开与服务器之间的链接进行交互，其格式为： open（string method,string url,boolean asynchron,string username,string password） 该方法将建立ajax对服务器的调用。该方法中的5个参数，其中前两个是必需的，后三个是可选的。其中： method指定调用的方法包括get、post。get用于获取信息的，post则用于需要更新服务器信息的地方。 url表示提供调用资源的位置，既可以是绝对地址也可以是相对地址。 boolean类型的asynchron表示进行调用时是同步方式还是异步方式，默认为true，即异步方式。如果参数数值为false，即进行等待直到服务器返回响应结果为止。 最后两个参数用于在进行连接时指定特定的用户名和密码。,2019年2月5日,14.3.4 ajax核心对象xmlhttprequest,send（）方法 send（）方法向服务器发送请求。如果以open方法的第一个参数method 为get时，我们应该使用send（）方法；如果method为post时，可以使用send(string data) 格式，可以使用的参数包括dom对象、字符串等，也可以是null或者空字符串“ ”。 setrequestheader（）方法 setrequestheader（）方法有两个参数，使用格式为： setrequestheader(“header“,“value“) 其功能是为http请求给定的一个首部设置值，其中header是要设置的http头部信息的名称，value 则是要设置放在首部的header对应的值。注意在设置首部前必须先使用open()方法。,2019年2月5日,14.3.4 ajax核心对象xmlhttprequest,getresponseheader () 方法 getresponseheader ()方法把http请求的所有响应首部作为键/值对返回，即返回指定首部的字符串的值。 abort（）方法 abort（）方法会终止xmlhttprequest对象与服务器的连接，结束当前xmlhttprequest的请求。,2019年2月5日,14.3.5 一个典型ajax调用过程,xmlhttprequest对象的交互过程通常包括如下几个步骤。 定义一个客户端事件，用于触发一个ajax事件处理程序。 创建xmlhttprequest对象的一个实例。 向服务发送请求。 服务器响应并处理请求。 请求返回到浏览器。 回调自定义方法。 这里所说的自定义方法指的是javascript方法，这个方法会检查xmlhttprequest对象的readystate属性，然后查看服务器返回的状态码。如果一切正常callback函数在客户端操作dom进行显示层的控制。 定义一个onblur事情触发一个ajax事件处理程序。代码如下： /定义触发事件 ,2019年2月5日,14.4 ajax请求与响应实例,下面通过一个完整的实例来演示网页表单如何与web 服务器进行通信。该例子实现一个类似google的即时搜索提示效果，当用户在文本框中输入某一个国家的英文名称时，应用会按用户输入的内容查找相应的国家并即时显示出来。例如，当用户输入一个字符c(或者c)，系统给出的建议是canada、china、chile、colombia。当用户输入ch，则系统给出的建议是china、chile。,这是一个完整的ajax程序，包括3个文件： 页面文件ajaxsuggest.htm提供一个用户界面，供用户输入要查找的国家和显示搜索的结果； javascript文件(ajaxsuggest.js) 实现数据的异步请求； 以及由ajaxsuggest.js调用的请求页面文件getsuggest.aspx。,2019年2月5日,14.4 ajax请求与响应实例,程序14.3：ajaxsuggest.htm ajax 搜寻建议 国家或地区名称: 建议: ,2019年2月5日,14.4 ajax请求与响应实例,ajaxsuggest.js文件的源代码 function showhint(str) if (str.length = 0) /如果输入域为空，清空 txthint的内容 document.getelementbyid(“txthint“).innerhtml = “; return; xmlhttp = getxmlhttpobject() /创建xmlhttprequest对象 var url = “getsuggest.aspx“; /定义回传数据的服务器的url（文件名） url = url + “?q=“ + str; /使用文本框的内容向 url 添加参数（q） url = url + “ ,2019年2月5日,14.4 ajax请求与响应实例,ajax服务器页面程序getsuggest.aspx 在上面 ajaxsuggest.js中，数据服务器的url文件是一个名为getsuggest.aspx的aspx文件，其功能是从服务器获得并返回数据。该文件是用asp.net的aspx文件实现的，也可以使用asp 来编写。它根据输入参数检查一个数组并向客户端返回相应的国家的名字。 其代码见getsuggest.aspx 该程序代码很简单，就是根据url取得参数q(其值为用户输入的字符)，在数组a(该数组中保存国家的英文名字)中查找所有满足条件的国家的名字，并返回其值。 这个例子虽然很简单，但完整演示了如何使用ajax 技术进行数据请求的过程和方法。,2019年2月5日,14.5 基于ajax的web应用实例,web应用是以数据库为基础的，数据库访问是web应用程序的重要内容，几乎所有的web应用程序都涉及数据库的访问，ajax技术也涉及数据库的访问。 web应用中的数据不仅以数据库的形式保存，还可以是xml文件。 下面通过实例详细讨论ajax如何访问数据库和数据文件。 此外，前面的例子中返回的都是文本形式的字符串，还要讨论如何解析从服务器返回的xml文件格式的数据。 本节主要以下讨论三个内容： ajax访问数据库实例 ajax访问xml数据文件实例 ajax responsexml应用实例,2019年2月5日,14.5.1 ajax访问数据库实例,下面通过实例演示ajax技术如何通过xmlhttprequest对象来访问数据库。该例子程序以access数据库为例，在asp_net.mdb中存放有学生的基本信息，要求使用ajax 技术从数据库读取信息。程序14.4：selectstudent.html 与前面的例子类似，实例包含三个文件： 表单文件selectstudent.html，表单中有一个名为student的选项列表控件，其选项为学生姓名，供用户选择。还包含了一个名为txthint的div，用于显示从web服务器所取回的学生的基本信息。 当用户选择数据时，selectstudent.js文件中的名为showstudent ()的函数会被执行。函数的执行会被onchange事件触发。每当用户改变选项列表中的值，函数showstudent()都会被调用。selectstudent.js文件与上面的ajaxsuggest.js类似。 被javascript调用的服务器getstudent.aspx的aspx文件，其功能是根据url的参数，获取相应学生的信息。,2019年2月5日,14.5.1 ajax访问数据库实例,selectstudent.html 请选择一个学生： 石双元 沈文娟 刘 维 陈 琼 学生信息将在此处列出。 ,2019年2月5日,14.5.1 ajax访问数据库实例,getstudent.aspx void page_load(object sender , eventargs e) if (! ispostback ) string sql; string accesscon = “provider=microsoft.jet.oledb.4.0;data source=“; accesscon += server.mappath(“/app_data/asp_net.mdb“); oledbconnection dbcon = new oledbconnection(accesscon); dbcon.open(); sql=“select * from student where stdid=“; sql += “ + request.querystring“q“ + “; oledbcommand dbcommand = new oledbcommand(sql, dbcon); oledbdatareader dr = dbcommand.executereader(); response.write(“); while (dr.read() response.write(“ + “stdid“ + “); response.write(“); dr.close(); dbcon.close(); ,2019年2月5日,selectstudent.asp,ajax服务器页面也可以用asp实现。其代码如下： /selectstudent.asp “) do until rs.eof for each x in rs.fields response.write(“ & & “) response.write(“ & x.value & “) next rs.movenext loop response.write(“) %,其中，expires属性可设置在页面缓存失效前页面被缓存的时间(分钟)，response.expires=-1 指示页面不会被缓存。,2019年2月5日,14.5.2 ajax访问xml数据文件实例,下面是一个用xml格式表示的图书分类的例子文件，该xml文件中，将图书分为计算机类、管理类和文学类3个类别，每个类别又有若干本书。其内容如下： /booklist.xml 计算机类 面向对象程序设计 程序设计理论与方法 . ,2019年2月5日,14.5.2 ajax访问xml数据文件实例,针对上面用xml表示的图书分类文件，综合利用html、javascript和asp.net技术实现图书的分类查询与显示，并实现无刷新的局部更新。 主程序14.5 selectbook.htm是一个html文件用一个名为books的下拉列表框保存图书的分类信息，当用户选择下拉列表框中的图书类别时，该对象的事件onchange就会被触发，事件的函数showbook(this.value) 被调用。showbook()函数是在javascript文件selectbook.js中定义的。每次请求或刷新页面时(即在下拉列表框中选择图书类别)，showbook()函数就会调用getbook.aspx页面获取指定类别的图书信息作局部更新的数据源。,2019年2月5日,14.5.2 ajax访问xml数据文件实例,程序14.5：selectbook.htm ajax 访问xml文件实例 选择图书类型： 选择书类 计算机类 管理类 文学类 在此列出图书信息。 ,2019年2月5日,14.5.2 ajax访问xml数据文件实例,selectbook.js的程序代码如下： var xmlhttp function showbook(str) xmlhttp = getxmlhttpobject(); var url = “getbook.aspx“; url = url + “?q=“ + escape(str); url = url + “ ,2019年2月5日,14.5.2 ajax访问xml数据文件实例,getbook.aspx页面是根据指定的图书类别，从xml文件中读取并返回该类别的图书信息。程序代码如下： protected void page_load(object sender, eventargs e) string q = request.querystring“q“; string result = “; xmldocument doc = new xmldocument(); doc.load(server.mappath(“/app_data/booklist.xml“); xmlnodelist xnl = doc.getelementsbytagname(“cate“); foreach (xmlnode xn in xnl) if (xn.firstchild.innertext.contains(q) int i = 0; foreach (xmlnode xnn in xn.childnodes) if (i = 0) i+; continue; result += (i+ = 1 ? “ : “,“) + xnn.innertext; if (string.isnullorempty(result) result = “没有此类书目“; response.write(result); ,2019年2月5日,14.5.3 ajax responsexml应用实例,与responsetext 以字符串返回http响应不同，responsexml以xml返回响应。 responsexml属性返回xml文档对象，可使用 w3c dom 节点树的方法和属性来检查和解析该对象。 在下面的ajax 实例中，将演示网页如何使用ajax技术从数据库中读取信息。这次，这些从数据库中选取的数据将被转换为 xml 文档，然后使用 dom 来提取要显示的值。运行结果如图14.5所示。,2019年2月5日,14.5.3 ajax responsexml应用实例,程序14.6：selectcustomer.htm 选择客户： alfreds futterkiste north/south wolski zajazd ,2019年2月5日,14.5.3 ajax responsexml应用实例,/selectcustomer.js var xmlhttp function showcustomer(str) xmlhttp = getxmlhttpobject(); var url = “getcustomer_xml.aspx“; url = url + “?q=“ + str; url = url + “ ,2019年2月5日,javascript 代码（续）,function statechanged() if (xmlhttp.readystate = 4) var xmldoc = xmlhttp.responsexml.documentelement; document.getelementbyid(“companyname“).innerhtml = xmldoc.getelementsbytagname(“compname“)0.childnodes0.nodevalue; document.getelementbyid(“contactname“).innerhtml = xmldoc.getelementsbytagname(“contname“)0.childnodes0.nodevalue; document.getelementbyid(“address“).innerhtml = xmldoc.getelementsbytagname(“address“)0.childnodes0.nodevalue; document.getelementbyid(“city“).innerhtml = xmldoc.getelementsbytagname(“city“)0.childnodes0.nodevalue; document.getelementbyid(“country“).innerhtml = xmldoc.getelementsbytagname(“country“)0.childnodes0.nodevalue; ,2019年2月5日,ajax服务器页面,/getcustomer.aspx protected void page_load(object sender, eventargs e) sqlconnection connection = new sqlconnection(“data source=.;initial catalog=northwind;user id=sa;pwd=“;“); sqlcommand command = new sqlcommand(); command.connection = connection; command.commandtext = “select * from customers where customerid=id“; command.parameters.addwithvalue(“id“, request.querystring“q“); sqldataadapter adapter = new sqldataadapter(command); datatable table = new datatable(); adapter.fill(table); response.expires = -1; response.