第25讲：简单的Ajax应用示例.pptVIP

第25讲：简单的Ajax应用示例 11.1 什么是Ajax 11.2 简单Ajax应用示例 温故 要点回顾： 国际化级别 Action级、包级、应用级、临时指定 访问国际化消息的方法 区域属性的手动选择 i18n拦截器工作过程 s:select标记 本地化异常信息显示 资源文件参数化 作业中的问题 视图中输出资源文件的键名，如：login.username，表示资源文件未与应用程序关联，原因是资源文件位置不在根目录，或是未在struts.xml中配置相应常量 本讲要点与教学目标 什么是AJAX 什么是AJAX XMLHttpRequest对象简介 XMLHttpRequest对象创建 XMLHttpRequest对象应用 XMLHttpRequest对象应用 XMLHttpRequest对象应用 open函数 案例1：AJAX简单应用 案例1：AJAX简单应用 案例1：AJAX简单应用 案例1：AJAX简单应用 创建辅助文件content.html 其内容为: h2Hello Ajax!/h2 案例2：用户名的异步验证 案例2：用户名的异步验证 案例2：用户名的异步验证 案例2：用户名的异步验证 案例2：用户名的异步验证 案例2：用户名的异步验证 小结 Ajax简介 什么是Ajax？ Ajax的功能 Ajax的核心对象：XMLHttpRequest Ajax的简单应用 异步更新消息 用户名的异步验证 作业 调试案例1、2 * 主讲：武俊琢 【教学要点】 1、什么是AJAX 2、XMLHttpRequest对象的创建和使用 3、AJAX应用示例 【教学目标】 了解什么是AJAX，理解AJAX的工作原理，掌握XMLHttpRequest对象的创建和使用。 【AJAX简介】 1、AJAX= Asynchronous JavaScript And XML，异步JavaScript 及 XML 2、AJAX 不是一种新技术，而是一种旧技术的新用法，它是基于 JavaScript 和 HTTP 请求的 3、AJAX产生的目的是实现页面的局部刷新。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需 要更新内容，必需重载整个网页， 造成程序性能的降低 【AJAX简介】异步JavaScript 及 XML 4、Ajax技术应用广泛 在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。 Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当你在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。 目前Ajax技术应用广泛： Google、百度 注册时用户名检测 ...... AJAX技术的核心是XMLHttpRequest对象，通过该对象发送异步请求和处理响应 此对象最早在IE5中以ActiveX组件的形式出现，2005年之后得到广泛应用，目前IE5、IE6都使用这个对象，在IE7以上、FireFox内核浏览器中直接使用XMLHttpRequest对象 创建XMLHttpRequest对象必须使用JavaScript，在创建该对象时一定要考虑浏览器的问题。 script type=text/javascript var xmlhttp; function createXMLHttp() { if (window.XMLHttpRequest) {//IE7或FireFox浏览器 xmlhttp = new XMLHttpRequest(); } else {//其它浏览器，包括IE5、IE6 xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); } } /script XMLHttpRequest对象提供了很多属性和函数，用于实现异步请求处理功能。 【readyState属性】 返回当前的请求状态，有5个值，分别是： 0：请求未初始化（在调用open()函数之前） 1：请求服务器连接已建立，但没有发出（在调用send()之前） 2：请求已发出，服务器处理中 3：请求已处理，正在接收服务器响应信息，但是服务器尚未完成响应 4：响应已完成，可以访问服务器的响应 【status属性】返回当前请求的HTTP状态码 200：正常，O