新JSP应用开发与实践 教学课件 刘乃琦 王冲 第13章 JSP与Ajax.ppt

运行本实例，在页面中将显示一个三级联动下拉列表，用于选择用户的居住地。例如，在省和直辖市的下拉列表框中选择“吉林省”，在地级市下拉列表中将显示吉林省包括的全部地级市，在地级市下拉列表中选择“长春”，在县、县级市或区下拉列表中将显示长春地区包括的县、县级市或区，如图13-6所示。 图13-6 多级联动下拉列表 （1）Ajax是Asynchronous JavaScript and XML的缩写，意思是异步的JavaScript与XML。 （2）XMLHttpRequest，它是一个具有应用程序接口的JavaScript对象，能够使用超文本传输协议（HTTP）连接一个服务器，是微软公司为了满足开发者的需要，于1999年在IE 5.0浏览器中率先推出的。现在许多浏览器都对其提供了支持，不过实现方式与IE有所不同。 （3）jQuery是一套简洁、快速、灵活的JavaScript脚本库，它是由John Resig于2006年创建的，它帮助我们简化了JavaScript代码。JavaScript脚本库类似于Java的类库，我们将一些工具方法或对象方法封装在类库中，方便用户使用。 （4）XML（Extensible Markup Language）是一种可扩展的标记语言，它强大的可移植性和可重用性都是其他的语言所无法比拟的。如果返回数据的格式是XML文件，那么在回调函数中就需要对XML文件进行处理和解析数据。 （5）JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。语法简洁，不仅易于阅读和编写，而且也易于机器的解析和生成。 （6）JSON由两个数据结构组成，一种是对象（“名称/值”形式的映射），另一种是数组（值的有序列表）。JSON没有变量或其他控制，只用于数据传输。 知识点提炼 13-1 说明什么是Ajax，它所使用的技术有哪些？ 13-2 简述传统的Ajax的工作流程。 13-3 什么是jQuery，以及如何配置jQuery？ 13-4 简述使用jQuery发送GET和POST请求时，常用的几种服务器返回数据的格式。 13-5 简述使用Ajax时，解决中文乱码的几种方法。 习题 （6）为了实现实时显示必威体育精装版的聊天内容，当DOM元素载入就绪后，需要在index.jsp文件的引用jQuery库的代码下方，编写下面的代码。 $(document).ready(function() { getContent(); //获取聊天内容 window.setInterval(getContent();, 5000); //每隔5秒钟获取一次聊天内容 }); （7）在index.jsp页面的合适位置添加用于获取用户昵称和说话内容的表单及表单元素，关键代码如下： form name=form1 method=post action= input name=user type=text id=user size=20 说： input name=speak type=text id=speak size=50 nbsp; input id=send type=button class=btn_grey value=发送 /form （8）在引用jQuery库的代码下方，编写JavaScript代码，实现当DOM元素载入就绪后，为“发送”按钮添加单击事件，在该单击事件中，判断昵称和发送信息文本框是否为空，如果为空，则给出提示对话框，并让该文本框获得焦点，否则应用post()方法，发送异步请求到服务器，保存聊天信息。具体代码如下： $(document).ready(function() { $(#send).click(function() { if ($(#user).val() == ) { //判断昵称是否为空 alert(请输入您的昵称！); } if ($(#speak).val() == ) { //判断说话内容是否为空 alert(说话内容不可以为空！); $(speak).focus(); //让说话内容文本框获得焦点 } $.post(ChatServlet?action=send, { user : $(#user).val(), speak : $(#speak).val() }); //发送POST请求 $(#speak).val(); //清空说话内容文本框的值 $(#speak).focus(); //让说话内容文本框获得焦点 }); }); （9）在聊天信息相关的