《NET》课件第7章 Ajax技术.ppt

1、n一个简单的Ajax应用程序n使用 XMLHttpRequest 对象与服务器进行通信nAJAX Suggest实例nAJAX数据库实例nAJAX XML实例 nAJAX Response XML实例 2024-7-61n任务目标任务目标掌握如何创建一个Ajax应用程序；掌握如何使用一个Ajax应用程序；2024-7-62n下面通过创建一个小型的 AJAX 应用程序来理解 AJAX 的工作原理。（1）设计一个带有两个文本框的 HTML 表单：用户名和时间。用户名文本框由用户填写，而时间文本框使用 AJAX 进行填写,HTML 文件名为 testAjax.htm2024-7-63用户:时间:n（

2、2）用这段创建 XMLHttpRequest 对象的 JavaScript 来更新一下我们的“testAjax.htm”文件，完整的代码参考书本：2024-7-64n任务目标掌握XMLHttpRequest 对象的知识；熟练运用XMLHttpRequest 对象；2024-7-65n下面使用ajax的xmlHttpRequest对象，设计一个表单，当用户在用户名文本框中键入某些内容时函数会“在幕后”执行。（1）在运行程序之间前来了解XMLHttpRequest 对象的三个重要的属性：onreadystatechange 属性：readyState 属性：responseText 属性：（2）创

3、建可显示当前服务器时间的脚本（3）运行 AJAX 应用程序2024-7-66n任务目标掌握Ajax 对象的知识；熟练运用XMLHttpRequest 对象；2024-7-67n在下面的 AJAX 例子中，演示当用户向一个标准的 HTML 表单中输入数据时网页如何与 web 服务器进行通信。（1）在下面的文本框中输入名字：（2）定义 showHint()函数（3）编写GetXmlHttpObject()函数（4）定义stateChanged()函数（5）下面列出了完整的AJAX HTML 页面代码，它包含了一个简单的 HTML 表单，以及一个指向 JavaScript 的链接。2024-7-68

4、n任务目标掌握Ajax 数据库的知识；熟练运用Ajax数据库实例；2024-7-69nAJAX 可用来与数据库进行动态地通信，下面的 AJAX 例子将演示如何使用 AJAX 技术令网页从数据库读取信息。（1）在下面的框中选择一个名字（2）编写AJAX JavaScript（3）编写AJAX 服务器页面2024-7-610n任务目标掌握Ajax XML的知识；熟练运用Ajax XML实例；2024-7-611nAJAX 可用来与 XML 文件进行交互式通信，下面的 AJAX 实例中，将演示如何通过使用AJAX 技术，从 XML 文件中读取信息。n在下面的下列列表中选择一个 CDn（2）编写AJA

5、X JavaScript代码n（3）编写AJAX 服务器页面2024-7-612n任务目标掌握Ajax Response XML的知识；熟练运用Ajax Response XML实例；2024-7-613n 在下面的 AJAX 实例中，将演示网页如何使用 AJAX 技术从数据库中读取信息。这些从数据库中选取的数据将被转换为 XML 文档，然后我们将使用 DOM 来提取要显示的值。（1）选取下拉列表中的名称（2）编写AJAX JavaScript代码（3）编写名为getcustomer_xml.asp的AJAX 服务器页面（4）通过XMLHTTP把文本文件载入HTML元素。（5）通过XMLHTTP加载XML文件：（6）通过XMLHTTP进行一次HEAD请求：（7）把XML文件显示为HTML表格。2024-7-6142024-7-615THE END !2024-7-616