1、AJAX 复习题注意：复习提纲中的“参见例子*”的说法，不是照抄例子，需要修改！第一章 PPT1. AJAX 的全称？Asynchronous JavaScript and XML2. AJAX 包含哪些技术？使用 XHTML 和 CSS 的基于标准的表示技术 使用 DOM 进行动态显示和交互 使用 XML 和 XSLT 进行数据交换和处理 使用 XMLHttpRequest 进行异步数据检索 使用 Javascript 将以上技术融合在一起 3. AJAX 的主要特点为 Web 开发提供异步的数据传输和交换方式，可以在不重载（ Reload）刷新（Refresh）页面的情况下与服务器进行数据
2、交换。4. AJAX 的异步性表现如下图5. 传统的 Web 应用程序的同步性如下图6. 在 HTML DOM 中如何根据 id 获取页面元素？document . getElementById(“*“);7. 在 JavaScript 中，如何定义一个类似于 Java 中的类？JavaScript 中只有 function，没有 class，用 function 模拟 java 中的 class，例如：function Book(aname)/既代表 Book 类定义，也代表 Book 类的构造函数，有几个属性？有几个类方法？this.name = aname;this.setName =
3、function(bname)this.name = bname;this.getName = function()return this.name;8. 在 JavaScript 中，如何定义一个如上例的 Book 类的对象？var book = new Book(“*”);9. 如何用原型化方法在 JavaScript 中定义一个类似于 Java 中的类？var Book = function(aname)this.name = aname;Book.prototype.getName =function()return this.name;Book.prototype.setName =
4、function(bname)this.name = bname;Chapter 1. Setup1 如何搭建 AJAX 应用程序的开发环境？浏览器，JDK，NetBeansChapter 2. JavaScript for Ajax2 CSS 样式表由样式规则组成，后缀名是？.css3 样式规则如下所示P color:red; font-size:30px; font-family:隶书;4 在 CSS 中如何规定类样式？如何在页面中使用类样式？定义: . 类名属性:值;使用： class=“类名”5 什么是 id 样式？通过标签的 id 定义样式，定义： #id属性: 值;6 如何在 Ht
5、ml 页面中引用外部样式表 style.css?1)使用 LINK（链接）标签 :2) 使用import 导入： import style.css;7 如何在 Html 页面中插入页面内 css 样式?样式规则8 将 JavaScript 语句插入 HTML 文档的两种方式7.1 使用 标签将语句嵌入文档， 自己考虑具体例子7.2 将 JavaScript 外部源文件链接到 HTML 文档中，自己考虑具体例子9 写出 Html 页面的客户端脚本函数 sendRequest（） ， 在该函数中创建XmlHttpRequest 请求，向服务器端的某个 servlet 发送 Get 请求（该 Ser
6、vlet 在web.xml 中配置的 url 为/search）, 设置回调函数为 myCall( ), 并且传递参数value=“abc”【参见 Example 2-2. ajax.js 中的 function convertToDecimal( ) 】var req;function sendRequest()var url = “/search?value=”abc”“;if (window.XMLHttpRequest) req = new XMLHttpRequest( ); else if (window.ActiveXObject) req = new ActiveXObject
7、(“Microsoft.XMLHTTP“); req.open(“Get“,url,true);req.onreadystatechange =myCall;req.send(null);10 客户端创建 XmlHttpRequest 对象，向服务器端发送 HTTP 异步请求后，在回调函数中由该对象负责获取从服务器端返回的值，所以客户端创建的 XmlHttpRequest 对象必须放在客户端脚本的全局变量中。11 客户端的回调函数中，常用 XmlHttpRequest 对象的哪两个属性获取从服务器端传来的值？这两个属性获取的值有什么区别？responseText : 将响应信息作为字符串返回r
8、esponseXML : 将响应信息格式化为 XMLDOM 对象并返回12 P9 的 Table2-1 列出了 XmlHttpRequest 对象的 readyState 五个值，含义如下readyState 状态 状态说明(0)未初始化 此阶段确认 XMLHttpRequest 对象是否创建，并为调用 open()方法进行未初始化作好准备。值为 0 表示对象已经存在，否则浏览器会报错对象不存在。 (1)载入此阶段对 XMLHttpRequest 对象进行初始化，即调用 open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。
9、值为 1 表示正在向服务端发送请求。 (2)载入完成此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为 2 表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。 (3)交互此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的 MIME 类型把数据转换成能通过responseBody、responseText 或 responseXML 属性存取的格式，为在客户端调用作好准备。状态 3 表示正在解析数据。 (4)完成此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为 4 表示数据解析完毕，可以通过 XMLHttpRe
10、quest对象的相应属性取得数据。概而括之，整个 XMLHttpRequest 对象的生命周期应该包含如下阶段：创建初始化请求发送请求接收数据解析数据完成13 XmlHttpRequest 对象的 status 属性值为 200 的含义如下Status=200 表示 http 连接状态正常，如果不是 200，则表示 http 连接有误，此时回来的数据也不是我们需要的。14 编写客户端的回调函数 myCall( ), 获取从服务器端传来的字符串，并且更新在客户端的 div 中（中，使用其 InnerHtml 属性）function myCall()if (req.readyState=4) if
11、 (req.status = 200) var logo= document.getElementById(“logo“);logo.innerHtml=req.responseText; Chapter 3. A Simple Ajax Servlet1 自定义 Servlet 父类是？需要重载父类的什么方法响应客户端 HTTP GET 请求？需要重载父类的什么方法响应客户端 HTTP POST 请求？父类：HttpServlet。重载 doGet 方法。重载 doPost 方法。2 doGet 和 doPost 方法中输入参数是什么？（都是两个，注意数据类型）HttpServletRequ
12、est requestHttpServletResponse response3 如何客户端发送 Get 请求，例如传输的查询字符串是 value=“abc”, 在 doGet 中使用什么获取 abc 这个值？HttpServletRequest 的 getParameter 方法，即 request. getParameter(“value”);4 netbeans 中创建完自定义的 Servlet 后，需要在 web.xml 中自动或者手动配置该自定义Servlet，如下例所示AjaxResponseServletex.AjaxResponseServletAjaxResponseServ
13、let/AjaxResponseServlet说明红色部分的含义Servlet 名字为 AjaxResponseServlet，servlet 类为 ex 包中的 AjaxResponseServlet 类，servlet 名字，url 映射地址为 /AjaxResponseServlet。5：在自定义 Servlet 的 doGet 方法中如何向客户端写一个字符串？用代码说明protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOExcep
14、tion response.setContentType(“text/html“);response.setHeader(“Cache-Control“, “no-cache“);response.getWriter( ).write(“String”);Chapter 4. XML and JSON for Ajax1 当服务器端向客户端传递多个数据时，可以将其包装为什么或者什么传递到客户端？当然如果服务器向客户端传递一个数据时，可使用第三章中的字符串传值。XML 或 JSON2 Example4-1，服务器端 Servlet 使用 StringBuffer 创建 XML 文档，然后把Str
15、ingBuffer 转换为字符串发还给客户端。查看代码。3 可以使用 JDOM,dom4j,SAX 简化 Servlet 创建 XML 文档的过程，如果使用JDOM,dom4j,SAX，那么在项目中需要导入什么 jar 包？JDOM: jdom.jarDom4j: dom4j.jarSAX: sax.jar4 假设服务器 Servlet 创建了一个 xml 文档，如下所示GeorgeDont forget the meeting!编写 Servlet 的 doGet 方法，使用 dom4j 创建该 XML 文档，并返回给客户端【参见例子4-3】protected void doGet(Http
16、ServletRequest request, HttpServletResponse response)throws ServletException, IOException String dom4jxml= createDom4jXML();response.setContentType(“text/html“);response.setHeader(“Cache-Control“, “no-cache“);response.getWriter( ).write(dom4jxml);public String createDom4jXML() throws IOException Doc
17、ument document = DocumentHelper.createDocument( );Element root = document.addElement(“note“);Element element = root.addElement(“to“).addText(“George”);element = root.addElement(“body“).addText(“Dont forget the meeting!”);StringBuffer xmlDoc = null;StringWriter sw = new StringWriter( );OutputFormat o
18、utformat = OutputFormat.createPrettyPrint( );XMLWriter writer = new XMLWriter(sw, outformat);writer.write(document);writer.close( );xmlDoc = sw.getBuffer( );return xmlDoc.toString( );5 假设客户端的浏览器是 IE 浏览器，编写客户端的回调函数 readXml（） ，取服务器端传来的上例中的 XML 文档中 body 子元素的内容，将其填入页面中的单行文本框中（ 中【参见例子 4-5 中的 callback()和
19、msPopulate（） 】funcation readXml()if (req.readyState=4) if (req.status = 200) msPopulate( ); function msPopulate( ) var xmlDoc = req.responseXML;bod = xmlDoc.getElementsByTagName(body); var body = document.getElementById(body); body.value=bod0.firstChild.data; 6 JSON 对象相较于 XML 文档从服务器端传多个值到客户端，有什么优点？J
20、SON 对象通常是小于等价的 XML 文件（在传输同样内容的时候） ，并使用 JSON，内存效率更高JSON 可以 JavaScript 的 eval（）函数解析 JSON 对象。不需要其他库，不需要担心跨浏览器。只要您的浏览器启用了 JavaScript，并支持 eval（）函数，能够对数据进行分析。7 简述 JSON 对象的两种结构：名称值对和数组名称值：对象是一个无序的“名称/值对”集合。一个对象以“” （左括号）开始， “”（右括号）结束。每个“名称”后跟一个“:” （冒号） ；“名称/ 值 对”之间使用“,” （逗号）分隔。数组：数组是值（value）的有序集合。一个数组以“” （左
21、中括号）开始， “”（右中括号）结束。值之间使用“,” （逗号）分隔。8 在服务器端可以使用 StringBuffer 创建 JSON 对象，也可以使用 json_simple.jar 简化JSON 对象的创建过程，使用 json_simple.jar，必须在项目中首先导入该 jar 包9 编写 Servlet 的 doGet，将 4 中的 XML 文档中使用 json_simple.ja 包装为 JSON 对象“note“:“to“: “George“,“body“: “Dont forget the meeting! “并发还给客户端【参见例子 4-11】public void doGet
22、(HttpServletRequest req, HttpServletResponse res)throws ServletException, IOException res.setContentType(“text/xml“);res.setHeader(“Cache-Control“, “no-cache“); String outString = createJSONwithJSONsimple();res.getWriter( ).write(outString); public String createJSONwithJSONsimple() JSONObject obj =
23、new JSONObject( );JSONObject obj2 = new JSONObject( );obj2.put(“to“,“George“);obj2.put(“body“,“Dont forget the meeting! “);obj.put(“note“,obj2);return(obj.toString( );10：编写客户端的回调函数 readJson（） ，取服务器端传来的上例中的 JSON 对象中 body的值，将其填入页面中的单行文本框中（ 中。 【参见例子4-12】funcation readJson()var jsonData = req.responseTe
24、xt;var myJSONObject = eval(+jsonData+);var body = document.getElementById(body);body.value = myJSONObject.note.body;Chapter 5. Getting Useful Data1 MySql 中建库，在库中建表 P442 批量导入数据的命令 P45， （mysqlimport，注意在哪里键入该命令）3 在项目中使用 Mysql 数据库，首先要加入 mysql-connector-java-*.*.*-bin.jar 包4 编写在服务器端连接数据库，返回一个 connection
25、对象的代码。可参见下例Connection con = null; String driver = “com.mysql.jdbc.Driver“;try Class.forName(driver).newInstance( ); catch (Exception e) System.out.println(“Failed to load mySQL driver.“); return null; try con = DriverManager.getConnection( “jdbc:mysql:/AJAX?user=* catch (Exception e) e.printStackTra
26、ce( ); return con; 5：编写代码，使用上例中的 connection 对象，查询数据库，返回结果的代码，可参加下例ResultSet result = null; try Statement select =con. createStatement( );/该 con 为上例中返回的 connection 对象result = select.executeQuery(“SELECT USERNAME from USERS where USERNAME =“ + username + “;“); /这里可以定义不同的 SQL 语句，对数据库执行不同的操作，把操作返回的记录们放在
27、结果集中if (result.next( ) ) return true; /查询到记录，返回 true，注意代码中判断是否查询到记录的条件，不能用书中的 result = null 判断，如果需要读取查询到的每条记录的字段值，不用 if，用 while 循环遍历结果集中每条记录，然后用 result.getString(“字段名“)取每条记录的字段值，最后把你需要的字段值用第四章的内容包装为 XML 文档或者JSON 对象返回给客户端catch (SQLException e) return false; Chapter 6. Ajax Libraries and Toolkits1 常见的
28、简化 AJAX 中 JS 代码的 AJAX 库或者工具包有哪些？The Dojo ToolkitThe Rico ToolkitThe DWR ToolkitScriptaculousPrototype2 Dojo 只能简化创建 XmlHttpRequest 对象的代码，回调函数还是需要自己写。3 Rico 可简化创建 XmlHttpRequest 对象的代码，甚至可以不用写回调函数，实现自动更新。4 使用 Dojo 工具包，如何在客户端导入 Dojo，如何导入并且配置 Dojo/只导入/导入且配置5 使用 Dojo 工具包，如何简化创建 XmlHttpRequest 对象的代码？dojo.i
29、o.bind( url: *，load:function(type,data,evt) * , error: function(type, data,evt) * , mimetype: “text/plain“ ); 其中 url，load ，error，mimetype 是什么意思？url : 处理请求的 urlload : 当响应到达时调用的 javascript 回调函数error : 错误时调用的 javascript 函数mimetype : 解析响应6 使用 Rico 工具包，如何在客户端导入 Rico？7 Rico 提供了一个名叫 AjaxEngine 的 JavaScript
30、 对象 ,使用 RICO，服务器端返回的必须是固定格式的 XML 文档。8 使用 AjaxEngine 创建 AJAX 应用分为哪三步？a) 注册一个 Ajax 请求。i. 在 AjaxEngine 中为某个 XmlHttp 请求指定一个名字 /代码示例：ajaxEngine.registerRequest(zipRequestHandle, rico); 两个参数一个是请求的别名，第二个是该请求发送时，用来指定服务器端某个应用程序的 url，显然这里的字符串 rico 必须在 web.xml 中和服务器端的某个 servlet 联系在一起b) 注册一个 Ajax 响应。i. 在 AjaxEn
31、gine 为响应处理对象(两类）进行注册1. 可以是一个作为数据返回目的的 HTML 元素 /代码示例ajaxEngine.registerAjaxElement(cityDiv); cityDiv 是 html 的某个 div 标签的 id 值，注册了这个 div 标签为 AJAX 响应，则不需要写回调函数，服务器端返回值自动写入到 div 标签中2. 或者是某个指定的、将用于处理响应的 JavaScript 对象。 /代码示例：首先参见 example6-2，首先在客户端创建一个 JS 自定义类，然后使用原型方法，添加该类的方法，关键是 ajaxUpdate 方法（服务器响应会自动触发该方法，完成更新） ，最后创建一个该类的 JS 对象（参见 example6-2 的最后一句） ；/创建完 6-2 的 JS 对象后，注册该对象，代码示例：AjaxEgine.registerAjaxObject（“locationUpdate ”，cityStateUpdate ）,第一个参数是对象别名，第二个参数是 6-2 中创建的 JS 对象c) 发送 Ajax 请求。/代码示例: 发送 Get 请求，
