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

AJAX复习题注意：复习提纲中的“参见例子*”的说法，不是照抄例子，需要修改！第一章PPT1. AJAX的全称？Asynchronous JavaScript and XML2. 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. 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 如何在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 Servlet1 自定义Servlet父类是？需要重载父类的什么方法响应客户端HTTP GET请求？需要重载父类的什么方法响应客户端HTTP POST请求？父类：HttpServlet。重载doGet方法。重载doPost方法。2 doGet和doPost方法中输入参数是什么？（都是两个，注意数据类型）HttpServletRequest requestHttpServletResponse response3 如何客户端发送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 Ajax1 当服务器端向客户端传递多个数据时，可以将其包装为什么或者什么传递到客户端？当然如果服务器向客户端传递一个数据时，可使用第三章中的字符串传值。XML或JSON2 Example4-1，服务器端Servlet使用StringBuffer创建XML文档，然后把StringBuffer转换为字符串发还给客户端。查看代码。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(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 Data1 MySql中建库，在库中建表P442 批量导入数据的命令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=*&password=*); 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 Toolkits1 常见的简化AJAX中JS代码的AJAX库或者工具包有哪些？The Dojo ToolkitThe Rico ToolkitThe DWR ToolkitScriptaculousPrototype2 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 : 处理请求的urlload : 当响应到达时调用的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 其中根元素必须是什