南京工业大学AJAX复习题.pdf

AJAX复习题 注意：复习提纲中的“参见例子*”的说法，不是照抄例子，需要修 改！ 第一章PPT 1. AJAX的全称？ Asynchronous JavaScript and XML 2. AJAX包含哪些技术？ 使用XHTML和CSS的基于标准的表示技术 使用DOM进行动态显示和交互 使用XML和XSLT进行数据交换和处理 使用XMLHttpRequest进行异步数据检索 使用Javascript将以上技术融合在一起 3. AJAX的主要特点 为Web开发提供异步的数据传输和交换方式，可以在不重载 （Reload）刷新（Refresh）页面的情况下与服务器进行数据交换。 4. AJAX的异步性表现如下图 5. 传统的Web应用程序的同步性如下图 6. 在HTML DOM中如何根据id获取页面元素？ document . getElementById(*); 7. 在JavaScript中，如何定义一个类似于Java中的类？ JavaScript中只有function，没有class，用function模拟java中的 class，例如： function Book(aname)/既代表Book类定义，也代表Book类的构造 函数，有几个属性？有几个类方法？ = aname; this.setName = function(bname) = bname; this.getName = function()return ; 8. 在JavaScript中，如何定义一个如上例的Book类的对象？ var book = new Book(“*”); 9. 如何用原型化方法在JavaScript中定义一个类似于Java中的 类？ var Book = function(aname) = aname; Btotype.getName =function()return ; Btotype.setName =function(bname) = bname; Chapter 1. Setup 1 如何搭建AJAX应用程序的开发环境？ 浏览器，JDK，NetBeans Chapter 2. JavaScript for Ajax 2 CSS样式表由样式规则组成，后缀名是？ .css 3 样式规则如下所示 P color:red; font-size:30px; font-family:隶书; 4 在CSS中如何规定类样式？如何在页面中使用类样式？ 定义: . 类名属性:值; 使用： class=“类名” 5 什么是id样式？ 通过标签的id定义样式，定义：#id属性:值; 6 如何在Html页面中引用外部样式表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 请求（该Servlet在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(Microsoft.XMLHTTP); req.open(Get,url,true); req.onreadystatechange =myCall; req.send(null); 10 客户端创建XmlHttpRequest对象，向服务器端发送HTTP异步 请求后，在回调函数中由该对象负责获取从服务器端返回的 值，所以客户端创建的XmlHttpRequest对象必须放在客户端脚 本的全局变量中。 11 客户端的回调函数中，常用XmlHttpRequest对象的哪两个属性 获取从服务器端传来的值？这两个属性获取的值有什么区别？ responseText : 将响应信息作为字符串返回 responseXML : 将响应信息格式化为XMLDOM对象并返回 12 P9的Table2-1列出了XmlHttpRequest对象的readyState五个 值，含义如下 readyState 状态 状态说明 (0)未初始化 此阶段确认XMLHttpRequest对象是否创建，并为调 用open()方法进行未初始化作好准备。值为0表示对 象已经存在，否则浏览器会报错对象不存在。 (1)载入 此阶段对XMLHttpRequest对象进行初始化， 即调用open()方法，根据参数 (method,url,true)完成对象状态的设置。 并调用send()方法开始向服务端发送请求。 值为1表示正在向服务端发送请求。 (2)载入完成 此阶段接收服务器端的响应数据。但获得的 还只是服务端响应的原始数据，并不能直接 在客户端使用。值为2表示已经接收完全部 响应数据。并为下一阶段对数据解析作好准 备。 (3)交互 此阶段解析接收到的服务器端响应数据。即 根据服务器端响应头部返回的MIME类型把数 据转换成能通过responseBody、 responseText或responseXML属性存取的格 式，为在客户端调用作好准备。状态3表示 正在解析数据。 (4)完成 此阶段确认全部数据都已经解析为客户端可 用的格式，解析已经完成。值为4表示数据 解析完毕，可以通过XMLHttpRequest对象的 相应属性取得数据。 概而括之，整个XMLHttpRequest对象的生命 周期应该包含如下阶段： 创建初始化请求发送请求接收数据 解析数据完成 13 XmlHttpRequest对象的status属性值为200的含义如下 Status=200表示http连接状态正常，如果不是200，则表示http连接有 误，此时回来的数据也不是我们需要的。 14 编写客户端的回调函数myCall( ), 获取从服务器端传来的字符 串，并且更新在客户端的div中（中，使用其 InnerHtml属性） function myCall() if (req.readyState=4) if (req.status = 200) var logo= document.getElementById(logo); logo.innerHtml=req.responseText; Chapter 3. A Simple Ajax Servlet 1 自定义Servlet父类是？需要重载父类的什么方法响应客户端 HTTP GET请求？需要重载父类的什么方法响应客户端HTTP POST请求？ 父类：HttpServlet。重载doGet方法。重载doPost方法。 2 doGet和doPost方法中输入参数是什么？（都是两个，注意数据 类型） HttpServletRequest request HttpServletResponse response 3 如何客户端发送Get请求，例如传输的查询字符串是 value=“abc”, 在doGet中使用什么获取abc这个值？ HttpServletRequest的getParameter方法，即request. getParameter(“value”); 4 netbeans中创建完自定义的Servlet后，需要在web.xml中自动或 者手动配置该自定义Servlet，如下例所示 AjaxResponseServlet ex.AjaxResponseServlet AjaxResponseServlet /AjaxResponseServlet 说明红色部分的含义 Servlet名字为AjaxResponseServlet，servlet类为ex包中的 AjaxResponseServlet类，servlet名字，url映射地址 为/AjaxResponseServlet。 5：在自定义Servlet的doGet方法中如何向客户端写一个字符串？用代 码说明 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException response.setContentType(text/html); response.setHeader(Cache-Control, no-cache); response.getWriter( ).write(“String”); Chapter 4. XML and JSON for Ajax 1 当服务器端向客户端传递多个数据时，可以将其包装为什么或 者什么传递到客户端？当然如果服务器向客户端传递一个数据 时，可使用第三章中的字符串传值。 XML或JSON 2 Example4-1，服务器端Servlet使用StringBuffer创建XML文档， 然后把StringBuffer转换为字符串发还给客户端。查看代码。 3 可以使用JDOM,dom4j,SAX简化Servlet创建XML文档的过程， 如果使用JDOM,dom4j,SAX，那么在项目中需要导入什么jar 包？ JDOM: jdom.jar Dom4j: dom4j.jar SAX: sax.jar 4 假设服务器Servlet创建了一个xml文档，如下所示 George Dont forget the meeting! 编写Servlet的doGet方法，使用dom4j创建该XML文档，并返回给客户 端【参见例子4-3】 protected void doGet(HttpServletRequest 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 Document 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 outformat = 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()和 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文档从服务器端传多个值到客户端，有 什么优点？ JSON对象通常是小于等价的XML文件（在传输同样内容的时候）， 并使用JSON，内存效率更高 JSON可以JavaScript的eval（）函数解析JSON对象。不需要其他库， 不需要担心跨浏览器。只要您的浏览器启用了JavaScript，并支持 eval（）函数，能够对数据进行分析。 7 简述JSON对象的两种结构：名称值对和数组 名称值： 对象是一个无序的“名称/值对”集合。一个对象以“”（左括 号）开始，“”（右括号）结束。每个“名称”后跟一个“:”（冒 号）；“名称/值 对”之间使用“,”（逗号）分隔。 数组： 数组是值（value）的有序集合。一个数组以“”（左中括号）开 始，“”（右中括号）结束。值之间使用“,”（逗号）分隔。 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(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 = 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.responseText; var myJSONObject = eval(+jsonData+); var body = document.getElementById(body); body.value = myJSONObject.note.body; Chapter 5. Getting Useful Data 1 MySql中建库，在库中建表P44 2 批量导入数据的命令P45，（mysqlimport，注意在哪里键入该 命令） 3 在项目中使用Mysql数据库，首先要加入mysql-connector-java- *.*.*-bin.jar包 4 编写在服务器端连接数据库，返回一个connection对象的代码。 可参见下例 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.printStackTrace( ); 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语句，对数据库执行不 同的操作，把操作返回的记录们放在结果集中 if (result.next( ) ) return true; /查询到记录，返回true，注意代码 中判断是否查询到记录的条件，不能用书中的result = null 判断， 如果需要读取查询到的每条记录的字段值，不用if，用while循环遍 历结果集中每条记录，然后用result.getString(字段名)取每条记录 的字段值，最后把你需要的字段值用第四章的内容包装为XML文 档或者JSON对象返回给客户端 catch (SQLException e) return false; Chapter 6. Ajax Libraries and Toolkits 1 常见的简化AJAX中JS代码的AJAX库或者工具包有哪些？ The Dojo Toolkit The Rico Toolkit The DWR Toolkit Scriptaculous Prototype 2 Dojo只能简化创建XmlHttpRequest对象的代码，回调函数还是 需要自己写。 3 Rico可简化创建XmlHttpRequest对象的代码，甚至可以不用写 回调函数，实现自动更新。 4 使用Dojo工具包，如何在客户端导入Dojo，如何导入并且配置 Dojo /只导入 /导入且配置 5 使用Dojo工具包，如何简化创建XmlHttpRequest对象的代码？ dojo.io.bind( url: *， load:function(type,data,evt) * , error: function(type, data,evt) * , mimetype: text/plain ); 其中url，load，error，mimetype是什么意思？ url : 处理请求的url load : 当响应到达时调用的javascript回调函数 error : 错误时调用的javascript函数 mimetype : 解析响应 6 使用Rico工具包，如何在客户端导入Rico？ 7 Rico 提供了一个名叫AjaxEngine的JavaScript对象,使用RICO， 服务器端返回的必须是固定格式的XML文档。 8 使用AjaxEngine创建AJAX应用分为哪三步？ a) 注册一个Ajax请求。 i. 在AjaxEngine中为某个XmlHttp请求指定一个名字 /代码 示例：ajaxEngine.registerRequest(zipRequestHandle, rico); 两个参数一个是请求的别名，第二个是该请求发送 时，用来指定服务器端某个应用程序的url，显然这里的 字符串rico必须在web.xml中和服务器端的某个servlet联系 在一起 b) 注册一个Ajax响应。 i. 在AjaxEngine为响应处理对象(两类）进行注册 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请求， ajaxEngine.sendRequest(zipRequestHandle, zip=+escape(this.value)，第一个参数是注册的请求别名，第二个 参数是查询字符串 /在客户端页面注册完请求和响应后，在页面HTML标签的事件响 应属性中发送AJAX请求，不需要写繁琐的JS代码，就可以完成 AJAX应用了。 9 Rico中如果注册的响应是HTML标签，写出服务器端返回的 XML文档 some content for the city some content for the state 其中根元素必须是什么？ 返回的数据必须包含